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

我们先来看看具体的场景:

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

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

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

concat(..)方法

最常见的用法如下:

  1. var c = q.concat( b );
  2. q; // [5,5,1,9,9,6,4,5,8]
  3. b; // ["tie","mao","csdn","ren","fu","fei"];
  4. 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 置空就行, 然后就会被垃圾回收,对吗?问题解决了!

  1. q = b = null; // `q` and `b` 现在可以被垃圾回收了

额? 如果数组都很小,那自然没问题. 但对大型的数组,或需要多次重复处理时, 内存就被限制了, 它还需要进行优化.

循环插入

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

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

现在, q中存放了两个原始数组的内容(q + b).

看样子对内存优化做的不错.

但如果 q 数组很小而 b 又很大呢? 出于内存和速度的考虑,这时想把较小的 q 插入到 b 前面. 没问题,只要用 unshift() 方法代替 push() 即可, 对应的也要从大到小进行循环遍历:

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

实用技巧

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

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

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

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

一种选择是继续使用这种方法,但是采用分批次处理:

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

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

总结

Array#concat() 是久经考验的方法, 用于组合两个(或多个)数组. 但他创建了一个新的数组,而不是修改现有的一个.

有很多变通的手法,但他们都有不同的优缺点,需要根据实际情况来选择.

上面列出了各种 优点/缺点,也许最好的(包括没有列出的)方法是 reduce(..) 和 reduceRight(..)

无论你选择什么,都应该批判性地思考你的数组合并策略,而不是把它当作理所当然的事情.

JS合并数组的几种方法及优劣比较的更多相关文章

  1. PHP合并数组的三种方法的分析与比较

    常用的合并数组的方法有三种:array_merge().array_merge_recursive().+,下面一个一个介绍 array_merge() 此函数合并一个或多个数组,当输入的数组中有相同 ...

  2. 【Javascript】JS遍历数组的三种方法:map、forEach、filter

    前言 近一段时间,因为项目原因,会经常在前端对数组进行遍历.处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑.前端时间在ediary中总结了js原生自带的 ...

  3. java合并数组的几种方法,stream流合并数组

    一.实例代码 package cc.ash; import org.apache.commons.lang3.ArrayUtils; import java.lang.reflect.Array; i ...

  4. JS创建数组的三种方法

    1     常规方式 创建数组并给数组元素赋值 var myCars = new Array(); myCars[0] = "Saab"; myCars[1] = "Vo ...

  5. js合并字符串的3种方法和效率

    /* abc abc abc*/function concat(s,n){ let a = new Array(n); a.fill(s); let str = a.join(''); a = nul ...

  6. python将两个数组合并成一个数组的两种方法的代码

    内容过程中,把写内容过程中常用的内容收藏起来,下面的资料是关于python将两个数组合并成一个数组的两种方法的内容,希望能对小伙伴们有帮助. c1 = ["Red","G ...

  7. php数组合并有哪三种方法

    php数组合并有哪三种方法 一.总结 一句话总结:array_merge():array_merge_recursive():‘+'号 $a = array('color'=>'red',5,6 ...

  8. JS 中检测数组的四种方法

    今天和大家分享一下 JS 中检测是不是数组的四种方法,虽然篇幅不长,不过方法应该算是比较全面了. 1. instanceof 方法 instanceof 用于检测一个对象是不是某个类的实例,数组也是一 ...

  9. JavaScript数组的22种方法

    原文:http://www.cnblogs.com/xiaohuochai/p/5682621.html javascript中数组的22种方法   前面的话 数组总共有22种方法,本文将其分为对象继 ...

随机推荐

  1. 查询每个分组中第N的一条记录

    查询每个分组中第N的一条记录 -- 天气表,每天每个地区采集了多条记录的天气信息,但是时间只记录到了天,导致同一个地区同一天出现了多条天气记录 -- 目的:获取所有地区在每天中第N的一条记录 sele ...

  2. 阿里云服务器ubuntu 配置

    由于阿里云的导入自定义 ubuntu 镜像需要开通 OSS 快照是收费的(看着感觉不贵,但是也很麻烦),而且自己已配置好的镜像想导入需要转换格式,还存在不能使用的情况,所以麻烦点直接在阿里云原来的ub ...

  3. python元组,集合类型,及字典补充

    一.元组 元组与列表基本相同,不同之处在于元组只能存不能取,当多个值没有改的需求时,用元组更合适 元组的基本操作 1.创建元组: t = (1, 2, 3, 4, 2,4,) t = (1,) #单个 ...

  4. 来,了解一下Java内存模型(JMM)

    网上有很多关于Java内存模型的文章,在<深入理解Java虚拟机>和<Java并发编程的艺术>等书中也都有关于这个知识点的介绍.但是,很多人读完之后还是搞不清楚,甚至有的人说自 ...

  5. Confluence 6 其他需要备份和恢复的地方

    XML 备份被描述用于在 Confluence 备份使用的其他方法,例如升级和移动服务器.使用上面描述的备份和恢复方法也适用这些地方. 我们的 upgrade guide 不要求使用一个 XML 备份 ...

  6. Android 基础 一 AndroidManifest.xml

    一.概述 AndroidManifest.xml是Android应用的入口文件,它描述了package中暴露的组件(activities, services, 等等),他们各自的实现类,各种能被处理的 ...

  7. 在前台根据传过来的XX级别的数字转XX的名字

    需求描述:进入页面,展示列表,列表中有个XX级别的项,数据库中的级别使用1234来存放的,现在要转成对应的一级XX,二级XX,三级XX,四级XX. 吐槽一下:正常的做法应该是在后台,就把查出来的级别1 ...

  8. Vue-cli 创建的项目配置跨域请求(通过反向代理)---配置多个代理--axios请求

    问题描述: 使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问 localhost:9000 或https://m.maoyan.com或http://image.b ...

  9. jQuery 常用的方法

    <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...

  10. jenkins+git+maven 增量部署思路以及相关脚本

    之前通过jenkins+Git+maven这种方式打war包然后scp到测试环境使用,但是现在项目组要求打增量包,即只部署修改的文件和配置文件. 核心问题:如何获取到变动的文件??? 前置条件:初始化 ...