JavaScript中push与concat数组合并的区别详解

push与concat共同点

本文通过具体示例，深入解析JavaScript中push与concat两种数组合并方法的差异，供读者参考学习。

共同点

这两种方法均支持在数组中添加新元素，且接收无限数量的参数列表，具体调用方式如下所示。

var testPushArr=[];
testPushArr.push(item1,item2,item3...);
var testConcatArr=[];
var concatArr = testConcatArr.concat(item1,item2,item3...);

push和concat接受的参数既可以是任意类型的普通元素，也可以是数组对象。

push方法特性与示例

区别

push()方法特性

使用push添加的元素会置于数组末尾，且若参数为数组，则整个数组作为一个整体元素被追加到原数组中。该方法会直接修改原始数组，并返回修改后的数组长度。

示例代码

var testPushArr=[1,2];
testPushArr.push(3,[4,5]);
console.log(testPushArr);//1,2,3,[4,5]

concat方法特性与示例

concat()方法特性

concat处理数组参数时，会将数组“打散”，将其内部元素逐个添加到新数组中；非数组参数则保持整体。该方法不会修改原数组，而是返回一个包含合并内容的新数组。通常需要通过赋值语句（如arr = arr.concat(...)）来接收结果，否则原数组不会体现变化。

示例代码

ar testConcatArr=[1,2];
var concatArr = testConcatArr.concat(3,[4,5]);
console.log(concatArr );//1,2,3,4,5

关键区别与使用建议

补充说明

需注意concat的拼写，尽管其功能与push相似，但存在两点关键区别。

参考以下代码逻辑：

var arr = [];
arr.push(1);
arr.push([2, 3]);
arr.push(4, 5);
arr = arr.concat(6);
arr = arr.concat([7, 8]);
arr = arr.concat(9, 10);
arr.each(function(index, value){
  alert(value);
});

alert弹窗输出结果如下：

1
2,3
4
5
6
7
8
9
10

核心区别总结：

当push遇到数组参数时，会将整个数组作为一个单独元素存入；而concat则会展开数组参数，将其内部元素逐一添加。此外，push直接改变当前数组对象，而concat返回新数组，不改变当前数组。

总结

若需追加数组元素，建议使用concat，但需注意其行为类似于Java中的replace方法，使用完毕后务必通过赋值语句（如arr1 = arr1.concat(arr2)）将结果重新赋给变量，以保留修改效果。

希望本文所述内容能对读者的JavaScript程序设计有所帮助。