ES6を使用したJavaScriptでのオブジェクトと配列の破棄

投稿日: 2022-06-17 2022-06-17
タグ: javascript

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

getdocs

13036