複数の配列を連結して新しい配列を生成 - concat

《初回公開：2023/10/19 , 最終更新：未》

concatメソッドは複数の配列を連結して新しい配列を生成する。
新しい配列は元の配列のシャローコピー。

構文: array.concat(value1, value2, ..., valueN)
引数 value1, value2, ..., valueN: 連結する値。任意の数の引数を指定できる。
連結する値は必ずしも配列でなくてもよい。
戻り値: arrayとvalue1, value2, ..., valueNを連結した新しい配列。

例

const array = ["a", "b", "c"];
const array1 = ["d", "e", "f"];

// 配列に配列を連結
var result = array.concat(array1);
console.log(JSON.stringify(result));    // ["a","b","c","d","e","f"]

// ネストした配列を連結
const nested_array = [[5, 4], ["x", "y"]];

var result = array.concat(nested_array);
console.log(JSON.stringify(result));    // ["a","b","c",[5,4],["x","y"]]

// プリミティブ値とオブジェクトと配列を連結
const n = 10;
const obj = { name: "愚鈍人", age: 99 };

var result = array.concat(array1, n, obj);
console.log(JSON.stringify(result));    // ["a","b","c","d","e","f",10,{"name":"愚鈍人","age":99}]


// 新しい配列の要素のプロパティを変更
result[7].name = "xxx";

// シャローコピーなので元の配列の要素も変更される
console.log(JSON.stringify(obj.name));  // "xxx"

// 空の配列を使ってプリミティブ値とオブジェクトを連結
var result = [].concat(n, obj);
console.log(JSON.stringify(result));    // [10,{"name":"xxx","age":99}]

array-like objectをconcatしても配列の連結ではなく、通常のオブジェクトの連結になる。

array-like objectの要素を配列として連結するにはWell-Known Symbolsのひとつ、Symbol.isConcatSpreadableプロパティを追加してその値をtrueに設定する。

// array-like objectを連結
const arrayLikeObj = { 0: "d", 1: "e", 2: "f", length: 3 };

var result = array.concat(arrayLikeObj);
console.log(JSON.stringify(result));    // ["a","b","c",{"0":"d","1":"e","2":"f","length":3}]

// array-like objectにWell-Known SymbolsのひとつSymbol.isConcatSpreadableを定義すると
// 配列として連結される
arrayLikeObj[Symbol.isConcatSpreadable] = true;

var result = array.concat(arrayLikeObj);
console.log(JSON.stringify(result));    // ["a","b","c","d","e","f"]