Programming Self-Study Notebook

勉強したことを忘れないように! 思い出せるように!!

JavaScriptの「スプレッド構文」の使い方

f:id:overworker:20200406080809j:plain:h250

参考文献

スプレッド構文とは

  • 配列やオブジェクトのカッコ([]とか{})を外すことができる。
const items = ['a', 'b', 'c'];

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

配列での使い方

基本動作

const items = ['a', 'b', 'c'];

// 配列のコピー
const items2 = [...items];
console.log(items2);          // ["a", "b", "c"]

// 配列の結合
const items3 = [...items,...items2];      //items3 = items1.concat(items2) と同じ
console.log(items3);                      // ["a", "b", "c", "a", "b", "c"]

const items4 = [1,...items2,2];
console.log(items4);          // [1, "a", "b", "c", 2]

// 配列の分解
const [a,b,...other] = [1,2,3,4,5];
console.log(a);                 // 1
console.log(b);                 // 2
console.log(other);             // [3, 4, 5]

少し発展

// 文字列を配列に分解
const word = 'String型を配列に分解😀';
const stringArray = [...word];
console.log(stringArray);          // ["S", "t", "r", "i", "n", "g", "型", "を", "配", "列", "に", "分", "解", "😀"]

// 配列から重複を取り除く
const data = ['a', 'b', 'c', 'a', 'b', 'd', 'e', 'c', 'f'];
const list = [...(new Set(data))];

console.log(list);                // ["a", "b", "c", "d", "e", "f"]

オブジェクトでの使い方

基本動作

const name = {
  firstName : 'Taro',
  lastName : 'Yamada',
}
console.log(name);     // {firstName: "Taro", lastName: "Yamada"}

// オブジェクトのコピー
const name2 = {...name}

// オブジェクトの結合①
const profile = {
  ...name,
  age : 38,
}
console.log(profile);   // {firstName: "Taro", lastName: "Yamada", age: 38}

// オブジェクトの結合+更新
const profile = {
  ...name,
  age : 38,
  lastName : 'Suzuki',
}
console.log(profile);   // {firstName: "Taro", lastName: "Suzuki", age: 38}

// オブジェクトの結合②
const address = {
  country: 'Japan',
  region: 'Tokyo-to',
}
const profile2 = {
  ...name,
  ...address,
}
console.log(profile2);   // {firstName: "Taro", lastName: "Yamada", country: "Japan", region: "Tokyo-to"}

その他の記事について

overworker.hatenablog.jp