关于js中数组连接的问题——concat和push.apply

最新推荐文章于 2025-02-23 00:00:00 发布

原创最新推荐文章于 2025-02-23 00:00:00 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #数组

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

本文探讨了JavaScript中数组连接的几种方法，包括使用`concat`、`push`以及`Array.prototype.push.apply`。`concat`返回连接后的数组副本而不改变原数组，而`push`仅在数组末尾添加元素。对于复杂合并，`Array.prototype.push.apply`通过`apply`方法展开数组元素并合并，但在处理大数组时可能导致异常。推荐在可能的情况下使用`forEach`以提高性能和避免异常。

concat

数组连接一般的方法就是JS数组内置的concat方法。

var oldArr = [];
var arr = [1, 2, 3];
var newArr = oldArr.concat(arr);
console.log(oldArr);//[]
console.log(newArr);//[1, 2, 3]

通过上面的例子我们发现arr.concat方法进行连接是没有改变原数组的，而是申请了一块新的区域进行存储，返回的是连接后数组的一个副本。

push

如果使用push的话只是单纯的添加在数组后面。

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

[].push.apply

apply() 方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。用到这里，可以把 elements数组展开，然后一个一个 push 到 array数组中去，并且只能两个数组之间发生合并。

var array = ['a', 'b'];
var elements = [0, 1, 2];
[].push.apply(array, elements);
console.log(array); // ["a", "b", 0, 1, 2]

a = new Array();
b = new Array(125624);                    
a.push.apply(a, b);

以上的代码在chrome下抛出了如下的异常:

Uncaught RangeError: Maximum call stack size exceeded

如果把数组改为b = new Array(125623);小一个元素就好了，其他浏览器也都有大数组才出错的问题，但不同浏览器临界值还各异。

如果遇到这种情况，给出的建议是老老实实用forEach，不仅可以避免大数组的异常问题，并且从性能角度考虑forEach也是最快的。
详情见：https://www.jb51.net/article/50831.htm

Array.prototype.push.apply

理论上Array.prototype.push比[].push要快. 因为[].push这种方式需要在原型链上查找两次才能捕获到push方法.
实际从使用上来说没有太大差异。本质上也是调用[].__proto__也就是Array.prototype上的push函数，除了会创建一个数组对象以外没有不同。