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. EHR 1.172无法启动数据库,提示磁盘空间不足 设置非归模式

    数据库无法访问,提示ORA-09817错误: 1.查看磁盘空间df -h,使用率100%,看出dbs夹占184G    在oracle的OEM管理器中有可视化的日志展现出,当我们手工清除archive ...

  2. laravel Redis缓存

    首先在app/config/cache.php配置文件下改变一下缓存的驱动方式改为redis composer require predis/predis 先安装conposer的扩展安装包 然后在c ...

  3. 十二.filter

    Python内建的filter()函数用于过滤序列. 和map()类似,filter()也接收一个函数和一个序列.和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是 ...

  4. 数据库MySQL之 视图、触发器、存储过程、函数、事务、数据库锁、数据库备份、事件

    数据库MySQL之 视图.触发器.存储过程.函数.事务.数据库锁.数据库备份.事件 浏览目录 视图 触发器 存储过程 函数 事务 数据库锁 数据库备份 事件 一.视图 1.视图概念 视图是一个虚拟表, ...

  5. 利用 Aspose.Words 组件,在不依赖与 Office 组件的情况下把 Word 文件转换成 HTML 代码。

    首先利用 Nuget 获取 Aspose.Words.dll public ActionResult AsposeWordsDemo() { string srcFileName = Server.M ...

  6. HDU 6047 Maximum Sequence (贪心+单调队列)

    题意:给定一个序列,让你构造出一个序列,满足条件,且最大.条件是 选取一个ai <= max{a[b[j], j]-j} 析:贪心,贪心策略就是先尽量产生大的,所以就是对于B序列尽量从头开始,由 ...

  7. smartUpload上传下载

    上传 file_upload_smart_form.jsp文件代码 <%@ page contentType="text/html;charset=gb2312" langu ...

  8. MongoVue 破解治标不治本

    MongoVue  破解治标不治本 ---------解决燃眉之急 注册表中查找B1159E65-821C3-21C5-CE21-34A484D54444中的子项4FF78130 ,删除其下的三个子项 ...

  9. Unite Shanghai 2019全日程曝光(建议收藏)

    https://mp.weixin.qq.com/s/KvAyXpDhqWROtTX1Ol3a4Q 5月10-12日,Unite Shanghai 2019即将在上海国际会议中心正式开幕.本次大会共设 ...

  10. kali linux之拒绝服务

    Dos不是DOS(利用程序漏洞或一对一资源耗尽的denial of service拒绝服务) DDoS分布式拒绝服务(多对一的攻击汇聚资源能力,重点在于量大,属于资源耗尽型) 历史 以前:欠缺技术能力 ...