最近、vue.jsでスプレット構文を使用する機会が続きました。
正直なんとなく使用していたので、このタイミングでしっかり覚えるために使用例をまとめました。
スプレット構文とは
簡単に言うと、ドットが3つ並んだ構文（…）を用いて、オブジェクトや配列の中身を他のリストに入れることです。
詳しい説明はMozilla先生をチェックしてください。
配列での使用例
配列の展開
そのまま配列の中身が展開される。
const brother = ['長男', '次男', '三男'];
console.log(...brother)
// ※実行結果
// "長男" "次男" "三男"配列の複製
異なる参照を持つ配列をする。
そのため、要素を追加してもコピー元の配列は影響を受けません。
const brother = ['長男', '次男'];
const NewBrother = [...brother];
NewBrother.push('三男');
console.log(brother);
// ※実行結果
// ["長男","次男"]
console.log(NewBrother);
// ※実行結果
// ["長男","次男","三男"]配列の中に展開①
配列に他の配列の中身を展開し、新しい配列を生成する。
const brother = ['長男', '次男', '三男'];
const sibling = [...brother, '長女', '次女', '三女'];
console.log(sibling)
// ※実行結果
// ["長男","次男","三男","長女","次女","三女"]配列の中に展開②
複数の配列を展開し、結合させて新しい配列を生成する。
const brother = ['長男', '次男', '三男'];
const sisters = ['長女', '次女', '三女'];
const sibling = [...brother, ...sisters];
console.log(sibling)
// ※実行結果
// ["長男","次男","三男","長女","次女","三女"]分割代入との組み合わせ
要素を取り出しつつ、残りを変数に代入する。
const sibling = ['長男', '長女', '次女'];
const [i, ...ii] = sibling;
console.log(i);
// ※実行結果
// "長男"
console.log(ii);
// ※実行結果
// ["長女","次女"]オブジェクトでの使用例
オブジェクトの中に展開①
オブジェクトに他のオブジェクトの中身を展開し、新しいオブジェクトを生成する。
const children = {
boy : '次郎',
girl : '春子'
};
const family = {
father : '太郎',
mother : '花子',
...children,
};
console.log(family)
// ※実行結果
// {
// father: "太郎",
// mother: "花子",
// boy: "次郎",
// girl: "春子",
// }オブジェクトの中に展開②
複数のオブジェクトを展開し、結合させて新しいオブジェクトを生成する。
const parents = {
father : '太郎',
mother : '花子',
};
const children = {
boy : '次郎',
girl : '春子'
};
const family = {
...parents,
...children,
};
console.log(family)
// ※実行結果
// {
// father: "太郎",
// mother: "花子",
// boy: "次郎",
// girl: "春子",
// } 同じプロパティ名は上書きされる
複数のオブジェクト同士を結合する際、同じプロパティ名が存在していたら最後に展開したプロパティの値で上書きされるので注意が必要。
分割代入との組み合わせ
要素を取り出しつつ、残りを変数に代入する。
const family = {
father : '太郎',
mother : '花子',
child1 : '次郎',
child2 : '春子'
};
const { father, ...etc } = family;
console.log(father);
// ※実行結果
// "太郎"
console.log(etc);
// ※実行結果
// {
// mother: "花子",
// boy: "次郎",
// girl: "春子",
// }