原文链接:  Combining JS Arrays
原文日期: 2014-09-09
翻译日期: 2014-09-18
翻译人员: 铁锚

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

我们先来看看详细的场景:

var q = [ 5, 5, 1, 9, 9, 6, 4, 5, 8];
var b = [ "tie", "mao", "csdn", "ren", "fu", "fei" ];

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

[
5, 5, 1, 9, 9, 6, 4, 5, 8,
"tie", "mao", "csdn", "ren", "fu", "fei"
]

concat(..)方法

最常见的用法例如以下:

var c = q.concat( b );

q; // [5,5,1,9,9,6,4,5,8]
b; // ["tie","mao","csdn","ren","fu","fei"]; c; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]

如您所见, c 是一个全新的数组, 表示 qb 这两个数组的组合, 可是 qb 如今没用了是吧?
假设 q 数组有10000个元素, b 数组也有有10000个元素? 那么数组c如今就有20000个元素, 这样的方式占用了2倍的内存. 
“这没问题!”,你可能会认为. 仅仅要将 q 和 b 置空即可, 然后就会被垃圾回收,对吗?问题攻克了!

q = b = null; // `q` and `b` 如今能够被垃圾回收了

额?

假设数组都非常小,那自然没问题. 但对大型的数组,或须要多次反复处理时, 内存就被限制了, 它还须要进行优化.

循环插入

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

// 将数组 `b` 插入 `q`
for (var i=0; i < b.length; i++) {
q.push( b[i] );
} q; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"] b = null;

如今, q中存放了两个原始数组的内容(q + b). 
看样子对内存优化做的不错. 
但假设 q 数组非常小而 b 又非常大呢? 出于内存和速度的考虑,这时想把较小的 q 插入到 b 前面. 没问题,仅仅要用 unshift() 方法取代 push() 即可, 相应的也要从大到小进行循环遍历:

// `q` into `b`:
for (var i=q.length-1; i >= 0; i--) {
b.unshift( q[i] );
} b; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"] q = null;

有用技巧

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

// `b` onto `q`:
q = b.reduce( function(coll,item){
coll.push( item );
return coll;
}, q ); q; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"] // or `q` into `b`:
b = q.reduceRight( function(coll,item){
coll.unshift( item );
return coll;
}, b ); b; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]

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

// `b` onto `q`:
q.push.apply( q, b ); q; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"] // or `q` into `b`:
b.unshift.apply( b, q ); b; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","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(..) 都是一样的限制.

一种选择是继续使用这样的方法,可是採用分批次处理:

function combineInto(q,b) {
var len = q.length;
for (var i=0; i < len; i=i+5000) {
// 一次处理5000条
b.unshift.apply( b, q.slice( i, i+5000 ) );
}
}

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

总结

Array#concat() 是久经考验的方法, 用于组合两个(或多个)数组. 但他创建了一个新的数组,而不是改动现有的一个. 
有非常多变通的手法,但他们都有不同的优缺点,须要依据实际情况来选择. 
上面列出了各种 长处/缺点,或许最好的(包含没有列出的)方法是 reduce(..)reduceRight(..) 
无论你选择什么,都应该批判性地思考你的数组合并策略,而不是把它当作理所当然的事情.

