在开发的过程中,我们很多时候会遇到需要将两个数组合并成一个数组的情况出现。

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6]; // 将arr1和arr2合并成为[1, 2, 3, 4, 5, 6]

这里总结一下在JavaScript中合并两个数组的方法。

for循环数组

这个方式是最简单的,也是最容易实现的。

var arr3 = [];

// 遍历arr1
for (var i = 0; i < arr1.length; i++) {
arr3.push(arr1[i]);
} // 遍历arr2
for (var j = 0; j < arr2.length; j++) {
arr3.push(arr2[j]);
} console.log(arr3); // [1,2,3,4,5,6]

另外也可以用增强型for循环或forEach()方法去实现。

for循环这种方式几乎没有任何问题,只是很多追求精简编程的人会鄙视这种方式(摊手)。

concat()方法

JavaScript的Array对象中提供了一个concat()方法,作用是连接两个或更多的数组,并返回一个新的数组。

var arr3 = arr1.concat(arr2);

console.log(arr3); // [1,2,3,4,5,6]

要注意的是,concat()方法不会改变原数组,而是返回一个新的数组。这样,当我们需要进行多次数组合并的时候,就会造成内存浪费。

apply()方法

函数的apply方法有一个特性,那就是func.apply(obj,argv),argv是一个数组。所以我们可以利用这点。

arr1.push.apply(arr1, arr2);

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

简单理解就是,上面这段代码可以看做是:

arr1.push(4, 5, 6);

这种方式只用一行代码就解决了问题,可以说非常6了。

总结

上面三种方法在常规使用上其实并没有区别,只是要另外注意两个小问题:

1.以上3种合并方法在举例的时候并没有考虑过两个原数组谁的长度更小,好的做法是预先判断两个原数组哪个更大,然后使用大数组合并小数组,这样就能减少了数组元素操作的次数,提高了代码的执行效率。

2.有时候我们既不希望原数组(arr1、arr2)改变,又不想手动新增一个变量,这时就只能使用concat()方法了。

"生命中曾拥有过的所有灿烂,可能终究都需要用寂寞去偿还。"

javascript合并两个数组的更多相关文章

  1. JS合并两个数组的方法

    JS合并两个数组的方法 我们在项目过程中,有时候会遇到需要将两个数组合并成为一个的情况.比如: var a = [1,2,3]; var b = [4,5,6]; 有两个数组a.b,需求是将两个数组合 ...

  2. java学习之—合并两个数组并排序

    /** * 合并两个数组并排序 * Create by Administrator * 2018/6/26 0026 * 下午 4:29 **/ public class MergeApp { pub ...

  3. 合并两个数组并去重(ES5和ES6两种方式实现)

    合并两个数组并去重(ES5和ES6两种方式实现) ES6实现方式 let arr1 = [1, 1, 2, 3, 6, 9, 5, 5, 4] let arr2 = [1, 2, 5, 4, 9, 7 ...

  4. Java如何合并两个数组?

    Java中,如何合并两个数组? 示例 本例展示了如何使用List类的List.Addall(array1.asList(array2))方法和Array类的Arrays.toString()方法将两个 ...

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

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

  6. 合并两个数组 以KEY 作为键

    <?php     $a= array(         array(             'ID'=> 2         ) );   $b= array(         arr ...

  7. Javascript 连接两个数组

    JS合并两个数组的方法 我们在项目过程中,有时候会遇到需要将两个数组合并成为一个的情况.比如: var a = [1,2,3]; var b = [4,5,6]; 有两个数组a.b,需求是将两个数组合 ...

  8. Js $.merge() 函数(合并两个数组内容到第一个数组)

    定义和用法 $.merge() 函数用于合并两个数组内容到第一个数组. 语法 $.merge( first, second )   参数 描述 first Array类型 第一个用于合并的数组,合并后 ...

  9. 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 = {} ...

随机推荐

  1. 【Java笔记】【Java核心技术卷1】chapter3 D1JavaStandard

    package chapter3;/*有包名,命令行编译javac -d . 名字.java(注意空格)运行时用java chapter3.JavaStandard*/ public/*访问修饰符*/ ...

  2. react学习(二)--元素渲染

    元素用来描述你在屏幕上看到的内容: const element = <h1>Hello, world</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普 ...

  3. sublime text 3 15个常用插件介绍

    1.ColorPicker 功能:调色板(需要输入颜色时,可直接选取颜色) 使用:快捷键Windows: ctrl+shift+c 2.Emmet 功能:编码快捷键,前端必备 使用:在输入代码段后,按 ...

  4. 发布一个自己的jar包给全球人使用

    目录 项目准备 sonatype 注册 申请sonatype工单 gpg配置 项目配置 依赖oss-parent 自定义配置 pom配置 全局settings配置 发布 验证 maven 项目对于我们 ...

  5. XAMPP/LAMPP到底在哪里启用APACHE2的rewrite

    XAMPP/LAMPP是一套我们在个人建站过程中非常便捷常用的集成环境.特别是对于学习PHP开发和建站非常便捷. 最近在使用CentOS7环境下的XAMPP过程中,遇到了一个问题,也就是apache2 ...

  6. 扩展GroupBox控件

    1.GroupBox的边框颜色可以自行设置: 2.GroupBox可以设置边框的为圆角: 3.设置GroupBox标题在控件中的位置. 4.设置GroupBox标题的字体和颜色. 具体实现步骤Pane ...

  7. 树莓派dht11,土壤湿度传感器,继电器的使用。树莓派云灌溉(二)

    关于传感器的一些说明 我的想法是这样的 我尽量用易于理解的语言去说我的想法 首先,土壤湿度传感器和dh11会获取数据,然后树莓派会处理这些数据,读出土壤温湿度和空气温湿度,并将这些数据上传到云服务器, ...

  8. python3 how to creat alphabet

    Python: How To Generate a List Of Letters In The Alphabet  Method 1# First we need to figure out the ...

  9. nginx配置ssl证书实现https加密请求详解

    原文链接:http://www.studyshare.cn/software/details/1175/0 一.加密方式 1.对称加密 所谓对称加密即:客户端使用一串固定的秘钥对传输内容进行加密,服务 ...

  10. Socket通信封装MIna框架--含羞代放

    目录 核心类 各个击破 IoService IoFilter IoHandler 总结 # 加入战队 微信公众号 Mina异步IO使用的Java底层JNI框架,Mina提供服务端和客户端,将我们的业务 ...