【配列編】スプレッド構文の使い方【JavaScript】
新しい配列を作る時に「…配列の変数名」のように記述。
すると配列の中身が展開され、新たな配列が作成できます。
これをスプレッド構文といいます。
const fruit = ['りんご', 'おれんじ', 'もも'];
const fruit2 = [ ...fruit ];
const fruit3 = [ ...fruit, 'ぶどう', 'めろん' ];
const fruit4 = [ ...fruit, ...fruit3 ];
console.log(fruit);
console.log(fruit2);
console.log(fruit3);
console.log(fruit4);(3) ['りんご', 'おれんじ', 'もも']
(3) ['りんご', 'おれんじ', 'もも']
(5) ['りんご', 'おれんじ', 'もも', 'ぶどう', 'めろん']
(8) ['りんご', 'おれんじ', 'もも', 'りんご', 'おれんじ', 'もも', 'ぶどう', 'めろん']配列の要素を追加することも可能ですし、「…配列名, …配列名」という書き方もできます。
【オブジェクト編】スプレッド構文の使い方【JavaScript】
新しいオブジェクトを作る時に「…オブジェクトの変数」のように記述。
するとオブジェクトの中身が展開され、新たなオブジェクトが作成されます。
const fruit = {
name: 'もも',
color: 'pink',
};
const fruit2 = { ...fruit };
console.log(fruit2);color: "pink"
name: "もも"ちなみにプロパティを追加することも可能です。
展開されてるだけなので、「,」で区切れば追加できます。
const fruit = {
name: 'もも',
color: 'pink',
};
const fruit2 = {
...fruit,
size: 'ふつう',
};
console.log(fruit2);color: "pink"
name: "もも"
size: "ふつう"ただオブジェクトがネストされている場合のスプレッド構文は注意が必要です。
というのもネストされたオブジェクトは、同じものを参照するため。
例として「fruit2」のネストされた値を変更したら、「fruti」の方の値も変更されました↓
const fruit = {
detail: {
price: 500,
num: 2,
}
};
const fruit2 = { ...fruit };
fruit2.detail.price = 1000;
// fruit
console.log(fruit.detail.price);
// fruit2
console.log(fruit2.detail.price);1000
1000ネストされた場合も別々に扱いたい場合は、下記のように指定しましょう。
const fruit = {
name: 'もも',
color: 'pink',
detail: {
price: 500,
num: 2,
}
};
const fruit2 = {
...fruit,
detail: {
...fruit.detail
},
};
fruit2.detail.price = 1000;
// fruit
console.log(fruit.detail.price);
// fruit2
console.log(fruit2.detail.price);500
1000これで個別に値を変更することができました！
