配列でのスプレッド構文

CoddyのJavaScriptジャーニー「論理とフロー」セクションの一部 — レッスン 48/65。

スプレッド構文 (...) を使用すると、配列などの反復可能オブジェクト（iterable）を、0個以上の引数や要素が期待される場所で展開できるようになります。これにより、配列の結合やコピーなどの操作を簡潔に行う方法が提供されます。

以下は一般的なユースケースです：

1. 配列の結合:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

2. 配列の浅いコピーを作成する:

const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]

3. 配列への要素の追加:

const numbers = [1, 2, 3];
const moreNumbers = [0, ...numbers, 4];
console.log(moreNumbers); // [0, 1, 2, 3, 4]

4. 配列の要素を関数の引数として渡す:

function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

チャレンジ

簡単

2つの数値の配列を引数として受け取る mergeArr という名前の関数を作成してください。この関数は以下の処理を行う必要があります：

チートシート

スプレッド構文 (...) を使うと、0個以上の引数や要素が期待される場所で、反復可能オブジェクト（iterable）を展開することができます。

配列の結合:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

浅いコピー（shallow copy）の作成:

const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]

配列への要素の追加:

const numbers = [1, 2, 3];
const moreNumbers = [0, ...numbers, 4];
console.log(moreNumbers); // [0, 1, 2, 3, 4]

配列の要素を関数の引数として渡す:

function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

自分で試してみよう

function mergeArr(arr1, arr2) {
  // ここにコードを書いてください
}

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。