使用不同的方法结合/合并两个JS数组
更新时间：2014年09月18日 17:30:22 投稿：whsnow
这是一篇关于JavaScript数组使用的一些技巧，我们将使用不同的方法结合/合并两个JS数组，以及讨论每个方法的优点/缺点
这是一篇简单的文章，关于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(..)
复制代码 代码如下:
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"]
但如果a有10,000个元素，而b也有一万个元素？ C就会有2万个元素，所以a和b的内内存使用就会翻倍。
“没问题！”，你说。让它们被垃圾回收，把A和B设置为null，问题解决了！
a = b = null; // 'a'和'b'就被回收了
呵呵。对于只有几个元素的小数组，这没啥问题。但对于大数组，或者在内存有限的系统中需要经常重复这个过程，它其实还有很多改进的地方。
循环插入
好吧，让我们将一个数组的内容复制到另一个，使用： 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数组比较小？出于内存和速度的原因，你可能要把更小的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"]
功能技巧
不过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的spead操作会更漂亮： 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 ) );
}
}
相关文章
这篇文章主要介绍了JavaScript函数封装随机颜色验证码(完整代码),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-12-12
当我们谈论面向对象编程时,最难理解的事情之一就是静态属性与实例属性的概念,尤其是当我们试图在静态类型的基础上进行动态语言类型化时,在本文中,我将主要介绍一下如何使用TypeScript在接口中定义静态方法,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了微信小程序实现倒计时60s获取验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了JavaScript构造树形结构的一种高效算法，对算法感兴趣的同学，可以参考下2021-05-05
childNodes实现代码2009-04-04
这篇文章主要介绍了微信小程序新闻网站详情页的实例代码，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了JS简单实现数组去重的方法,涉及javascript数组的遍历、判断及赋值操作,代码非常简单易懂,具有一定参考借鉴价值,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了JavaScript中实现sprintf、printf函数,这两个函数在大多数编程语言中都有,但JS中却没有,本文介绍在js中实现这两个函数功能,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了JS实现的全排列组合算法,简单描述了全排列组合算法的原理并结合实例形式给出了全排列组合算法的具体实现技巧,需要的朋友可以参考下2017-10-10
javascript中JSON.parse()与eval()解析json的区别
这篇文章主要介绍了javascript中JSON.parse()与eval()解析json的区别,详细描述了json格式数据的操作技巧,并结合实例形式对比分析了使用JSON.parse()与eval()解析json的区别,需要的朋友可以参考下2016-05-05
最新评论