JS合并两个数组的方法

我们在项目过程中,有时候会遇到需要将两个数组合并成为一个的情况。比如:
    var a = [1,2,3];
var b = [4,5,6];
有两个数组a、b,需求是将两个数组合并成一个。方法如下:
  • 1、concat
    js的Array对象提供了一个叫concat()方法,连接两个或更多的数组,并返回结果。
    var c = a.concat(b);//c=[1,2,3,4,5,6];

这里有一个问题,concat方法连接a、b两个数组后,a、b两个数组的数据不变,同时会返回一个新的数组。这样当我们需要进行多次的数组合并时,会造成很大的内存浪费,所以这个方法肯定不是最好的。

  • 2、for循环

    大概的思路是:遍历其中一个数组,把该数组中的所有元素依次添加到另外一个数组中。直接上代码:

    for(var i in b){
    a.push(b[i]);
    }

    这样的写法可以解决第一种方案中对内存的浪费,但是会有另一个问题:丑!这么说不是没有道理,如果能只用一行代码就搞定,岂不快哉~

  • 3、apply
    函数的apply方法有一个特性,那就是func.apply(obj,argv),argv是一个数组。所以我们可以利用这点,直接上代码:
    a.push.apply(a,b);

调用a.push这个函数实例的apply方法,同时把,b当作参数传入,这样a.push这个方法就会遍历b数组的所有元素,达到合并的效果。

这里可能有点绕,我们可以把b看成[4,5,6],变成这样:

    a.push.apply(a,[4,5,6]);

然后上面的操作就等同于:

    a.push(4,5,6);

这样就很清楚了!

  另外,还要注意两个小问题:

  1)以上3种合并方法并没有考虑过a、b两个数组谁的长度更小。

  所以好的做法是预先判断a、b两个数组哪个更大,然后使用大数组合并小数组,这样就减少了数组元素操作的次数!

  2)有时候我们不希望原数组(a、b)改变,这时就只能使用concat了。

Javascript 连接两个数组的更多相关文章

  1. javascript对比两个数组,打印出差异值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. javascript合并两个数组

    在开发的过程中,我们很多时候会遇到需要将两个数组合并成一个数组的情况出现. var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; // 将arr1和arr2合并成为[ ...

  3. 用JavaScript比较两个数组是否相等

    JS怎么比较两个数组是否有完全相同的元素?Javascript不能直接用==或者===来判断两个数组是否相等,无论是相等还是全等都不行,以下两行JS代码都会返回false alert([0,0,0]= ...

  4. JavaScript 将两个数组合并,且删除重复的值

    var a=[1,2,3,4,5,8,9,10]; var b=[6,7,8,9,10]; var c = a.concat(b);//合并成一个数组 console.log(c) temp = {} ...

  5. JavaScript中两个数组的拼接

    方法一:使用for循环 var arr = ['tom', 'jerry']; var arr2 = [1, 2]; for(var i=0; i<arr2.length; i++){ arr. ...

  6. JavaScript查找两个数组的相同元素和相差元素

    let intersection = a.filter(v => b.includes(v)) 返回交集数组 let difference = a.concat(b).filter(v => ...

  7. JavaScript把两个数组对象合并成一个一一对应的数组对象

    合并数组或者对象在数组或对象前面加...,是es6的新写法,然后数组的map方法会返回数组. var obj1 = [{ , "model": "XQG70-S1208F ...

  8. JavaScript concat() 方法-连接两个或多个数组

    一,定义和用法 concat() 方法用于连接两个或多个数组. 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. 语法 arrayObject.concat(arrayX,arrayX,. ...

  9. JavaScript基础进阶之数组方法总结

    数组常用方法总结:  下面我只总结了es3中常用的数组方法,一共有11个.es5中新增的9个数组方法,后续再单独总结. 1个连接数组的方法:concat() 2个数组转换为字符串的方法:join(). ...

随机推荐

  1. Hadoop之HDFS(一)HDFS入门及基本Shell命令操作

    1 . HDFS 基本概念 1.1  HDFS 介绍 HDFS 是 Hadoop Distribute File System 的简称,意为:Hadoop 分布式文件系统.是 Hadoop 核心组件之 ...

  2. volatile和 锁的区别

    Volatile: 当把变量声明为volatile类型后,编译器和运行时都会注意到这个变量是共享的,因此不会将该变量上的操作与其它内存操作一起重排序.volatile变量不会被缓存在寄存器或者对其他处 ...

  3. 686. Repeated String Match 字符串重复后的子字符串查找

    [抄题]: Given two strings A and B, find the minimum number of times A has to be repeated such that B i ...

  4. Python学习笔记_操作Excel

    Python 操作Exel,涉及下面几个库: 1.xlrd 读取Excel文件 2.xlwt 向Excel文件写入,并设置格式 3.xlutils 一组Excel高级操作工具,需要先安装xlrd和xl ...

  5. python if __name__ == '__main__' 作用

    转载:https://stackoverflow.com/questions/419163/what-does-if-name-main-do When your script is run by p ...

  6. 41、Aspera下载安装运用

    参考:http://www.so.com/linkm=aLVHG%2FgJT4HyuVeK4%2BxX2LMFvF6oTiTCaruHE20pwjRia7DmVI2hIVfmw%2BFNPczCtvX ...

  7. WEBAPI使用过滤器对API接口进行验证

    用户登录控制器:[ActionFilter]自定义过滤器 用户信息:var userData = new JObject();                   userData.Add(" ...

  8. AIO和NIO的理解

    AIO: AIO 背后的基本思想是允许进程发起很多 I/O 操作,而不用阻塞或等待任何操作完成,可以继续做 另外的事情,等I/O操作完成,内核会通过函数回调或者信号机制通知用户进程.这样很大程度提高了 ...

  9. css总结4:input 去掉外边框,placeholder的字体颜色、字号

    1 input 标签去除外边框: 在进行webAPP开发时,input外边框非常影响美观,去除外边框方法如下: <input style="border: 0px;outline:no ...

  10. mybatis使用count返回int的方法

    <select id="countByExample" resultType="java.lang.Integer" > select count( ...