如何合并JavaScript数组

Tags: javascript

这是一篇关于使用一些技巧的 JavaScript 数组的简单文章。我们将使用不同的方法,结合/合并两个 JS 数组,以及讨论的每个方法的利弊。

首先,让我们考虑下面的情况:

var x = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
var y = [ "foo", "bar", "baz", "bam", "bun", "fun"];

显然简单的结果组合应为:

[1, 2, 3, 4, 5, 6, 7, 8, 9, "foo", "bar", "baz", "bam" "bun", "fun"]

通常我们会使用concat()方法:

var z = x.concat( y );
x; // [1,2,3,4,5,6,7,8,9]
y; // ["foo","bar","baz","bam","bun","fun"]
z; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

正如你所看到的z是一个全新的组合两个数组的数组,并且让x和y保持不变。很简单,对吗?
但如果一个有100,000元素的数组x和有100000个元素y合并,那么z将有2000000 个元素,所以内存使用量将增加100倍。
“没问题!”你说。它们会被垃圾回收,将x和y设置为空(null)就可以解决问题了。这个说法是不对的,对于小型数组来说这种方式没有问题,但是对于大型或者超大型数组来说这会存在性能问题,有可能会把浏览器进程跑死,所以可以采用以下的方式来进行合并。

一、循环

for (var i=0; i < y.length; i++) {
    x.push(y[i]);
}

或者

for (var i=x.length-1; i >= 0; i--) {
    y.unshift(x[i]);
}

二、使用Array.reduce()方法

x = y.reduce( function(col,item){
    col.push( item );
    return col;
}, x );

或者

y = x.reduceRight( function(col,item){
    col.unshift( item );
    return col;
}, y);

本文链接:http://www.4byte.cn/learning/120040/ru-he-he-bing-javascript-shu-zu.html