日々の開発でjsコードを見ていると、(...)のような記号をよく見かけます。ここではその意味と働きについてご紹介します。
定義:
スプレッド演算子 (…) は ES6 の構文で、パラメーター オブジェクトのすべての通過可能なプロパティを取り出し、それらを現在のオブジェクトにコピーするために使用されます。
基本的な使い方
let person = {
name: "Amy", age: 15}
let someone = {
...person }
someone // {name: "Amy", age: 15}
配列の特殊な使用
法 配列は
特殊なオブジェクトであるため、オブジェクトのスプレッド演算子を配列でも使用できます。
let foo = {
...['a', 'b', 'c'] };
foo
// {0: "a", 1: "b", 2: "c"}
Null オブジェクト
スプレッド演算子の後に Null オブジェクトが続く場合、効果はありません。
let a = {
...{
}, a: 1}
a // { a: 1 }
Int 型、Boolen 型、未定義、null
上記の型の後に拡張演算子が続く場合、独自のプロパティを持たないため、空のオブジェクトが返されます。
// 等同于 {...Object(1)}
{
...1} // {}
// 等同于 {...Object(true)}
{
...true} // {}
// 等同于 {...Object(undefined)}
{
...undefined} // {}
// 等同于 {...Object(null)}
{
...null} // {}
文字列
スプレッド演算子の後に文字列が続く場合、自動的に配列のようなオブジェクトに変換されます。
{
...'hello'}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
オブジェクトの結合
let age = {
age: 15}
let name = {
name: "Amy"}
let person = {
...age, ...name}
person; // {age: 15, name: "Amy"}
注意事項
カスタム属性が拡張演算子オブジェクトの属性と同じ場合:
カスタム属性が拡張演算子の背後にある場合、拡張演算子オブジェクト内の同じ名前の属性は上書きされます。
let person = {
name: "Amy", age: 15};
let someone = {
...person, name: "Mike", age: 17};
someone; //{name: "Mike", age: 17}
展開操作前のカスタム属性が、新しいオブジェクトのデフォルトの属性値になります。
let person = {
name: "Amy", age: 15};
let someone = {
name: "Mike", age: 17, ...person};
someone; //{name: "Amy", age: 15}
カスタム属性が拡張操作度の前にあり、その属性が拡張予算演算子の後のオブジェクトにある場合、オブジェクトの値が取り出され、拡張予算演算子は残りの属性を取り出します。
let person = {
name: "Amy", age: 15};
let someone = {
name, ...person};
someone; //{name: "Amy", age: 15}