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

JavaScriptのスプレッド構文は、配列やオブジェクトなどの要素を展開して、別の配列やオブジェクトに挿入するための構文です。スプレッド構文は、「...」(三点リーダー)で表されます。

配列に適用

配列の要素を展開して別の配列に挿入する場合は、以下のように書くことができます。 

const arr = [10,20,30,40,50];
console.log(...arr); // 10 20 30 40 50

const arr2 = [0, ...arr];
console.log(arr2); // Array [0, 10, 20, 30, 40, 50]

const arr3 = ['moewe-net', 'com'];
console.log(...arr3); // "moewe-net" "com"

次のような使い方はできません。 

const a = ...arr;

関数の引数に適用

配列の要素を関数の引数として渡す場合は、以下のように書くことができます。 

function sum(x, y, z) {
  return x + y + z;
}

const params = [10, 20, 30];

console.log(sum(...params)); // 60

オブジェクトに適用

オブジェクトのプロパティを展開して別のオブジェクトに挿入する場合は、以下のように書くことができます。 

const obj1 = { a: 10, b: 20 };
const obj2 = { x: "X", y: "Y" };

const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // Object { a: 10, b: 20, x: "X", y: "Y" }
にほんブログ村 IT技術ブログへ

関連記事

コメント

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です