JavaScript配列のconcat()関数：配列または配列と値の結合

定義と使用方

配列のconcat()関数は、
1つ以上の配列または値を渡された順に結合（concatenate、鎖のようにつなぐ）して、新しい配列を作成します。

この関数は、複数の配列を1つにまとめたり、配列と値を一緒に連結するときに便利です。

特徴

複数の配列を任意の順番でつなげて結合することができます。
配列に1つ以上の値を順番に追加することができます。
元の配列は変更されず、結合結果を含む新しい配列が返されます。
各配列の要素は渡された順番に連結され、結合された新しい配列が作成されます。

基本の例

JavaScript

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

// 2つの配列を結合（連結）する
const twoConcatarray = array1.concat(array2);
console.log(twoConcatarray); // 出力: [1, 2, 3, 4, 5, 6]

// 3つの配列を結合（連結）する
const array3 = [6, 7, 8];
const threeConcatarray = array1.concat(array2, array3);
console.log(threeConcatarray); // 出力: [1, 2, 3, 4, 5, 6, 6, 7, 8]

// 配列と1つ以上の値を結合（連結）する
const arrayWithValues = array1.concat(9, 10, 11);
console.log(arrayWithValues); // 出力: [1, 2, 3, 9, 10, 11]

構文

arrは、concat()関数を適用する配列です。

パラメーター

concat()関数のパラメーターの説明
`value1`, `valueN`	新しい配列として連結する配列および／または値です。配列に連結する1つ以上の配列および／または値を指定できます。

戻り値

引数として指定された配列を順番に1つずつ連結し、新しい1つのArrayオブジェクトとして返します。

例

例を使って見てみましょう。

2つの配列を連結する

JavaScript

// 2つの配列を作成します。
const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];

// concat()関数を使って2つの配列を結合します。
const concatenatedArray = arr1.concat(arr2);
console.log(concatenatedArray); // 出力: [1, 2, 3, 3, 4, 5]

3つの配列を連結する

JavaScript

// 3つの配列を作成します。
const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];
const arr3 = [7, 8, 9];

// concat()関数を使って3つの配列を結合します。
const concatenatedArray = arr1.concat(arr2, arr3);
console.log(concatenatedArray); // 出力: [1, 2, 3, 3, 4, 5, 7, 8, 9]

値を配列に連結する

JavaScript

// concat()関数を適用する配列を作成します。
const arr1 = ["a", "b", "c"];

// concat()関数を使って配列に値を結合します。
const concatenatedArray = arr1.concat(1);
console.log(concatenatedArray); // 出力: ['a', 'b', 'c', 1]

2つの配列を連結して重複要素を削除する

concat()関数は配列の要素をそのまま連結するため、重複が発生する場合があります。重複を削除するには、次のような方法を使用できます。

Set()オブジェクトを使用する
filter()関数を使用する

`Set()`オブジェクトを使用する

Set()オブジェクトは、重複しない要素のみを保存できるコレクションです。concat()関数で結合した配列をSet()オブジェクトに格納し、その後スプレッド（...）構文を使って再び配列に変換します。

JavaScript

// 2つの配列を作成します。
const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];

// concat()関数を使って2つの配列を結合します。
const concatenatedArray = arr1.concat(arr2);

// 重複した要素を削除するためにSetを使用します。
// スプレッド（...）構文を使って配列に変換します。
const uniqueArray = [...new Set(concatenatedArray)];
console.log(uniqueArray); // 出力: [1, 2, 3, 4, 5]

`filter()`関数を使用する

filter()関数を使用して、concat()関数で結合した配列の要素を1つずつ確認し、重複する要素を削除します。

JavaScript

// 2つの配列を作成します。
const arr1 = [1, 2, 3];
const arr2 = [3, 4, 5];

// concat()関数を使って2つの配列を結合します。
const concatenatedArray = arr1.concat(arr2);

// filter()関数を使って重複した要素を削除します。
const uniqueArray = concatenatedArray.filter((item, index) => {
    return concatenatedArray.indexOf(item) === index;
});

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

コード補足説明
配列におけるfilter()関数は、配列の要素を順に走査し、コールバック関数を使って指定した条件に従って要素をフィルタリングする関数です。フィルタリングされた配列を返します。

コード補足説明
配列におけるindexOf()関数は、引数として渡された要素を配列の中から検索し、最初に見つかった（出現した）要素のインデックスを返す関数です。