JavaScript数组合并的多种方法：concat、push与性能权衡

JavaScript数组合并概述

本文简要介绍JavaScript数组操作的一些实用技巧，重点讨论如何结合或合并两个JS数组，并分析每种方法的优缺点。

首先设定以下测试场景：

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

直观上，合并后的结果应包含两组数据：

[
1, 2, 3, 4, 5, 6, 7, 8, 9,
"foo", "bar", "baz", "bam" "bun", "fun"
]
使用concat方法合并数组concat(..)

这是最常规的做法：

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

如你所见，c是一个全新数组，包含a和b的组合，而a和b保持不变。这种方法简单直观。

然而，如果a包含10,000个元素，b也有一万个元素，c将拥有2万个元素，导致a和b的内存使用量暂时翻倍。

“没问题！”，你可能会说，将它们设为null以触发垃圾回收：

a = b = null; // 'a'和'b'就被回收了

对于元素较少的小数组，这并非问题。但在内存受限系统中频繁处理大数组时，这种内存翻倍策略仍有改进空间。接下来介绍循环插入法。

循环插入与push/unshift技巧

我们可以尝试将一个数组的内容复制到另一个，使用： Array#push(..)

// `b` onto `a`
for (var i=0; i < b.length; i++) {
a.push( b[i] );
}
a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]
b = null;

此时，数组a已包含数组b的内容。

这似乎能降低内存占用。

但如果a数组较小呢？出于内存和速度考虑，你可能希望将较小的a放到b的前面。只需将push（..）替换为unshift(..)即可：

// `a` into `b`:
for (var i=a.length-1; i >= 0; i--) {
b.unshift( a[i] );
}
b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

利用reduce和apply优化合并

功能技巧

不过for循环代码较为冗长且不易维护。我们能否做得更好？

第一次尝试使用Array#reduce：

// `b` onto `a`:
a = b.reduce( function(coll,item){
coll.push( item );
return coll;
}, a );
a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]
// or `a` into `b`:
b = a.reduceRight( function(coll,item){
coll.unshift( item );
return coll;
}, b );
b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

Array#reduce(..) 和 Array#reduceRight(..)虽然可行，但略显笨拙。ES6的箭头函数可减少代码量，但仍需为每个元素调用一次函数，并非最完美方案。

那试试这个：

// `b` onto `a`:
a.push.apply( a, b );
a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]
// or `a` into `b`:
b.unshift.apply( b, a );
b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

这种方法明显更优。特别是unshift(..)在此处无需担心反向排序问题。ES6的spread操作符写法更简洁：a.push( ...b ) 或 b.unshift( ...a。

处理数组长度限制与内存问题

数组最大长度限制

上述方法的主要问题是内存使用量暂时翻倍（尽管是暂时的！）。被追加的内容本质上是通过函数调用将元素复制到堆栈中。此外，不同的JS引擎对拷贝数据的长度有限制。

因此，如果数组包含一百万个元素，你肯定会超出push(...)或unshift(...)允许的调用栈限制。处理几千个元素时表现良好，但必须小心不要超过合理的长度限值。

注意： 你可以尝试一下splice(...)，它跟push(...)和unshift(...)一样都有这种问题。

有一种方法可以避免这种最大长度限制。

function combineInto(a,b) {
var len = a.length;
for (var i=0; i < len; i=i+5000) {
b.unshift.apply( b, a.slice( i, i+5000 ) );
}
}

这段代码的可读性有所倒退。就这样吧，可能会越改越差，呵。