【JavaScript入門】配列をMergeする方法 | concat・スプレッド構文

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、JavaScriptで、配列をMergeする方法について解説して行きます。

前回、配列をCopyする方法を解説したので、気になる方はそちらもCheckしてください。

【JavaScript入門】配列をCopyする方法 | concat・slice・スプレッド構文

配列をCopyする方法

1 Array.prototype.concat()で配列に値をMergeする
2 スプレッド構文(Spread-Syntax)で配列に値をMergeする
3 JavaScript書籍 Ver. 中級-上級者向け
4 JavaScript書籍 Ver. 初級者向け
5 参考・引用
6 最近の投稿

Array.prototype.concat()で配列に値をMergeする

concatメソッドは、2つ以上の配列を結合するために使用します。

「既存のArray.concat(Mergeする値) 」で配列に値をMergeすることができます。

// < concat()-Merge >
const robotamaArray = ['ロボ・ボール', 'ロボ玉', 'ロボ玉試作1号機'];

// 1. 配列に1つの値をMergeする
const copyRobotamaArray = robotamaArray.concat('ロボ玉試作2号機');

console.log({robotamaArray}); 
// robotamaArray: (3) ['ロボ・ボール', 'ロボ玉', 'ロボ玉試作1号機']

console.log({copyRobotamaArray}); 
// copyRoboList: (4) ['ロボ・ボール', 'ロボ玉', 'ロボ玉試作1号機', 'ロボ玉試作2号機']

const cats = ['ももちゃん', '白桃'];

// 2. 配列と配列をMergeする
const hamAndCats = robotamaArray.concat(cats);

console.log({hamAndCats});
// hamAndCats: (5) ['ロボ・ボール', 'ロボ玉', 'ロボ玉試作1号機', 'ももちゃん', '白桃']

スプレッド構文(Spread-Syntax)で配列に値をMergeする

「スプレッド構文」(Spread-Syntax)は、ArrayやObjectを展開するのに使える構文です。

「 … 」の後にArrayやObjectを記述することで、その中身を展開します。

展開した後の値と並列に値を用意して、それを配列で包めば、配列をMergeすることができます。

// < Spread-Syntax(スプレッド構文)-Merge >
const devRoboList = ['ロボ・ボール', 'ロボ玉', 'ロボ玉試作1号機'];

// 1. 配列に1つの値をMergeする
const copyRoboList = [...devRoboList, 'ロボ玉試作2号機'];

console.log({devRoboList}); 
// devRoboList: (3) ['ロボ・ボール', 'ロボ玉', 'ロボ玉試作1号機']

console.log({copyRoboList}); 
// copyRobotamaArray: (4) ['ロボ・ボール', 'ロボ玉', 'ロボ玉試作1号機', 'ロボ玉試作2号機']


const catList = ['ももちゃん', '白桃'];

// 2. 配列と配列をMergeする
const hamAndCatList = [...devRoboList, ...catList];

console.log({hamAndCatList});
// hamAndCatList: (5) ['ロボ・ボール', 'ロボ玉', 'ロボ玉試作1号機', 'ももちゃん', '白桃']