比較JS合并数组的各种方法及其优劣
原文日期: 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 是一个全新的数组, 表示 q 和 b 这两个数组的组合, 可是 q 和 b 如今没用了是吧?
假设 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合并数组的各种方法及其优劣的更多相关文章
- js 常用数组和字符串方法
javascript数组与字符串常用方法总结 最近在梳理js的基础,首先从数组和字符串开始. string 常用方法: 1.substring(start开始位置的索引,end结束位置索引) 截取的位 ...
- js对数组去重的方法总结-(2019-1)
最近待业在家,系统地学习了一套js的课程.虽然工作时间真的比较长了,但有些东西只局限在知其然而不知其所以然的程度上,有些知识点通过“血和泪”的经验积累下来,也只是记了结果并没有深究,所以每次听完课都有 ...
- js之数组常见的方法
主要介绍数组的一些常用的方法,方法多了,就容易混淆,结果就是方法用错,甚至不会用: 一.数组的定义: 1.字面量/直接量: var arr = [1, 2, 'js', 'java']; 2.通过内部 ...
- JS操作数组常用的方法
JS操作Array对象的方法 concat(arr1,arr2,...):连接数组indexOf(value):返回数组中value的第一个索引join(separator):将数组中所有的元素连接由 ...
- JS实现数组去重的方法(6种)
方法一: 双层循环,外层循环元素,内层循环时比较值 如果有相同的值则跳过,不相同则push进数组 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Arra ...
- JS中数组的迭代方法和归并方法
昨天总结的JavaScript中的数组Array方法 数组的迭代方法 ES5中为数组定义了5个迭代方法.每个方法都要接收两个参数:要在每一项上面运行的函数和(可选的)运行该函数的作用域对象---影响t ...
- js 删除数组几种方法
var arr=['a','b','c']; 若要删除其中的'b',有两种方法: 1.delete方法:delete arr[1] 这种方式数组长度不变,此时arr[1]变为undefined了,但是 ...
- js中数组的splice()方法
在数组中splice方法有增.删.该的多功能用处. var list = []; list.push(1); list.push(2); list.push(3); console.log(list) ...
- JS中数组的拷贝方法
之前在写一个vue的计算属性时,大概是这样: computed: { updateList () { let newList = this.List /*do something*/ return n ...
随机推荐
- 基于PHP规范的自动加载方式(composer配置)
针对PHP这种编程语言,到目前FIG指定了五个规范,分别如下: PSR0:自动加载: PSR1:基本代码规范: PSR2:代码样式规范: PSR3:日志接口规范: PSR4:自动加载规范: 看上去PS ...
- js之正则表达式详解
文章前提:会写几本的正则表达式,本文主要讲解js中关于正则方法的运用. (关于正则元字符可以查看http://www.php100.com/html/webkaifa/javascript/2010/ ...
- Spring aop与AspectJ的区别?
根据我看spring官方文档的理解(不出意外是最正确的答案): ①选择spring的AOP还是AspectJ? spring确实有自己的AOP.功能已经基本够用了,除非你的要在接口上动态代理或者方法拦 ...
- 使struct对象拥有可变大小的数组——(C++深度探索)
首先摘录<Inside The C++ Object Model>中的一段话: 把单一元素的数组放在一个struct的尾端,于是每个 struct objects 可以拥有可变大小的数组: ...
- linux c:关联变量的双for循环
举例说明: 比如打印一个倒三角形. * * * * * * * * * * 第一层循环为行数,第二层循环为每行打印的*数,且随着行数的变化,打印的*数也随着改变. 这就是关联变量的双层循环.我的做法是 ...
- vim:去掉响铃
vim在移动字符出界(上下左右)包括按<ESC>建都会响铃,有时候真的很烦. 在网上搜了一下,原来是visualbell来控制的,在vim里使用命令:help visualbell,原来禁 ...
- Java高级面试题积累(二)
简述23种设计 抽象工厂模式(Abstract Factory):提供一个创建一系列相关或相互依赖对象的接口.而无需指定它们详细的类. 适配器模式(Adapter):将一个类的接口转换成客户希望的另外 ...
- python切片 []取值操作符
切片1.什么叫切片数组,元组等含有多个元素的集合,取其中的一段元素的操作,叫做切片 2.取前10个元素 l = list(range(100)) l3 = l[:10] print(l3) 运行结果: ...
- 快速了解Log4J (转)
http://liuzhijun.iteye.com/blog/1746571 ***************************************** Log4J的三个组件: Logger ...
- 关于WEB-INF文件夹中的内容
刚才使用了fileupload的jar包,老样子,我只是在eclipse中将其添加到了project的java build path/libraries中 我以为这样就行了,是的,是行了,仅仅能保证在 ...