ES6 の 6 つの小さな機能について簡単に説明しましょう-PHP开发-php.cn

前書き

この記事では主に ES6 について簡単に紹介します。実際、ES6 は新しい JavaScript 仕様です。誰もがとても忙しいこの時代に、ES6 について簡単に理解したい場合は、読み続けて、現在最も人気のあるプログラミング言語である最新世代の JavaScript の 6 つの主要な機能について学んでください。

ES6 はこの 1 年間で多くの進歩をもたらしました。JS の私のお気に入りの新機能を 6 つ紹介します。

1. Object[key]

オブジェクト変数の宣言時にすべてのキー/値を設定できない場合があるため、宣言の後にキー/値を追加する必要があります。

let myKey = &#39;key3&#39;;
let obj = {
  key1: &#39;One&#39;,
  key2: &#39;Two&#39;
};
obj[myKey] = &#39;Three&#39;;

ログイン後にコピー

これは良く言えば少し不便で、分かりにくく、悪く言えば少し見苦しいです。

ES6 は開発者に、よりエレガントな方法を提供します:

let myKey = &#39;variableKey&#39;;
let obj = {
  key1: &#39;One&#39;,
  key2: &#39;Two&#39;,
  [myKey]: &#39;Three&#39; /* yay! */
};

ログイン後にコピー

開発者は [] を使用して変数をラップし、1 つのステートメントですべての関数を完了できます。

2. アロー関数

アロー関数は、多くの議論の対象となっており、JS 開発者に混乱を引き起こしています。アロー関数の特性についてブログ記事をたくさん書くことはできますが、ここでは、アロー関数が単純な関数のコードを圧縮する方法をどのように提供するかを指摘したいと思います。

// Adds a 10% tax to total
let calculateTotal = total => total * 1.1;
calculateTotal(10) // 11
 
// Cancel an event -- another tiny task
let brickEvent = e => e.preventDefault();
document.querySelector(&#39;div&#39;).addEventListener(&#39;click&#39;, brickEvent);

ログイン後にコピー

関数と return キーワードがなければ、() を追加する必要さえない場合もあります。アロー関数は、関数を記述するためのコードを記述するための短い方法を提供します。

3. find/findIndex

JS は配列内の指定された要素の添字を取得する Array.prototype.indexOf メソッドを開発者に提供しますが、indexOf は判定条件に基づいて指定された要素を取得するメソッドを提供しません。 find と findIndex の 2 つのメソッドは、計算条件を満たす最初の要素と添え字を取得する機能を提供します。

let age = [12,19,6,4];
 
let firstAdult = ages.find(age => age >= 18); // 19
let firstAdultIndex = ages.findIndex(age => age >= 19); // 1

ログイン後にコピー

4....拡張修飾子

拡張修飾子は、呼び出し時に配列と反復可能なオブジェクトを単一のパラメータに分割する必要があることを示します:

// Pass to function that expects separate multiple arguments
// Much like Function.prototype.apply() does
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
 
// Convert NodeList to Array
let divsArray = [...document.querySelectorAll(&#39;div&#39;)];
 
// Convert Arguments to Array
let argsArray = [...arguments];

ログイン後にコピー

この特定の他の 1 つのボーナスは反復可能にできますオブジェクト (NodeList、引数) を実際の配列に変換するために、以前は Array.from または他のメソッドを使用することがよくありました。

5. テンプレートリテラル

JS の複数行文字は当初 + と ``` によって実装されましたが、維持するのが困難でした。多くの開発者と一部のフレームワークは、

人気のチュートリアル

詳細>