JavaScriptの便利なスプレッド構文の使い方

2021年1月23日2021年4月24日JavaScript

配列の中に、別の配列の要素を入れたいとき、スプレッド構文を使います。

目次から読む

1. JavaScriptのスプレッド構文の使い方
2. 既存のオブジェクトに値を追加して、新しいオブジェクトを作る方法
3. 配列をコピーする(shallow copy)方法
4. 2つの配列をジョイントする方法
5. 文字列も分割できる
6. スプレッド構文と関数
7. スプレッド構文で既存のオブジェクトを拡張した新しいオブジェクトを作る方法
8. スプレッド構文でコピーして似たオブジェクトを作る方法

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

  'use strict';
  {
    const otherNumbers = [20, 30, 40, 50];
    const numbers = [0, 10, otherNumbers];
    console.log(numbers);
  }

たとえば、上のようにnumbersの配列にotherNumbersの要素を入れたいとします。
そのときに上のように書くと、配列ごと入ってしまいます。

そこで追加したい先頭に「…」を追加してあげます。
これをスプレッド構文といいます。

  'use strict';
      {
        const otherNumbers = [20, 30, 40, 50];
        //const numbers = [0, 10, otherNumbers];
        const numbers = [0, 10, ...otherNumbers];
        console.log(numbers);
        //(6) [0, 10, 20, 30, 40, 50]
      }

スプレッド構文は、関数の引数にもよく使われます。
下の例でいくと、
otherNumbers定数の値である10,30をsum関数の仮引数a,bで受け取っています。
そして、呼び出すときに、sum(…otherNumbers)とスプレッド構文にすることで、実引数として処理することができます。

  'use strict';
    {
      const otherNumbers = [10, 30];

      function sum(a, b) {
        console.log(a + b);
      }
     //スプレッド構文
      sum(...otherNumbers);//つまりsum(10,30)のこと
     //40
     //スプレッド構文なしだと...
      sum(otherNumbers);//つまりsum([10,30])で配列が入ってしまう
     //10,30undefined(求めた結果ではない)
    }

上のように、配列を数値として取り出すことができるので、関数の引数として使うときにも便利です。

既存のオブジェクトに値を追加して、新しいオブジェクトを作る方法

  'use strict';
{
  const arr = [6, 7, 8];
  //スプレッド構文がない場合
  const badArr = [ 1, 2, arr[0], arr[1], arr[2]];
  console.log(badArr); // [1, 2, 6, 7, 8]

    //スプレッド構文を使った場合
  const newArr = [1, 2, ...arr];
  console.log(newArr); // [1, 2, 6, 7, 8]という配列で得られる
  console.log(...newArr); // 1, 2, 6, 7, 8という独立した要素で得られる
}

スプレッド構文を使うと簡単に既存のオブジェクトに値を追加して、新しいオブジェクトを作ることができます。
スプレッド構文と分割代入の同じ点は、値を外に出せることです。
スプレッド構文と分割代入の違いは、スプレッド構文は変数を作らずにできることです。

配列をコピーする(shallow copy)方法

  'use strict';
{
  const restaurantS = {
      name: 'レストランsakaso',
      location: '尼崎、日本',
      categories: ['中華', '和食', 'フレンチ', 'イタリアン'],
      starterMenu: ['シーザーサラダ', '大根サラダ', '青じそサラダ', 'チキンサラダ'],
      mainMenu: ['カレー', 'ハンバーグ', 'スパゲッティ'],
  }
  const newMenu = [...restaurantS.mainMenu, '餃子'];
  console.log(newMenu);
  // (4) ["カレー", "ハンバーグ", "スパゲッティ", "餃子"]

  //スプレッド構文で配列をコピーする(shallow copy)
  const mainMenuCopy = [...restaurantS.mainMenu];
  console.log(mainMenuCopy);
  // (3) ["カレー", "ハンバーグ", "スパゲッティ"]

}

