JavaScript コード最適化の 5 つのヒントをまとめた記事-jsチュートリアル-php.cn

この記事では、より効率的で洗練されたコードを作成するのに役立つ 5 つのコード最適化のヒントを紹介します。これらの手法は、スプレッド演算子を使用してコードを簡素化することから、async/await を使用して非同期コードを処理することまで多岐にわたります。

1. スプレッド演算子を使用してオブジェクトと配列を分割する

スプレッド演算子は 3 つのドット ... で表され、オブジェクトと配列を分割するために使用できます。オブジェクトの場合、別のオブジェクトのプロパティのサブセットを使用して新しいオブジェクトを簡単に作成できます。

const numbersObj = { a: 1, b: 2, c: 3 };
const newObject = { ...numbersObj, b: 4 };
console.log(newObject); // { a: 1, b: 4, c: 3 }

ログイン後にコピー

配列の場合、スプレッド演算子を使用すると、配列要素の抽出と操作が簡単になります。

const numbersArray = [1, 2, 3, 4, 5];
const newArray = [...numbersArray.slice(0, 2), 6, ...numbersArray.slice(4)];
console.log(newArray); // [ 1, 2, 6, 5 ]

ログイン後にコピー

構造化演算子については、興味があれば次を参照してください:

2. async/await を使用して非同期コードを簡素化します

##async/await は非同期コードを処理するための JavaScript メソッドを簡素化する方法。これにより、同期コードのように見え、動作する方法で非同期コードを作成できます。

async function getData() {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await response.json();
    console.log(data);
}
getData();

ログイン後にコピー

3. 高度なプロパティアクセスにプロキシオブジェクトを使用する

JavaScript の Proxy オブジェクトを使用すると、インターセプトとカスタムプロパティアクセスが可能になります。これは、高度なデータ検証、ログ記録などに役立ちます。

Proxy オブジェクトは、基本操作 (プロパティの検索、割り当て、列挙、関数呼び出しなど) のインターセプトとカスタマイズを実装するオブジェクトのプロキシを作成するために使用されます。
const target = {};
const handler = {
    get: (target, prop) => {
        console.log(`获取属性：${prop}`);
        return target[prop];
    },
    set: (target, prop, value) => {
        console.log(`属性 ${prop} 更新为 ${value}`);
        target[prop] = value;
    },
};
const proxy = new Proxy(target, handler);

proxy.name = "DevPoint";
console.log(proxy.name);
ログイン後にコピー

4. 三項演算子を使用して条件ロジックを最適化する

三項演算子は、JavaScript 略語で単純な

if-else ステートメントを記述する方法です。これは、条件とそれに対応する結果を表現する簡潔かつ効率的な方法です。

const x = 5;
const result = x > 0 ? "positive" : "negative";
console.log(result); // positive

ログイン後にコピー

より複雑な条件用にネストすることもできます。

const age = 30;
const result =
    age < 18 ? "未成年人" : age >= 18 && age < 60 ? "成年人" : "老年人";
console.log(result); // 成年人

ログイン後にコピー

5. IIFE を使用してデータプライバシーを保護します

IIFE とは、

Immediately Invoked Function Expression (即時に呼び出される関数式) の略で、呼び出される関数です。定義時に即座に実行され、変数のプライベートスコープを作成する JavaScript 関数。これは、IIFE で宣言された変数に外部からアクセスできないようにするため、データプライバシーの保護に役立ちます。

この形式を使用してアプリケーションのパッケージを作成し、コードロジックを名前空間に配置して変数の競合を回避し、コードをプライベートに保つことができます。このプライベートパッケージは

人気のチュートリアル

詳細>