基本的な使用例

以下のプログラムは、concat() メソッドを使用して2つの配列を結合する基本的な例です。

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const newArray = array1.concat(array2);

console.log(newArray); // ['a', 'b', 'c', 'd', 'e', 'f']
console.log(array1);   // ['a', 'b', 'c'] - 元の配列は変更されない

このプログラムでは、concat() メソッドを使用して array1 と array2 を結合し、新しい配列 newArray を作成しています。元の配列 array1 は変更されません。

複数の配列と値を結合する例

以下のプログラムは、concat() メソッドを使用して複数の配列と値を結合する例です。

const letters = ['a', 'b', 'c'];
const numbers = [1, 2, 3];
const booleans = [true, false];
const result = letters.concat(numbers, 'x', booleans);

console.log(result); // ['a', 'b', 'c', 1, 2, 3, 'x', true, false]

このプログラムでは、concat() メソッドを使用して letters 配列に numbers 配列、単一の値 'x'、そして booleans 配列を結合しています。

ネストした配列の結合例

以下のプログラムは、concat() メソッドがネストした配列をどのように扱うかを示す例です。

const array1 = [1, 2, [3, 4]];
const array2 = [[5, 6], 7, 8];
const result = array1.concat(array2);

console.log(result); // [1, 2, [3, 4], [5, 6], 7, 8]

このプログラムでは、concat() メソッドはネストした配列を新しい配列にコピーしますが、ネストした配列自体をフラット化しません。ネストした配列構造は保持されます。

スプレッド構文との比較例

以下のプログラムは、concat() メソッドとスプレッド構文の使用を比較する例です。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

// concat()を使用した場合
const newArray1 = array1.concat(array2);

// スプレッド構文を使用した場合
const newArray2 = [...array1, ...array2];

console.log(newArray1); // [1, 2, 3, 4, 5, 6]
console.log(newArray2); // [1, 2, 3, 4, 5, 6]

このプログラムでは、concat() メソッドとスプレッド構文の両方が同じ結果を生成することを示しています。両方のアプローチは新しい配列を作成し、元の配列は変更されません。

注意点

• 非破壊的: concat() メソッドは元の配列を変更せず、新しい配列を返します。
• 浅いコピー: concat() メソッドは浅いコピーを作成します。元の配列要素のオブジェクト参照は新しい配列にコピーされます。
• 配列風オブジェクト: concat() の引数として配列風オブジェクトを渡すと、オブジェクト全体が単一の要素として追加されます（Arrayオブジェクトを除く）。
• パフォーマンス: 大量のデータを結合する場合、パフォーマンスが考慮事項となることがあります。