比較JS合并数组的各种方法及其优劣的更多相关文章

  1. js 常用数组和字符串方法

    javascript数组与字符串常用方法总结 最近在梳理js的基础,首先从数组和字符串开始. string 常用方法: 1.substring(start开始位置的索引,end结束位置索引) 截取的位 ...

  2. js对数组去重的方法总结-(2019-1)

    最近待业在家,系统地学习了一套js的课程.虽然工作时间真的比较长了,但有些东西只局限在知其然而不知其所以然的程度上,有些知识点通过“血和泪”的经验积累下来,也只是记了结果并没有深究,所以每次听完课都有 ...

  3. js之数组常见的方法

    主要介绍数组的一些常用的方法,方法多了,就容易混淆,结果就是方法用错,甚至不会用: 一.数组的定义: 1.字面量/直接量: var arr = [1, 2, 'js', 'java']; 2.通过内部 ...

  4. JS操作数组常用的方法

    JS操作Array对象的方法 concat(arr1,arr2,...):连接数组indexOf(value):返回数组中value的第一个索引join(separator):将数组中所有的元素连接由 ...

  5. JS实现数组去重的方法(6种)

    方法一: 双层循环,外层循环元素,内层循环时比较值 如果有相同的值则跳过,不相同则push进数组 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Arra ...

  6. JS中数组的迭代方法和归并方法

    昨天总结的JavaScript中的数组Array方法 数组的迭代方法 ES5中为数组定义了5个迭代方法.每个方法都要接收两个参数:要在每一项上面运行的函数和(可选的)运行该函数的作用域对象---影响t ...

  7. js 删除数组几种方法

    var arr=['a','b','c']; 若要删除其中的'b',有两种方法: 1.delete方法:delete arr[1] 这种方式数组长度不变,此时arr[1]变为undefined了,但是 ...

  8. js中数组的splice()方法

    在数组中splice方法有增.删.该的多功能用处. var list = []; list.push(1); list.push(2); list.push(3); console.log(list) ...

  9. JS中数组的拷贝方法

    之前在写一个vue的计算属性时,大概是这样: computed: { updateList () { let newList = this.List /*do something*/ return n ...

随机推荐

  1. 基于PHP规范的自动加载方式(composer配置)

    针对PHP这种编程语言,到目前FIG指定了五个规范,分别如下: PSR0:自动加载: PSR1:基本代码规范: PSR2:代码样式规范: PSR3:日志接口规范: PSR4:自动加载规范: 看上去PS ...

  2. js之正则表达式详解

    文章前提:会写几本的正则表达式,本文主要讲解js中关于正则方法的运用. (关于正则元字符可以查看http://www.php100.com/html/webkaifa/javascript/2010/ ...

  3. Spring aop与AspectJ的区别?

    根据我看spring官方文档的理解(不出意外是最正确的答案): ①选择spring的AOP还是AspectJ? spring确实有自己的AOP.功能已经基本够用了,除非你的要在接口上动态代理或者方法拦 ...

  4. 使struct对象拥有可变大小的数组——(C++深度探索)

    首先摘录<Inside The C++ Object Model>中的一段话: 把单一元素的数组放在一个struct的尾端,于是每个 struct objects 可以拥有可变大小的数组: ...

  5. linux c:关联变量的双for循环

    举例说明: 比如打印一个倒三角形. * * * * * * * * * * 第一层循环为行数,第二层循环为每行打印的*数,且随着行数的变化,打印的*数也随着改变. 这就是关联变量的双层循环.我的做法是 ...

  6. vim:去掉响铃

    vim在移动字符出界(上下左右)包括按<ESC>建都会响铃,有时候真的很烦. 在网上搜了一下,原来是visualbell来控制的,在vim里使用命令:help visualbell,原来禁 ...

  7. Java高级面试题积累(二)

    简述23种设计 抽象工厂模式(Abstract Factory):提供一个创建一系列相关或相互依赖对象的接口.而无需指定它们详细的类. 适配器模式(Adapter):将一个类的接口转换成客户希望的另外 ...

  8. python切片 []取值操作符

    切片1.什么叫切片数组,元组等含有多个元素的集合,取其中的一段元素的操作,叫做切片 2.取前10个元素 l = list(range(100)) l3 = l[:10] print(l3) 运行结果: ...

  9. 快速了解Log4J (转)

    http://liuzhijun.iteye.com/blog/1746571 ***************************************** Log4J的三个组件: Logger ...

  10. 关于WEB-INF文件夹中的内容

    刚才使用了fileupload的jar包,老样子,我只是在eclipse中将其添加到了project的java build path/libraries中 我以为这样就行了,是的,是行了,仅仅能保证在 ...