合并JavaScript数组的N种方法
这是一篇简单的文章,关于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"]
正如你所看到的,C是一个全新的数组,表示a和b两个数组的组合,并让A和B不变。简单吧?
但如果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有了数组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"]
功能技巧
不过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数组的N种方法的更多相关文章
- JavaScript数组的22种方法
原文:http://www.cnblogs.com/xiaohuochai/p/5682621.html javascript中数组的22种方法 前面的话 数组总共有22种方法,本文将其分为对象继 ...
- 遍历Javascript数组的一种方法!
应用场景: 如果您的数组只用一次的话就适用这种方法,因为遍历完后数组便清空了.代码如下: var arr=[1,5,6,2,3]; for(;i=arr.shift();){ console.log( ...
- JavaScript数组去重(5种方法)
// 数组去重 let arr = ['a', 'b', 'b', 1, 1, 'true', true, true, NaN, NaN, 'NaN', undefined, undefined, n ...
- JavaScript数组打平(4种方法)
let arr = [1, 2, [3, 4, 5, [6, 7, 8], 9], 10, [11, 12]]; flatten1 = arr => arr.flat(Infinity) fla ...
- python将两个数组合并成一个数组的两种方法的代码
内容过程中,把写内容过程中常用的内容收藏起来,下面的资料是关于python将两个数组合并成一个数组的两种方法的内容,希望能对小伙伴们有帮助. c1 = ["Red","G ...
- javascript数组常用的遍历方法
本篇文章给大家带来的内容是关于javascript数组常用的遍历方法(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 前言 本文主要介绍数组常见遍历方法:forEach.m ...
- 在WebBrowser中执行javascript脚本的几种方法整理(execScript/InvokeScript/NavigateScript) 附完整源码
[实例简介] 涵盖了几种常用的 webBrowser执行javascript的方法,详见示例截图以及代码 [实例截图] [核心代码] execScript方式: 1 2 3 4 5 6 7 8 9 1 ...
- JQuery遍历json数组的3种方法
这篇文章主要介绍了JQuery遍历json数组的3种方法,本文分别给出了使用each.for遍历json的方法,其中for又分成两种形式,需要的朋友可以参考下 一.使用each遍历 $(functio ...
- 合并BIN文件的两种方法(转)
源:http://blog.chinaunix.net/uid-20745340-id-1878803.html 合并BIN文件的两种方法 在单片机的开发过程中,经常需要将两个单独的BIN文件合并成一 ...
随机推荐
- 超实用 Git 使用方式介绍
都说程序员若是不知道 GitHub 就不是一个合格的程序员,其实这话说的过分了,不知道就学嘛,今天我们就来说说 Git 和 GitHub 到底是什么. 我们在开发软件的时候,常常是需要多人协作完成,这 ...
- MSTP多生成树的配置
STP的不足 STP协议虽然能够解决环路问题,但是由于网络拓扑收敛较慢,影响了用户通信质量 而且如果网络中的拓扑结构频繁变化,网络也会随之频繁失去连通性,从而导致用户通信频繁中断 RSTP对STP的改 ...
- tkinter-clock实例
模仿着前辈的脚步,画了个临时的时钟显示: 代码如下: # coding:utf-8 from tkinter import * import math,time global List global ...
- css平移动画的实现
参考这位大佬的帖子:https://www.jianshu.com/p/5d8e77ef7f84
- [CF1053C]Putting Boxes Together(线段树)
http://codeforces.com/blog/entry/62013 两个结论: 1.一定有一个箱子不用动. 2.不动的箱子一定是加权前缀和为S/2的那个. 1显然,2由1易得. 于是问题变为 ...
- 王彪-20162321-Java程序设计与数据结构2nd-第十周学习总结
学习目标 讨论有向图和无向图 定义带权图并讨论它们的应用 定义图的广度优先遍历和深度优先遍历 定义最小生成树 讨论图的实现策略 书中图的基本定义 图是由结点及结点间的连接组成的,结点称为顶点,结点间的 ...
- 20162318 2018-2019-2《网络对抗技术》Exp1 PC平台逆向破解
一.实验目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getS ...
- 第一章--Go与web应用
Go语言构建web应用的特性 可扩展 可维护 模块化 高性能 HTTP简介 HTTP是一种无状态.由文本构成的请求-响应(request-response)协议,这种协议使用的是客户端-服务器(cli ...
- phalcon Model 'partitions' could not be loaded(模型不支持分区语句)
注意: 很明确提示用phalcon自带的模型层是不能用partition这个关键字的 解决方法: 自己写个PDO类 然后用pdo中的query方法执行语句成功: mysql分区目的 是减少数据库的负担 ...
- 计算机二级软件VC++6.0下载地址
计算机二级软件VC++6.0介绍: 适合所有参加全国计算机等级考试的童鞋们……见图如下: 下载地址:(以下两者任选其一即可) (1).计算机二级软件VC++6.0(16.35MB) (2).计算机二级 ...