ES6 / ES2015を使用すると、配列やオブジェクトからデータをより簡単に、構文が煩雑にならずに抽出できるようになりました。 次のスニペットの例で、それがどのように行われるかを確認してください。
アレイの破壊
値が配列内のアイテムに対応する変数を自動的に作成します。
const names = ['Bob', 'Fred', 'Benedict'];
const [cat, dog, alligator] = names;
console.log(cat); // Bob
console.log(dog); // Fred
console.log(alligator); // Benedict
変数名に名前のないコマを使用して、アイテムをスキップすることもできます。
const names = ['Bob', 'Fred', 'Benedict'];
const [cat, , alligator] = names;
console.log(cat); // Bob
console.log(alligator); // Benedict
そして、配列の一部を分解して、残りを新しい配列に入れることができます。
const names = ['Bob', 'Fred', 'Benedict'];
const [cat, ...rest] = names;
console.log(cat); // Bob
console.log(rest); // ["Fred", "Benedict"]
オブジェクトの破壊
キーは必ずしも特定の順序である必要はないため、オブジェクトの破棄は少し異なります。したがって、新しい変数は、オブジェクトのキーと一致する名前を持つ必要があります。
const names = {cat: 'Bob', dog: 'Fred', alligator: 'Benedict'};
const {cat, dog, alligator} = names;
console.log(cat); // Bob
console.log(dog); // Fred
console.log(alligator); // Benedict
名前を一致させる方法はありますが、変数に新しい名前を付ける方法は次のとおりです。
const names = {cat: 'Bob', dog: 'Fred', alligator: 'Benedict'};
const {cat: newCat, dog: newDog, alligator: newAlligator} = names;
console.log(newCat); // Bob
console.log(newDog); // Fred
console.log(newAlligator); // Benedict