前端面试：js数组合并的方法

面试原题是，将新数组加到旧数组后面，有哪些方法？

1、concat( )

返回拼接后的数组，不改变原数组，它不是直接附加到现有数组上，而是返回一个新数组，并把这个数组赋值给arr1才能达到目的。

 var arr1 = [0, 1, 2];
 var arr2 = [5, 6, 7];
 arr1 = arr1.concat(arr2)
 console.log(arr1);   // [0,1,2,5,6,7]

2、forEach

官方描述是，forEach()被调用时，不会改变原数组，也就是调用它的数组(尽管callback 函数在被调用时可能会改变原数组)。
(译注: 此处说法可能不够明确，具体可参考EMCA语言规范: ’ forEach does not directly mutate the object on which it is called but the object may be mutated by the calls to callbackfn’， 即forEach不会直接改变调用它的对象，但是那个对象可能会被callback 函数改变。)

var arr1 = [0, 1, 2];
let arr = [];
arr1.forEach((value) => arr.push(value));
arr.push(88);   // 添加新项以证明不会修改原始数组
console.log(arr);   // [0, 1, 2，88]
console.log(arr1);   // [0, 1, 2]

那么哪些情况下使用forEach会改变原数组呢？要满足两个条件

1、你要操作的那些数组元素是一个引用类型的数据，即可能是数组、对象、函数（函数是引用类型）。

2、forEach里的回调函数对引用类型的数组元素的属性有修改操作。

上面两条总结一下就是，还是上面的例子，你是直接修改整个元素，而不是修改该元素的某个属性，那么原数组也不会被改变。

看以下例子：

var people = [{ name: "金角" }, { name: "银角" }, { name: "八戒" }];
people.forEach((item) => {
    item = { name: "我" };
});
console.log(people);   // [{name: "金角"}, {name: "银角"}, {name: "八戒"}]

这里涉及到深拷贝和浅拷贝，后面再慢说。

3、map

var arr1 = [0, 1, 2];
var arr = arr1.map( num => num);
arr.push(3);   // 添加新项以证明不会修改原始数组
console.log(arr);   // [0, 1, 2, 3]
console.log(arr1);   // [0, 1, 2]

4、经典的apply

var arr1 = [0, 1, 2];
var arr2 = [];
Array.prototype.push.apply(arr2, arr1);
arr2.push(4)
console.log(arr2);   //[0, 1, 2, 4]
console.log(arr1);   //[0, 1, 2]

5、for循环

var arr1 = [0, 1, 2, 3];
var arr2 = [];
for(var i = 0; i < arr1.length; i++){
    arr2.push(arr1[i]);
}
arr2.push(4)   // 添加新项以证明不会修改原始数组
console.log(arr2);   //[0, 1, 2, 3, 4]
console.log(arr1);   //[0, 1, 2, 3]

6、slice

var arr1 = [0, 1, 2, 3];
var arr2 = arr1.slice();
arr2.push(4)
console.log(arr2);   //[0, 1, 2, 3, 4]
console.log(arr1);   //[0, 1, 2, 3]

7、from

var arr1 = [0, 1, 2, 3];
var arr2 = Array.from(new Set(arr1));
arr2.push(4)
console.log(arr2);   //[0, 1, 2, 3, 4]
console.log(arr1);   //[0, 1, 2, 3]

8、扩展运算符[…]

var arr1 = [0, 1, 2, 3];
var arr2 = [...arr1];
arr2.push(4)
console.log(arr2);   //[0, 1, 2, 3, 4]
console.log(arr1);   //[0, 1, 2, 3]

9、Array.of 和扩展运算符[…]

var arr1 = [0, 1, 2, 3];
var arr2 = Array.of(...arr1);
arr2.push(4)
console.log(arr2);   //[0, 1, 2, 3, 4]
console.log(arr1);   //[0, 1, 2, 3]

10、Array构造函数和扩展运算符[…]

var arr1 = [0, 1, 2, 3];
var arr2 = new Array(...arr1);
arr2.push(4)
console.log(arr2);   //[0, 1, 2, 3, 4]
console.log(arr1);   //[0, 1, 2, 3]

11、使用解构

var arr1 = [0, 1, 2, 3];
var [...arr2] = arr1;
arr2.push(4)
console.log(arr2);   //[0, 1, 2, 3, 4]
console.log(arr1);   //[0, 1, 2, 3]

12、push

var arr1 = [0, 1, 2, 3];
var arr2 = [];
arr2.push(...arr1);
arr2.push(4);
console.log(arr2);   //[0, 1, 2, 3, 4]
console.log(arr1);   //[0, 1, 2, 3]

13、unshift

var arr1 = [0, 1, 2, 3];
var arr2 = [];
arr2.unshift(...arr1);
arr2.push(4);
console.log(arr2);   //[0, 1, 2, 3, 4]
console.log(arr1);   //[0, 1, 2, 3]

14、reduce

var arr1 = [0, 1, 2, 3];
var arr2 = arr1.reduce((acc, x) =>{
    acc.push(x);
    return acc;
},[]);
arr2.push(4);
console.log(arr2);   //[0, 1, 2, 3, 4]
console.log(arr1);   //[0, 1, 2, 3]