JavaScript数组合并的几种方式

JavaScript用四种方式实现两个数组的合并

1. 循环遍历（本例只用forEach和for...of）
2. 扩展运算符
3. contact
4. apply

push()的定义和用法：push() 方法可向数组的末尾添加一个或多个元素，并返回新的 【长度】。

var array1 = [1,2,3,4];

var array2 = ["apple","orange","banana","pear"];

描述：将两个已知数组array1和array2，合并成为一个新的数组。

目标：得到一个新的数组[1,2,3,4,"apple","orange","banana","pear"];

（注意：以下demo每部分的代码都是独立的，所有的array1和array2的值都是原始数据 ）

 直接用push(不成功)

// 如果在输入后面添加一个元素，直接push就可以了，例如给array1追加一个5，

 array1.push(5);

 console.log(array1);//[ 1, 2, 3, 4, 5 ]

//如果要添加一个数组，直接push 得到的不是想要的结果

array1.push(array2)

console.log(array1);//[ 1, 2, 3, 4, [ 'apple', 'orange', 'banana', 'pear' ] ]

下面细说几种合并能合并成功的方式 。

 1、循环合并

//循环合并
//forEach循环
array2.forEach(item=>{
     array1.push(item)
})
console.log(array1);//[ 1, 2, 3, 4, 'apple', 'orange', 'banana', 'pear' ]

//for...of 循环
 for(var item of array2){
     array1.push(item);
 }
 console.log(array1);//[ 1, 2, 3, 4, 'apple', 'orange', 'banana', 'pear' ]

2、 用扩展运算符...来实现

//先看下...的使用规则

console.log(array2);//[ 'apple', 'orange', 'banana', 'pear' ]
console.log(...array2);//apple orange banana pear

//看push的定义，只能添加一个或者多个元素，所以我们可以把需要添加的数组用...展开

array1.push(...array2)//实现代码

console.log(array1.length)//8
console.log(array1)//[ 1, 2, 3, 4, 'apple', 'orange', 'banana', 'pear' ]

3、用contact

定义和用法：concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

语法：arrayObject.concat(arrayX,arrayX,......,arrayX)

var array3 = array1.concat(array2);
console.log(array1);//[1,2,3,4]证明不会改变原数组
console.log(array3);//[ 1, 2, 3, 4, 'apple', 'orange', 'banana', 'pear' ]

4、apply

Array.prototype.push.apply(array1,array2);
console.log(array1)//[ 1, 2, 3, 4, 'apple', 'orange', 'banana', 'pear' ]