JS合并数组的几种方法及优劣比较

本文属于JavaScript的基础技能. 我们将学习结合/合并两个JS数组的各种常用方法,并比较各种方法的优缺点.

我们先来看看具体的场景:

代码如下:

很明显,数组 q 和 b 简单拼接的结果是:

代码如下:

concat(..)方法

最常见的用法如下:

代码如下:

q; // [5,8] b; // ["tie","fei"];

c; // [5,"tie","fei"]

如您所见,c 是一个全新的数组,表示 q 和 b 这两个数组的组合,但是 q 和 b 现在没用了是吧?

如果 q 数组有10000个元素,b 数组也有有10000个元素? 那么数组c现在就有20000个元素,这种方式占用了2倍的内存.

“这没问题!”,你可能会觉得. 只要将 q 和 b 置空就行,然后就会被垃圾回收,对吗?问题解决了!

代码如下:

额? 如果数组都很小,那自然没问题. 但对大型的数组,或需要多次重复处理时,内存就被限制了,它还需要进行优化.

循环插入

OK,让我们把一个数组的内容加入到另一个中试试,使用 Array#push() 方法:

代码如下:

q; // [5,"fei"]

b = null;

现在,q中存放了两个原始数组的内容(q + b).

看样子对内存优化做的不错.

但如果 q 数组很小而 b 又很大呢? 出于内存和速度的考虑,这时想把较小的 q 插入到 b 前面. 没问题,只要用 unshift() 方法代替 push() 即可,对应的也要从大到小进行循环遍历:

代码如下:

= 0; i--) { b.unshift( q[i] ); }

b; // [5,"fei"]

q = null;

实用技巧

悲催的是,for循环很土并且难以维护. 我们能做得更好吗? 我们先试试 Array#reduce :

代码如下:

q; // [5,"fei"]

// or `q` into `b`: b = q.reduceRight( function(coll,item){ coll.unshift( item ); return coll; },b );

b; // [5,"fei"]

Array#reduce() 和 Array#reduceRight() 很高大上,但有点笨重,而且一般人也记不住. JS规范6 中的 => 箭头函数(arrow-functions) 能让代码量大大减少,但需要对每个数组元素执行函数调用,也是很渣的手段. 那么下面的代码怎么样呢?

代码如下:

q; // [5,"fei"]

// or `q` into `b`: b.unshift.apply( b,q );

b; // [5,"fei"]

BIG更高了,是吧!? 特别是 unshift() 方法不需要像前面那样考虑相反的顺序. ES6 的展开运算符(spread operator,加 ... 前缀)就更高端了: a.push( ...b ) 或者 b.unshift( ...a )

但是,事实上这种方法还是太乐观了. 在这两种情况下,不管是将 a 或 b 传递给 apply() 作为第二个参数(apply方式调用Function时第一个参数在内部变成this,即context,上下文,作用域),还是使用 ... 展开运算符的方式,实际上数组都会被打散成为函数的 arguments . 第一个主要的问题是,占用了双倍的内存(当然,是临时的!),因为需要将数组复制到函数栈之中. 此外,不同的JS引擎有不同的实现算法,可能会限制了函数可以传递的参数数量.

如果数组添加了一百万个元素,那一定会超过函数栈所允许的大小,不管是push() 或 unshift()调用. 这种方式只在几千个元素时可用,所以必须限制其不能超过一定范围.

注意: 你也可以试试 splice(),肯定会发现他和 push(..)/unshift(..) 都是一样的限制.

一种选择是继续使用这种方法,但是采用分批次处理:

代码如下:

等等,我们损害了代码的可读性(甚至是性能!). 在我们放弃之前结束这个旅程吧.

总结

Array#concat() 是久经考验的方法,用于组合两个(或多个)数组. 但他创建了一个新的数组,而不是修改现有的一个.

有很多变通的手法,但他们都有不同的优缺点,需要根据实际情况来选择.

上面列出了各种优点/缺点,也许最好的(包括没有列出的)方法是 reduce(..) 和 reduceRight(..)

无论你选择什么,都应该批判性地思考你的数组合并策略,而不是把它当作理所当然的事情.

合并数组

JS合并数组的几种方法及优劣比较

concat(..)方法

循环插入

实用技巧

总结

相关推荐