この記事ではJavaScriptの配列を結合するメソッド『concatメソッド』について、以下の内容をサンプルコードを用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。
concatメソッドとはconcatメソッドの構文concatメソッドの使い方- 配列を結合する
- 複数の配列を結合する
- 配列と値を結合する
- 複数の文字列を結合する
- 配列を完全コピーする
concatメソッドの特徴- オリジナルの配列は変更しない
- ネストされた配列をフラットにしない
Symbol.isConcatSpreadableが真値の時はオブジェクトを配列として扱う- 元の配列のいずれかが疎配列の場合、結果の配列も疎配列になる
concatメソッドとは
concatメソッドは、元の配列に新しい配列や値を追加して新しい配列を作成するメソッドです。なお、concatメソッドは元の配列は変更せず、結合された新しい配列を返します。
後ほどconcatメソッドの構文や使い方について詳しく説明しますが、まず以下に示す簡単なサンプルコードを見てみましょう。
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const result = array1.concat(array2);
console.log(result); // [1, 2, 3, 4, 5, 6]
console.log(array1); // [1, 2, 3] ← 元の配列は変更しない!!このサンプルコードでは、array1とarray2を結合して新しい配列resultを作成しています。なお、元の配列array1は変更されません。
concatメソッドの構文
concatメソッドの構文を以下に示します。
concatメソッドの構文
array.concat(value1[, value2[, ...[, valueN]]])arrayは元の配列です。concatメソッドの引数と返り値を以下に示します。
引数
value1, value2, …, valueN- 結合する配列や値です。
返り値(戻り値)
concatメソッドは結合された新しい配列を返します。
concatメソッドの使い方
concatメソッドについて、以下に示している使い方をこれから説明します。
- 配列を結合する
- 複数の配列を結合する
- 配列と値を結合する
- 複数の文字列を結合する
- 配列を完全コピーする
上記の使い方について順番に説明します。
配列を結合する
concatメソッドを使うと、元の配列に他の配列を結合することができます。
以下のサンプルコードでは、配列array1と配列array2を結合して新しい配列resultを作成しています。
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const result = array1.concat(array2);
console.log(result); // [1, 2, 3, 4, 5, 6]複数の配列を結合する
concatメソッドは、複数の配列を一度に結合することもできます。
以下のサンプルコードでは、配列array1、配列array2、配列array3を一度に結合して新しい配列resultを作成しています。
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];
const result = array1.concat(array2, array3);
console.log(result); // [1, 2, 3, 4, 5, 6, 7, 8, 9]配列と値を結合する
concatメソッドは、元の配列に値を結合することもできます。
以下のサンプルコードでは、配列arrayに値4, 5, 6を追加して新しい配列resultを作成しています。
const array = [1, 2, 3];
const result = array.concat(4, 5, 6);
console.log(result); // [1, 2, 3, 4, 5, 6]複数の文字列を結合する
concatメソッドは一般的な文字列を複数結合することも可能です。
以下のサンプルコードでは、str1とstr2を結合して、新しい文字列resultを作成しています。resultには、'Hello World!'が出力されます。
const str1 = 'Hello';
const str2 = 'World';
const result = str1.concat(' ', str2, '!');
console.log(result); // Hello World!配列を完全コピーする
配列をコピーするとき、concatメソッドを使用することで問題を簡単に解決できます。concatメソッドは引数が省略された場合、concatメソッドは呼び出された元の配列のシャローコピーを返します。
以下のサンプルコードでは、array1をconcatメソッドを使ってarray2にコピーしています。array2に値を追加しても、array1は変更されず、新しい配列array2にのみ変更が反映されていることが分かります。
const array1 = [1, 2, 3, 4, 5];
const array2 = array1.concat();
array2.push(6);
console.log(array1); // [1, 2, 3, 4, 5]
console.log(array2); // [1, 2, 3, 4, 5, 6]以下のサンプルコードではarray2に値を追加した場合、array1も変更されてしまうので注意してください。これは、JavaScriptでは配列が「参照渡し」されるからです。
const array1 = [1, 2, 3, 4, 5];
const array2 = array1;
array2.push(6);
console.log(array1); // [1, 2, 3, 4, 5, 6]
console.log(array2); // [1, 2, 3, 4, 5, 6]concatメソッドの特徴
concatメソッドの特徴を以下に示します。
- オリジナルの配列は変更しない
- ネストされた配列をフラットにしない
Symbol.isConcatSpreadableが真値の時はオブジェクトを配列として扱う- 元の配列のいずれかが疎配列の場合、結果の配列も疎配列になる
各特長について順番に説明します。
オリジナルの配列は変更しない
concatメソッドは元の配列を変更しません。新しい配列が返されるため、元の配列はそのままです。
以下のサンプルコードから分かるように。配列arrayは変更されず、新しい配列resultが返されます。
const array = [1, 2, 3];
const result = array.concat([4, 5, 6]);
console.log(array); // [1, 2, 3]
console.log(result); // [1, 2, 3, 4, 5, 6]ネストされた配列をフラットにしない
concatメソッドはネストされた配列をフラットにしません。ネストされた配列はそのまま結合されます。
以下のサンプルコードでは、配列array1と配列array2を結合して新しい配列resultを作成していますが、配列array2のネストされた配列[4, 5]がそのまま結合されています。
const array1 = [1, 2, 3];
const array2 = [[4, 5], 6];
const result = array1.concat(array2);
console.log(result); // [1, 2, 3, [4, 5], 6]Symbol.isConcatSpreadableが真値の時はオブジェクトを配列として扱う
concatメソッドは、既定ではすべての配列風オブジェクトを配列として扱いませんが、Symbol.isConcatSpreadableが真値（trueなど）に設定された場合のみ、配列として扱います。
以下のサンプルコードでは、obj1は配列風オブジェクトですが、Symbol.isConcatSpreadableが設定されていないため、オブジェクト全体が配列に追加されています。一方、obj2はSymbol.isConcatSpreadableがtrueに設定されているため、配列として扱われ、その要素が配列に追加されています。
const obj1 = { 0: 1, 1: 2, 2: 3, length: 3 };
const obj2 = { 0: 1, 1: 2, 2: 3, length: 3, [Symbol.isConcatSpreadable]: true };
console.log([0].concat(obj1, obj2));
// [ 0, { '0': 1, '1': 2, '2': 3, length: 3 }, 1, 2, 3 ]元の配列のいずれかが疎配列の場合、結果の配列も疎配列になる
元の配列のいずれかが疎配列（スパース配列）の場合、結果の配列も疎配列になります。
以下のサンプルコードでは、疎配列を結合した結果も疎配列となっています。空のスロットはそのまま保持されます。
console.log([1, , 3].concat([4, 5])); // [1, empty, 3, 4, 5]
console.log([1, 2].concat([3, , 5])); // [1, 2, 3, empty, 5]本記事のまとめ
この記事ではJavaScriptの配列を結合するメソッド『concatメソッド』について、以下の内容を説明しました。
concatメソッドとはconcatメソッドの構文concatメソッドの使い方- 配列を結合する
- 複数の配列を結合する
- 配列と値を結合する
- 複数の文字列を結合する
- 配列を完全コピーする
concatメソッドの特徴- オリジナルの配列は変更しない
- ネストされた配列をフラットにしない
Symbol.isConcatSpreadableが真値の時はオブジェクトを配列として扱う- 元の配列のいずれかが疎配列の場合、結果の配列も疎配列になる
お読み頂きありがとうございました。