2つの配列をジョイントする方法

  'use strict';
{
  const restaurantS = {
      name: 'レストランsakaso',
      location: '尼崎、日本',
      categories: ['中華', '和食', 'フレンチ', 'イタリアン'],
      starterMenu: ['シーザーサラダ', '大根サラダ', '青じそサラダ', 'チキンサラダ'],
      mainMenu: ['カレー', 'ハンバーグ', 'スパゲッティ'],
  }

  //2つの配列をジョイントする
  const menu = [...restaurantS.mainMenu, ...restaurantS.starterMenu];
  console.log(menu);
  // (7) ["カレー", "ハンバーグ", "スパゲッティ", "シーザーサラダ", "大根サラダ", "青じそサラダ", "チキンサラダ"]
}

文字列も分割できる

  'use strict';
{
  const string = 'yamada';
  const letters = [...string, '', 's.'];
  console.log(letters);
// ["y", "a", "m", "a", "d", "a", "", "s."]
}

Iterables(反復可能な値): arrays, strings, maps, sets, NOT objects
Iterables(反復可能な値)はオブジェクトが含まれていない点に注意です。
このように文字列も分割することができます。
…stringはコンマで区切られた複数の値になるということなので、テンプレートリテラル${...string}のような、「コンマで区切られた複数の値」が期待されていないところには使えません。
スプレッド構文は配列を作るときか、関数に値を渡すときしか使えません。

スプレッド構文と関数

スプレッド構文を使うことで、たとえばpromptで得た配列情報を簡単にメソッドに渡すことができます。

  'use strict';
{
  const restaurantS = {
    orderCurry: function(ing1, ing2, ing3) {
      console.log(`こちらがご注文の${ing1}と${ing2}と${ing3}を使用したカレーです。`)
    }
};

  const ingredients = [
    prompt('カレーの材料1をお選びください'),
    prompt('カレーの材料2をお選びください'),
    prompt('カレーの材料3をお選びください'),
  ];

//スプレッド構文を使わないやり方
restaurantS.orderCurry(ingredients[0],ingredients[1],ingredients[2]);
//スプレッド構文を使ったやり方
restaurantS.orderCurry(...ingredients);
// こちらがご注文の(材料1)と(材料2)と(材料3)を使用したカレーです。
}

プロンプトで入力された材料1、材料2、材料3を使用したカレーとアウトプットすることができます。
上の例のように、スプレッド構文を使わないやり方でも可能ですが、スプレッド構文を使ったやり方のほうがとてもシンプルです。

スプレッド構文で既存のオブジェクトを拡張した新しいオブジェクトを作る方法

スプレッド構文を使うことで既存のオブジェクトを拡張した新しいオブジェクトを簡単につくれます。

  'use strict';
{
  const restaurantS = {
    name: 'レストランsakaso',
    location: '尼崎、日本',
};

const restaurantSS = {foundedIn: 1900, ...restaurantS, founder: 'Yamada'};
console.log(restaurantSS);
// {foundedIn: 1900, name: "レストランsakaso",
//  location: "尼崎、日本", founder: "Yamada"}
}

このように、既存のオブジェクトに、新しいプロパティとキーを追加したオブジェクトを簡単に作成することができます。

スプレッド構文でコピーして似たオブジェクトを作る方法

スプレッド構文を使うことで既存のオブジェクトを拡張した新しいオブジェクトを簡単につくれます。

  'use strict';
{
  const restaurantS = {
    name: 'レストランsakaso',
    location: '尼崎、日本',
    categories: ['中華', '和食', 'フレンチ', 'イタリアン'],
    starterMenu: ['シーザーサラダ', '大根サラダ', '青じそサラダ', 'チキンサラダ'],
    mainMenu: ['カレー', 'ハンバーグ', 'スパゲッティ'],
};
//コピーする
const restaurantSCopy = {...restaurantS};
restaurantSCopy.name = 'レストラン saito';
console.log(restaurantSCopy.name);//レストラン saito
console.log(restaurantSCopy);
// {name: "レストラン saito", location: "尼崎、日本", categories: Array(4), starterMenu: Array(4), mainMenu: Array(3)}
}

このようにすることで、{name: “レストラン saito"}だけが違うオブジェクトを簡単に作成することができます。

JavaScript

Posted by devsakaso

JavaScriptのレスト構文とスプレッド構文の使い方

JavaScriptの分割代入の使い方