JavaScript コード最適化の 5 つのヒントをまとめた記事

この記事では、より効率的で洗練されたコードを作成するのに役立つ 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 ]

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

• 5 JavaScript 構造化代入の一般的なシナリオと例
• JavaScript でのオブジェクトの分解について話しましょう

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 5. IIFE を使用してデータ プライバシーを保護します<h3 data-id="heading-4"></h3>IIFE とは、<p>Immediately Invoked Function Expression<code> (即時に呼び出される関数式) の略で、呼び出される関数です。定義時に即座に実行され、変数のプライベート スコープを作成する JavaScript 関数。これは、IIFE で宣言された変数に外部からアクセスできないようにするため、データ プライバシーの保護に役立ちます。 </code></p>この形式を使用してアプリケーションのパッケージを作成し、コード ロジックを名前空間に配置して変数の競合を回避し、コードをプライベートに保つことができます。このプライベート パッケージは <p><script> に適しています。 <code> ページにタグが導入されます。通常、この方法で WEB 統計コードがページに導入されていることがわかります。 <pre class="brush:php;toolbar:false">(function () {
    let key = "这是一个安全密钥";
})();
console.log(key); // ReferenceError: key is not defined</script></p>

IIFE が本当に優れているのは、スコープを作成できることです。IIFE 内の変数は外部からは見えません。グローバル変数の生成を減らし、変数名の競合の可能性を回避します。

例を見てみましょう:

(function initGame() {
    // 无法在 IIFE 外部访问的私有变量
    var lives;
    var player;

    init();

    // 在 IIFE 之外无法访问的私有函数
    function init() {
        lives = 5;
        player = "devpoint";
    }
})();

この例では、2 つの変数が宣言されています。どちらもプライベートです。つまり、IIFE 自体に対してのみ有効です。 IIFE 以外の人はアクセスできません。さらに、外部からアクセスできない

init メソッドがあります。

jQuery ソース コードを読んだことがある場合は、次のコードに精通しているはずです。

(function ($, global, document) {
    // 对 jQuery 使用 $，对 window 使用 global
})(jQuery, window, document);

概要

これらのコーディングのヒントを収集することで、次のコードを実行する能力を向上させることができます。エレガントで保守しやすいコードを書く能力。

推奨学習: 「

JavaScript ビデオ チュートリアル 」

以上がJavaScript コード最適化の 5 つのヒントをまとめた記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。