【JavaScript】Arrayクラスのconcat()メソッドについて

JavaScriptのconcat()メソッドは、配列を結合するための強力なツールです。このメソッドを使うことで、複数の配列や値を一つの新しい配列にまとめることができます。本記事では、concat()メソッドの基本的な使い方から応用例まで詳しく解説します。

目次

Arrayクラスのconcat()メソッドの基本構文

concat()メソッドの基本構文は以下の通りです:

array1.concat(array2, array3, ..., arrayN);
  • array1: 基本となる配列。
  • array2, array3, ..., arrayN: 結合したい配列や値。任意の数を指定できます。

このメソッドは新しい配列を返し、元の配列は変更されません。

Arrayクラスのconcat()メソッドの基本的な使い方

1つの配列を結合

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

console.log(newArray); // 出力: [1, 2, 3, 4, 5, 6]
console.log(array1); // 出力: [1, 2, 3] (元の配列は変更されない)

複数の配列を結合

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

console.log(newArray); // 出力: [1, 2, 3, 4, 5, 6, 7, 8, 9]

値を追加

const array = [1, 2, 3];
const newArray = array.concat(4, 5, 6);

console.log(newArray); // 出力: [1, 2, 3, 4, 5, 6]

ネストされた配列の結合

concat()メソッドは、ネストされた配列をフラットにしません。ネストされた配列もそのまま結合されます。

const array1 = [1, 2, 3];
const nestedArray = [4, [5, 6]];
const newArray = array1.concat(nestedArray);

console.log(newArray); // 出力: [1, 2, 3, 4, [5, 6]]

オブジェクトの結合

配列だけでなく、オブジェクトも結合することができますが、注意が必要です。オブジェクトは参照渡しされるため、結合後の配列内のオブジェクトを変更すると、元のオブジェクトにも影響を与えます。

const array = [{ a: 1 }, { b: 2 }];
const newArray = array.concat({ c: 3 });

newArray[0].a = 99;

console.log(array); // 出力: [{ a: 99 }, { b: 2 }]
console.log(newArray); // 出力: [{ a: 99 }, { b: 2 }, { c: 3 }]

結合のパフォーマンス

配列が大きくなると、concat()メソッドのパフォーマンスに注意が必要です。結合操作が多い場合は、他の方法を検討することも考えましょう。例えば、スプレッド構文を使用する方法があります。

スプレッド構文を使用した例

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

console.log(newArray); // 出力: [1, 2, 3, 4, 5, 6]

まとめ

concat()メソッドは、JavaScriptで配列を結合するための基本的かつ重要なメソッドです。配列や値を簡単に結合することができ、元の配列を変更しないため安全に使用できます。しかし、大量のデータを扱う場合はパフォーマンスに注意し、場合によってはスプレッド構文など他の手法も検討することが重要です。

この記事を通じて、concat()メソッドの基本的な使い方から応用例まで理解していただけたでしょうか。ぜひ、実際のコーディングで活用してみてください。

目次