concatでの配列結合 | 配列の並び替えと結合 | JavaScript 超完全入門 基本から発展までのすべて

amazon

スマイルSALE

--:--:--

～

検索

ad. 価格範囲を指定して商品を探せます

concatメソッドとは？

concat()メソッドは、JavaScriptで配列や値を結合し、新しい配列を作成するためのメソッドです。

最大の特徴は、元の配列を変更しないことです。結合した結果は新しい配列として返されるため、安全に配列を操作できます。

現在ではスプレッド構文（...）を使用することも多くなっていますが、concat()も現在でも利用できる標準的なメソッドです。

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を結合し、新しい配列を作成しています。

1. array1.concat(array2)を実行します。
2. 2つの配列を結合した新しい配列が作成されます。
3. 元のarray1とarray2は変更されません。

複数の配列を結合する

concat()には複数の引数を指定できるため、一度に複数の配列を結合できます。

複数の配列を結合する例

const array1 = ["apple", "banana"];
const array2 = ["cherry", "date"];
const array3 = ["elderberry", "fig"];

const combinedArray = array1.concat(array2, array3);

console.log(combinedArray);
// ["apple", "banana", "cherry", "date", "elderberry", "fig"]

このように、3つ以上の配列もまとめて結合できます。

配列以外の値を結合する

concat()は配列だけでなく、数値や文字列、オブジェクトなどの値も追加できます。

配列と単一の値を結合する例

const array1 = [1, 2, 3];
const value = 4;

const combinedArray = array1.concat(value);

console.log(combinedArray);
// [1, 2, 3, 4]

引数が配列でなければ、その値が配列の末尾へ追加されます。

複数の値を追加する例

const numbers = [1, 2];

const result = numbers.concat(3, 4, 5);

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

元の配列は変更されない

concat()は元の配列を書き換えず、新しい配列を返します。

元の配列が変更されない例

const array1 = ["apple", "banana"];
const array2 = ["cherry"];

const combinedArray = array1.concat(array2);

console.log(array1);
// ["apple", "banana"]

console.log(combinedArray);
// ["apple", "banana", "cherry"]

元の配列を残したまま新しい配列を作成したい場合に便利です。

スプレッド構文との比較

現在では、配列を結合する際にスプレッド構文を利用することもよくあります。

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

const result = [...array1, ...array2];

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

スプレッド構文は簡潔に記述できるため、ES6以降ではこちらが使われる場面も多くあります。

一方、concat()も読みやすく、古いコードでもよく使用されているため、どちらの書き方も理解しておくと役立ちます。

concat()メソッドと他のメソッドの違い

初心者が知っておきたいポイント

• concat()は元の配列を書き換えない。
• 複数の配列や値を一度に結合できる。
• 配列以外の値も追加できる。
• 現在ではスプレッド構文で同様の処理を書くことも多い。
• 元の配列を変更したい場合はpush()などを利用する。

まとめ

• concat()は配列や値を結合して新しい配列を作成するメソッドである。
• 元の配列は変更されないため、安全に配列を操作できる。
• 複数の配列や複数の値を一度に結合できる。
• スプレッド構文でも同様の処理を記述できる。
• 配列を変更したくない場合にはconcat()が適している。