JavaScript数组合并的三种常用方法详解

作者:青柠时间:2026-10-24 14:16:06浏览:88

本文详细讲解JavaScript中合并数组的三种主流方式。涵盖传统的concat方法、ES5中利用apply调用push的技巧,以及ES6推荐的展开运算符。通过对比不同写法在修改原数组及代码简洁度上的差异,帮助开发者根据实际需求选择最佳方案。

使用concat方法合并数组

第一种方法使用concat函数。该方法会创建并返回一个新数组,包含原数组及参数数组的所有元素,不会修改原始数组。


var a = [1,2,3];
var b=[4,5]
a = a.concat(b);
console.log(a);
//此处输出为 [1, 2, 3 ,4 ,5]

ES5中通过apply调用push合并

第二种方法基于ES5标准。通过Array.prototype.apply将第二个数组作为参数传入push函数,从而将arr2的元素追加到arr1中。注意,这种方式会直接修改arr1原数组。


// ES5 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1)//[0,1,2,3,4,5]

ES6展开运算符与push结合

第三种方法采用ES6语法。利用展开运算符(spread operator)将arr2的元素展开后传递给push函数,实现与ES5类似的效果,即修改原数组arr1。


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

ES6展开运算符构建新数组


// ES6 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3=[...arr1, ...arr2]
console.log(arr3)//[0,1,2,3,4,5]

第四种写法同样基于ES6,但使用展开运算符直接构建新数组arr3。这种方式不修改原数组,而是生成一个包含arr1和arr2所有元素的新数组,代码更为简洁直观。

作者最新文章