JavaScript 配列 concat: 配列を結合する

概要: このチュートリアルでは、JavaScript 配列の concat() メソッドを使用して、2つ以上の配列を1つの配列に結合する方法を学びます。

2つ以上の配列を結合するには、Array オブジェクトの concat() メソッドを使用します。concat() メソッドは新しい配列を返し、元の配列は変更しません。例えば、

let odds = [1,3,5];
let evens = [2,4,6];
// merge odds and evens array
let combined = odds.concat(evens);

console.log('Result:', combined);
console.log('Odds:', odds);Code language: JavaScript (javascript)

出力

Result: [ 1, 3, 5, 2, 4, 6 ]
Odds: [ 1, 3, 5 ]Code language: CSS (css)

この例では、odds と evens という2つの配列があります。odds 配列の concat() メソッドを呼び出して、2つの配列の要素を結合します。2番目の配列の要素は、最初の配列の要素の末尾に追加されます。

同様に、空の配列（[]）に対して concat() メソッドを呼び出すことができます。

let odds = [1,3,5];
let evens = [2,4,6];
// merge odds and evens array
let combined = [].concat(odds, evens);

console.log(combined);Code language: JavaScript (javascript)

出力

[ 1, 3, 5, 2, 4, 6 ]Code language: JSON / JSON with Comments (json)

concat() メソッドを使用すると、次の例に示すように、3つ以上の配列を結合できます。

let upper  = ['A','B','C'];
let lower  = ['a','b','c'];
let digits = [1,2,3];
let alphanumerics = upper.concat(lower, digits);Code language: JavaScript (javascript)

出力

['A', 'B', 'C', 'a',  'b', 'c', 1,   2,  3]Code language: JSON / JSON with Comments (json)

この例では、upper、lower、digits という3つの配列を結合します。

concat() メソッドに引数を渡さない場合、単に配列をクローンし、それを返します。

let colors = ['red','green','blue'];
let rgb = colors.concat();
console.log(rgb);Code language: JavaScript (javascript)

出力

[ 'red', 'green', 'blue' ]Code language: JSON / JSON with Comments (json)

配列ではない値を concat() メソッドに渡すと、メソッドはそれぞれの値を結果の配列の末尾に追加します。

let rgb = ['red','green','blue'];
let moreColors = rgb.concat('yellow','magento');
console.log(moreColors);Code language: JavaScript (javascript)

出力

[ 'red', 'green', 'blue', 'yellow', 'magento' ]Code language: JSON / JSON with Comments (json)

ES6 では、スプレッド演算子を使用して、次のように複数の配列を結合できます。

let odds = [1,3,5];
let evens = [2,4,6];
let combined = [...odds, ...evens];
console.log(combined);Code language: JavaScript (javascript)

出力

[ 1, 3, 5, 2, 4, 6 ]Code language: JSON / JSON with Comments (json)

このチュートリアルでは、JavaScript 配列の concat() メソッドとスプレッド演算子を使用して、複数の配列を1つの配列に結合する2つの方法を学びました。