9.1 スプレッド（spread）オペレーター
JavaScriptのrestとspreadオペレーターは、配列、オブジェクト、関数での作業をかなり柔軟にしてくれるよ。 これらの操作を使うと、コードをより表現豊かで柔軟にできる。ここでは、restとspreadの基本概念とその使用例を詳しく見ていこう。
spread (...)オペレーターは、配列やオブジェクトを複数の要素として「展開」することができるんだ。 配列やオブジェクトをコピーしたり結合したり、関数に引数を渡すときに便利。
例 1: 配列のコピー
この例では、copiedArrayはoriginalArrayのコピーだよ。
ここで…オペレーターは配列を変数のリストとして「展開」し、[]オペレーターは変数のセットを新しい配列に「パック」する感じ：
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // 出力: [1, 2, 3]
例 2: 配列の結合
この例では、2つの配列array1とarray2が1つの配列combinedArrayに結合される。
ここで…オペレーターは2つの配列を変数のリストとして「展開」し、[]オペレーターは変数のセットを新しい配列に「パック」する感じ：
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // 出力: [1, 2, 3, 4, 5, 6]
例 3: 関数への引数の渡し方
この例では、配列numbersが関数sum()への3つの引数として展開される：
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 出力: 6
例 4: オブジェクトのコピー
この例では、copiedObjectはoriginalObjectのコピーだよ：
const originalObject = { a: 1, b: 2 };
const copiedObject = { ...originalObject };
console.log(copiedObject); // 出力: { a: 1, b: 2 }
例 5: オブジェクトの結合
この例では、2つのオブジェクトobj1とobj2が1つのオブジェクトcombinedObjectに結合される：
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // 出力: { a: 1, b: 2, c: 3, d: 4 }
9.2 レスト（rest）オペレーター
rest (...)オペレーターは、複数の要素を配列として収集することができるんだ。 関数が可変数の引数を取る場合や、配列やオブジェクトを分割する場合にとても便利。
例 1: 関数における残りのパラメータ
この例では、関数sum()は任意の数の引数を取り、それらを合計する：
function sum(...numbers) {
return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3)); // 出力: 6
console.log(sum(4, 5, 6, 7)); // 出力: 22
例 2: restを使った配列の分割
この例では、配列の最初の2つの要素がfirstとsecondに代入され、 残りの要素がrest配列に収集される：
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 出力: 1
console.log(second); // 出力: 2
console.log(rest); // 出力: [3, 4, 5]
例 3: restを使ったオブジェクトの分割
この例では、プロパティaとbが個別の変数に抽出され、残りのプロパティがrestオブジェクトに収集される：
const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a); // 出力: 1
console.log(b); // 出力: 2
console.log(rest); // 出力: { c: 3, d: 4 }
9.3 実際の課題でのrestとspreadの応用
例 1: 条件付きで配列を結合する
この例では、ユーザーの設定userSettingsがデフォルトの設定defaultSettingsを上書きする：
const defaultSettings = { theme: 'dark', showNotifications: true };
const userSettings = { showNotifications: false, fontSize: 14 };
const settings = { ...defaultSettings, ...userSettings };
console.log(settings); // 出力: { theme: 'dark', showNotifications: false, fontSize: 14 }
例 2: 配列の分割
この例では、配列numbersを最初の2つの要素を抽出した後、2つの部分に分割する：
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const [first, second, ...rest] = numbers;
const firstHalf = rest.slice(0, Math.floor(rest.length / 2));
const secondHalf = rest.slice(Math.floor(rest.length / 2));
console.log(firstHalf); // 出力: [3, 4, 5, 6]
console.log(secondHalf); // 出力: [7, 8, 9, 10]
GO TO FULL VERSION