ES6 の 6 つの小さな機能について簡単に説明しましょう

前書き

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

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

1. Object[key]

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

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

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

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

let myKey = 'variableKey';
let obj = {
  key1: 'One',
  key2: 'Two',
  [myKey]: 'Three' /* 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('div').addEventListener('click', 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('div')];
 
// Convert Arguments to Array
let argsArray = [...arguments];

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

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

JS の複数行文字は当初 + と ``` によって実装されましたが、維持するのが困難でした。多くの開発者と一部のフレームワークは、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを使用してテンプレートを保持し、DOM メソッドの innerHTML```` を使用して HTML 文字を取得します。

ES6 は、バッククォートを使用して複数行の文字列を簡単に作成するためのテンプレート リテラルを提供します:

// Multiline String
let myString = `Hello
 
I'm a new line`;
 
//Basic interpolations
let obj = {x:1,y:2};
 
console.log(`Your total is: ${obj.x + obj.y}`); // Your total is 3

6. デフォルトの引数の値

関数パラメータのデフォルト値の提供は、サーバーサイド言語で提供されています ( python、php ) に加え、JS にも次の機能が追加されました:

//Basic usage
 
function great( name = 'Anon' ){
  console.log(`Hello ${name}`);
}
 
great(); // Hello Anon!
 
//You can have a function too!
 
function greet( name = 'Anon',callback = function(){} ){
  console.log(`Hello ${name}!`);
  // No more "callback && callback()" (no conditional)
  callback();
}
 
// Only set a default for one parameter
function greet(name, callback = function(){}) {}

上記の 6 つの機能は ES6 が開発者に提供するもので、もちろん他にも多くの機能があります。