JavaScriptのconcat()を使ってみる

配列同士を連結して新しい配列を返すconcat()メソッドを使ってみます。

サンプルコード

まずはconcat()メソッドを簡単に試してみます。

JavaScript

var arr1 = ['はるか', 'かなた'];
var arr2 = ['クレア', 'エミリ'];

// 配列の結合
var arr3 = arr1.concat(arr2);
console.log(arr3); // ["はるか", "かなた", "クレア", "エミリ"]

arr1.push('なるみ');
console.log(arr1); // ["はるか", "かなた", "なるみ"]
console.log(arr3); // ["はるか", "かなた", "クレア", "エミリ"]

2つの配列を連結して、新しい配列を生成しました。
8～10行目で試している通り、新しく配列を作成しているので元の配列を変更しても影響されません。
concat()のデモページ

連結する配列は3つ以上でも可能です。

JavaScript

var arr1 = ['はるか', 'かなた'];
var arr2 = ['クレア', 'エミリ'];
var arr3 = ['なるみ', 'あやさ'];

var arr4 = arr1.concat(arr2, arr3);
console.log(arr4); // ["はるか", "かなた", "クレア", "エミリ", "なるみ", "あやさ"]

配列3つを連結するデモページ

連結に文字列を指定した場合、その文字列が要素として追加されます。

JavaScript

var arr1 = ['はるか', 'かなた'];
var str = 'なるみ';

var arr2 = arr1.concat(str);
console.log(arr2); // ["はるか", "かなた", "なるみ"]

文字列を連結するデモページ

最初のデモで試したように新しい配列を作成する形なので、引数を指定しないで参照渡しでない形でのコピーでもよく使われます。

JavaScript

var arr1 = ['はるか', 'かなた'];

var arr2 = arr1.concat();
console.log(arr2); // ["はるか", "かなた"]

arr1.push('なるみ');
console.log(arr1); // ["はるか", "かなた", "なるみ"]
console.log(arr2); // ["はるか", "かなた"]

配列を参照渡しでない形でコピーするデモページ
　

注意点

配列内に配列が入れ子になっている場合、入れ子の配列は参照渡しになります。

JavaScript

var arr1 = [
	['はるか', 'かなた']
];
var arr2 = [
	['クレア', 'エミリ']
];

var arr3 = arr1.concat(arr2);
console.log(arr3); // [["はるか", "かなた"], ["クレア", "エミリ"]]

arr1[0].push('なるみ');
console.log(arr1); // [["はるか", "かなた", "なるみ"]]
console.log(arr3); // [["はるか", "かなた", "なるみ"], ["クレア", "エミリ"]]

配列が入れ子の場合のデモページ

連想配列が入れ子になっている場合も同様です。

JavaScript

var arr1 = [
	{
		name: 'はるか'
	}, {
		name: 'かなた'
	}
];
var arr2 = [
	{
		name: 'クレア'
	}, {
		name: 'エミリ'
	}
];

var arr3 = arr1.concat(arr2);
console.log(arr3); // [{name: 'はるか'}, {name: 'かなた'}, {name: 'クレア'}, {name: 'エミリ'}]

arr1[0]['height'] = 172;
console.log(arr1); // [{name: 'はるか', height: 172}, {name: 'かなた'}]
console.log(arr3); // [{name: 'はるか', height: 172}, {name: 'かなた'}, {name: 'クレア'}, {name: 'エミリ'}]

連想配列が入れ子の場合のデモページ

4つ目のデモで紹介した「参照渡しでない形でのコピー」でも同様で、配列が入れ子になっている場合は参照渡しになります。

JavaScript

var arr1 = [
	['はるか', 'かなた']
];

var arr2 = arr1.concat();
console.log(arr2); // [["はるか", "かなた"]]

arr1[0].push('なるみ');
console.log(arr1); // [["はるか", "かなた", "なるみ"]]
console.log(arr2); // [["はるか", "かなた", "なるみ"]]

配列のコピーで配列が入れ子の場合ののデモページ

連想配列も同様です。

JavaScript

var arr1 = [
	{
		name: 'はるか'
	}, {
		name: 'かなた'
	}
];

var arr2 = arr1.concat();
console.log(arr2); // [{name: 'はるか'}, {name: 'かなた'}]

arr1[0]['height'] = 172;
console.log(arr1); // [{name: 'はるか', height: 172}, {name: 'かなた'}]
console.log(arr2); // [{name: 'はるか', height: 172}, {name: 'かなた'}]

配列のコピーで連想配列が入れ子の場合のデモページ
　

【参考サイト】

• Array.prototype.concat() – JavaScript | MDN