JavaScriptのスプレッド構文まとめ

今回は、JavaScriptのスプレッド構文について様々な機能をまとめてみました。

配列のスプレッド構文の紹介

①配列の複製
②配列要素を追加した新しい配列の生成
③配列の結合

// 配列
const a = [1,2] 

//①配列の複製
const b = [...a] //[1,2]

//②配列要素を追加した新しい配列の生成
const c = [...a, 3,4] //[1,2,3,4]

//③配列の結合
const d = [...b,...c] //[ 1, 2, 1, 2, 3, 4 ]

例えば、①配列の複製は、sort()メソッドのような破壊的メソッドを使用する際に元の配列を変更させたくない時などに使います。

const a = [ 1, 9, 4, 6 ]
const b = [...a]
const c = b.sort()

console.log(a) // [ 1, 9, 4, 6 ]
console.log(b) // [ 1, 4, 6, 9 ]
console.log(c) // [ 1, 4, 6, 9 ]

オブジェクトのスプレッド構文の紹介

①オブジェクトの複製
②プロパティを追加した新しいオブジェクトの生成
③プロパティの値を置き換える
④オブジェクトの結合

//オブジェクト
const obj = { a: 1, b: 2 } 

//①オブジェクトの複製
const obj2 = {...obj} //{ a: 1, b: 2 }

//②キーとプロパティを追加した新しいオブジェクトの生成

const obj3 = {...obj, c:3, d:4} //{ a: 1, b: 2, c: 3, d: 4}

//③プロパティの値を置き換える
const obj4 = {...obj, a:3, b:4 } //{ a: 3, b: 4 }


const obj4 = {...obj, ...{a:3, b:4}} //{ a: 3, b: 4 }

//④オブジェクトの結合
const obj5 = { c: 3, d: 4 }
const newObj = {...obj,...obj5} //{ a: 1, b: 2, c: 3, d: 4 }

オブジェクトのネストでスプレッド構文を使う場合、下記のように個別に分割する必要があります。

// オブジェクトのネスト
const obj = { b: {
  c: 1,
  d: 2,
},
  e: 3
}

const obj2 = {
  ...obj,
  b: { 
    ...obj.b,
    d: 4
  }
}

console.log(obj2); // { b: {c: 1, d:4}, e:3}

pushとunshiftを使用する際にも利用可能。
pushの場合

const a = [1,2,3]
const b = ['a','b','c']
a.push(...b)
console.log(a); //[1,2,3,'a','b','c']

unshiftの場合

a.unshift(...b)
console.log(a); //['a','b','c',1,2,3]

split('')メソッドのような文字列を配列にする事もスプレッド構文で可能です。

const strings =  'Hello World'
const a = [...strings] 

console.log(a);// ['H', 'e', 'l', 'l','o', ' ', 'W', 'o','r', 'l','d']

また上記のように文字列を配列にした後に,for文のように一文字づつ操作するために合わせてforEach()メソッドを利用する事も出来ます。

const strings =  'Hello World'
const a = [...strings].forEach(str => console.log(str))

スプレット構文を使用して配列から重複を取り除く事も可能です。

const a =  ['a','b','c','b','a']
const b = [...(new Set(a))]

console.log(b); //['a','b','c']

引数にスプレッド構文を使用して、
不特定多数の引数を配列として受け取る事も出来ます。この構文をRestパラメーターと呼びます。
受け取る引数の数が不特定の場合に有効です。以下カードになります。

const sum = (...strings) => {
  return strings.reduce((a,b) => a + b)
}

console.log(sum('a','b','c','b','a')); // 'abcba'
console.log(sum('x','y','z','y','x')); // 'xyzyx'

配列やオブジェクトの要素を取り出して個別の変数に代入するのを簡単に行える分割代入においてもスプレッド構文を使用できます。配列やオブジェクト内の指定した要素を取り出して、残りの要素をスプレッド構文によって配列およびオブジェクトで返す事が出来ます。実際に見てみると以下のようになります。

const arr = [1, 2, 3];
const [a, ...rest] = arr
console.log(a); // 1
console.log(rest); // [2, 3]

const obj = { a: 1, b: 2, c: 3 };
const { a, ...rest } = obj;
console.log(a); // 1
console.log(rest); // { b: 2, c: 3 }

ネストしたオブジェクトにおいては下記のような書き方になります。

const obj = {
  a: ['x','y','z'],
  b: { d:1, e:2, f:3 }
}

const { a: [a1,...arrRest], b: {d,...objRest}} = obj

console.log(obj.a);　//[ 'x', 'y', 'z' ]
console.log(obj.b); //{ d: 1, e: 2, f: 3 }
console.log(arrRest); //[ 'y', 'z' ]
console.log(objRest); //{ e: 2, f: 3 }

以上、僕が最近使ったスプレッド構文の機能のまとめでした。