目次
concatメソッドとは？
concatメソッドは、JavaScriptで配列同士を結合し、新しい配列を作成するためのメソッドです。このメソッドは元の配列を変更せず、結合された新しい配列を返すという特徴があります。
concatメソッドの基本的な使い方
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
// 配列を結合
const combinedArray = array1.concat(array2);
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]
この例では、array1とarray2を結合し、新しい配列combinedArrayが作成されています。元のarray1とarray2は変更されません。
複数の配列を結合する
concatメソッドを使えば、2つ以上の配列を一度に結合することも可能です。
複数の配列を結合する例
const array1 = ["apple", "banana"];
const array2 = ["cherry", "date"];
const array3 = ["elderberry", "fig"];
// 3つの配列を結合
const combinedArray = array1.concat(array2, array3);
console.log(combinedArray); // ["apple", "banana", "cherry", "date", "elderberry", "fig"]
この例では、3つの配列array1、array2、array3をまとめて結合し、新しい配列を作成しています。
concatメソッドで配列以外の値を結合する
concatメソッドは、配列だけでなく、単一の値やオブジェクトなども配列に追加して結合することができます。
配列と単一の値を結合する例
const array1 = [1, 2, 3];
const value = 4;
// 配列と単一の値を結合
const combinedArray = array1.concat(value);
console.log(combinedArray); // [1, 2, 3, 4]
この例では、配列array1に数値4を追加して新しい配列が作成されています。
concatメソッドの特徴
concatメソッドの主な特徴は、元の配列を変更せず、新しい配列を返すことです。これは不変性を保ちつつ、既存の配列に影響を与えずにデータを操作したい場合に非常に便利です。
元の配列が変更されない例
const array1 = ["apple", "banana"];
const array2 = ["cherry"];
// 配列を結合
const combinedArray = array1.concat(array2);
console.log(array1); // ["apple", "banana"]
console.log(combinedArray); // ["apple", "banana", "cherry"]
この例では、array1は結合後も変更されておらず、結合された結果が新しい配列combinedArrayとして返されています。
concatメソッドと他のメソッドの違い
配列を結合する際に使用される他のメソッドとの違いを以下の表でまとめました。
| メソッド | 動作 | 元の配列に影響 | 返り値 |
|---|---|---|---|
concat |
配列や値を結合する | 影響なし | 結合された新しい配列 |
push |
要素を配列の末尾に追加する | 影響あり | 新しい長さを返す |
splice |
配列に要素を追加/削除する | 影響あり | 追加/削除後の配列 |
まとめ
concatメソッドは、配列同士を結合したり、配列に単一の値を追加したりする際に便利です。元の配列に影響を与えないため、不変性を保ちながらデータを操作でき、複数の配列を一度に結合することも可能です。