js数组拼接方式

发表于 阅读次数： 本文字数： 1.3k 阅读时长 ≈ 1 分钟
前言

最近在前端项目上遇到要拼接数组，最简单直接的肯定是遍历，一个个push进去，但是这个不太优雅，所以总结了下js所有拼接数组的方式

for循环
1
2
3
4
5
6
7
8
9
10
11
12
13
function gabungArray(arrayAwal, arrayTambah) {  

     for(let i = 0; i < arrayTambah.length; i++) {
            arrayAwal.push(arrayTambah[i]);
     }      return arrayAwal;
}
var array1 = [1,2,3,4,5];
var array2= [6,7,8,9,10];
var array3 = [];
console.log(gabungArray(array1, array3));
// [ 1, 2, 3, 4, 5 ]
console.log(gabungArray(array2, array1));
// [ 1, 2, 3, 4,  5, 6, 7, 8, 9, 10]
concat函数(推荐)

concat() 方法用于将两个或多个数组合并为一个，与以前不同。 concat 不会改变数组的值，而是将其存储在 new array 中。

1
2
3
4
5
6
7
8
9
var array1 = [1,2,3,4,5];
var array2 = [6,7,8,9,10];
var array3 = array1.concat(array2);
// atau
var array4 = [].concat(array1, array2);
console.log(array3)
// [ 1, 2, 3, 4,  5, 6, 7, 8, 9, 10]
console.log(array4)
// [ 1, 2, 3, 4,  5, 6, 7, 8, 9, 10]
Reduce函数

Reduce() 方法通过将值从目标数组元素移动到新数组来工作。 所以它变成了一个值。

1
2
3
4
5
6
7
8
var array1 = [1, 2, 3, 4, 5];
var array2 = [6, 7, 8, 9, 10];
var array3 = array2.reduce((newArray, item) => {
   newArray.push(item);
   return newArray;
}, array1);
console.log(array3);
// [ 1, 2, 3, 4,  5, 6, 7, 8, 9, 10]
展开运算符(推荐)

这种方法是最好的方法，在我看来，使用扩展运算符，迭代过程会立即在要链接的数组中运行。 使代码更加简洁

1
2
3
4
5
var array1 = [1,2,3,4,5];
var array2 = [6,7,8,9,10];
var array3 = [...array1, ...array2];
console log(array3); 
// [1,2,3,4,5,6,7,8,9,10];
总结

concat是es5的写法，兼容性好，扩展运算符是es6新出的语法，数据量较小时（万级别的数量），差别不大，数据量较大时（十万级以上），concat性能较好！

一般前端不会有拼接几万几十万数据的需求，所以看自己喜好用即可，但如果真有，建议还是用concat，虽然差别也是毫秒级的，但是总归是有差别