JavaScript数组合并的多种方法


Posted in Javascript onMay 22, 2016

这是一篇简单的文章,关于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程序设计有所帮助。

Javascript 相关文章推荐
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
基于ajax实现上传图片代码示例解析
Dec 03 Javascript
浅析JavaScript回调函数应用
May 22 #Javascript
为什么JavaScript没有块级作用域
May 22 #Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 #Javascript
全面解析bootstrap格子布局
May 22 #Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 #Javascript
基于Bootstrap实现图片轮播效果
May 22 #Javascript
基于Vue.js的表格分页组件
May 22 #Javascript
You might like
php页面缓存方法小结
2015/01/10 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
PHP递归创建多级目录
2015/11/05 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
Python基本数据类型详细介绍
2014/03/11 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
护士辞职信范文
2014/01/19 职场文书
运动会广播稿30字
2014/01/21 职场文书
教师暑期培训感言
2014/08/15 职场文书
师范生见习报告
2014/10/31 职场文书
优秀党员事迹材料
2014/12/18 职场文书
2019消防宣传标语!
2019/07/10 职场文书
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技