【解説】配列・オブジェクトの分割代入の使い方【JavaScript】
配列やオブジェクトから値を取り出して、個々の変数に代入するのを分割代入といいます。
配列とオブジェクト順に使い方を見ていきましょう。
const fruit = ['りんご', 'おれんじ', 'もも'];
const [a, b, c] = fruit;
console.log(a); // りんご
console.log(b); // おれんじ
console.log(c); // ももfruitの中にある配列要素が、「a, b, c」の中にそれぞれ代入されます。
ようは下記の冗長な書き方が、短縮されたって感じですね。
const a = fruit[0];
const b = fruit[1];
const c = fruit[2];↓↓↓↓
const [a, b, c] = fruit;こちらのほうがコードが短く、見やすくなりますね。
ちなみにスプレッド構文が使われたときの分割代入がこちら。
const fruit = ['りんご', 'おれんじ', 'もも'];
const [a, ...b ] = fruit;
console.log(a); // りんご
console.log(...b); // おれんじ もも
【解説】スプレッド構文の使い方【JavaScript】 const fruit = {
name: 'りんご',
color: '赤色',
}
const { name, color } = fruit;
console.log(name); // りんご
console.log(color); // 赤色fruitの中にあるオブジェクトの要素が、「name」「color」に代入されます。
ようは下記の冗長な書き方が、短縮されたって感じですね。
const name = fruit.name;
const color = fruit.color;↓↓↓↓
const { name, color } = fruit;こちらのほうがコードが短く、見やすくなりますね。
オブジェクトの分割代入にて、別の変数名を使いたいときもあるかと思います。
実はそれ｛プロパティ名: 変数名｝ように書けば対応可能です。
const fruit = {
name: 'りんご',
color: '赤色',
}
const { name: a, color: b } = fruit;
console.log(a); // りんご
console.log(b); // 赤色ネストされたオブジェクトの分割代入は、少し書き方が異なります。
代入時にプロパティ名: {変数名}ように書けば対応可能です。
const fruit = {
name: 'りんご',
color: '赤色',
detail: {
price: 500,
num: 2,
}
}
const { name, color, detail: { price, num} } = fruit;
console.log(price); // 500
console.log(num); // 2
