合并数组用 concat 还是 扩展运算符比较好？

Question

let arr1 = [1, 2];
let arr2 = [3, 4];
// concat
arr1 = arr1.concat(arr2);
// 扩展运算符
arr1 = [...arr1, ...arr2];
// 或者
arr1.push(...arr2);

哪种更好，为什么？性能？

Answer 1

究竟用哪种还是得根据你实际需求来的

concat是es5时就有的，优点是兼容性高，不需要转译
...是es6新出的语法，简化了写法，代码看上去更简洁直观，但实际只是做了封装，底层还是用的原来的方法，如下为babel转译的结果

第二种写法

arr1 = [...arr1, ...arr2];
  ↓ 相当于
function _toConsumableArray(arr) {
 if (Array.isArray(arr)) { 
   for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; 
   } else { return Array.from(arr); }
}
arr1 = [].concat(_toConsumableArray(arr1), arr2);

第三种写法

arr1.push(...arr2);
  ↓ 相当于
arr1.push.apply(arr1, arr2);

再来看三种写法处理不同数据量的时间(数据分别为1,10,100) 单位:万

num:10000
 s1: 0.01813671875ms
 s2: 0.1808984375ms
 s3: 0.078857421875ms

num:100000
 s1: 0.8310546875ms
 s2: 10.428955078125ms
 s3: 8.025146484375ms

num:1000000
s1: 11.42724609375ms
s2: 83.867919921875ms
s3: Maximum call stack size exceeded

总结:
concat性能最优
在数据量极小时三者差异并不大
在数据有一定量时concat性能遥遥领先于 arr1 = [...arr1, ...arr2] 和 arr1.push(...arr2)
在数据过大时第三种方法会因为apply的特点由于数据量过大导致堆栈溢出

Answer 2

先看下你说的这三种方式的差别：

这个差别的话存在俩中环境中：

• 第一种，你的实际使用环境还是es5的环境，那么你转一下看看babel怎么处理的；

你用babel转成es5看看扩展运算符

[...arr1, ...arr2] ==> [].concat(arr1, arr2)

arr1.push(...arr2) ==> arr1.push.apply(arr1, arr2)

这种差别的情况下可以看到，
好处：扩展运算符看起来更直观，可读性更好，调用的api更少，简洁。
性能：可能需要你做一下评估，我没做这个，

• 第二种： 你的实际使用环境已经支持了扩展运算符，就是说原生实现了这个操作符，那么

好处： 大家都用这个，提升你在其他前端心中的形象，你是一个与时俱进的人，不会被淘汰。。。
性能： 找支持这个语法的环境去测一下，比如node环境

另外说一下，性能的话，你也可以通过一些常用的比较方法来判断。
比如可以通过对一个数组连接10000万个元素看看不同方式花费的时间，去评估一下；
这个事情你自己可以做一下。

Answer 3

第二种写法创建了个新数组，（无论js引擎如何优化扩展运算符）性能肯定会差
第三种写法因为push是递归的，所以性能也差（数据太多还会报错）