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. java基础之JDBC二:原生代码基础应用

    JDBC的基础应用CURD: 增删改 public void noQuery() { Connection conn = null; Statement stat = null; try { //注册 ...

  2. Hadoop对数据仓库的影响

    转载http://www.dwway.com/portal.php?mod=view&aid=9065 在过去三年,Hadoop生态系统已经大范围扩展,很多主要IT供应商都推出了Hadoop连 ...

  3. JavaPersistenceWithMyBatis3笔记-第5章Configuring MyBatis in a Spring applications-001

    一. 1.Mapper /** * */ package com.mybatis3.mappers; import java.util.List; import org.apache.ibatis.a ...

  4. Linux mii-tool命令

    一.简介 mii-tool 是一个用来查看,管理介质的网络接口的状态的工具. 二.选项 usage: mii-tool [-VvRrwl] [-A media,... | -F media] [int ...

  5. hdu1269 Tarjan强连通分量 模板(转)

    #include<stdio.h> #include<iostream> #include<vector> using namespace std; ; vecto ...

  6. php系统常量

    (1)__FILE__ :php程序文件名.它可以帮助我们获取当前文件在服务器的物理位置. (2)__LINE__ :PHP程序文件行数.它可以告诉我们,当前代码在第几行. (3)PHP_VERSIO ...

  7. 制作3D旋转视频展示区

    CSS3 3D变形制作视频展示区 <!doctype html> <html lang="en"> <head> <meta charse ...

  8. 下载特定区域内街景照片数据 | Download Street View Photos within Selected Region

    作者:姜虹,刘子煜,王玥瑶,杨安琪,天靖居士 街景图片可以通过api下载,但需要提供参数,参数中的poiid.panoid.location可以用来确定位置或全景图片的ID以确定对应的街景图片.优先级 ...

  9. 请教一个Jquery ligerui 框架的小问题

    关闭子窗体时,要刷新父窗体,百度了很多像使用“window.opener.location.reload();”都不行,和easyui框架是有区别的 在子窗体里写Response.Write(&quo ...

  10. Android自动提示控件:AutoCompleteTextView和MultiAutoCompleteTextView

    在输入框中输入我们想要输入的信息就会出现其他与其相关的提示信息,这种效果在Android中是用AutoCompleteTextView实现的. 一.AutoCompleteTextView:单一匹配 ...