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

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由于泛型的擦除,用起来十分不方便 abstract class BaseQueue<T>{ abstract boolean enQueue(T x); abstract T ...

  2. js学习之数据类型

    js学习之数据类型 基础类型:number string boolean null undefined 引用类型:object array function undefined值是派生自null值的( ...

  3. mybatis一对多双向映射

    连表查询 select   id  resultType  resultMap resultType和resultMap不能同时使用 association 属性  映射到多对一中的“一”方的“复杂类 ...

  4. Spring Boot 支持 Https 有那么难吗?

    https 现在已经越来越普及了,特别是做一些小程序或者公众号开发的时候,https 基本上都是刚需了. 不过一个 https 证书还是挺费钱的,个人开发者可以在各个云服务提供商那里申请一个免费的证书 ...

  5. pythonday02基础与运算符

    今日概要 1.循环 2.字符串格式化 3.运算符 4.编码 if的嵌套 score = input('请输入成绩') score_int = int(score) if score_int >= ...

  6. JS闪电打字特效

    HTML <div class="page page-thunder-to-text"> <input id="input" type=&qu ...

  7. 查看centos中的用户和用户组和修改密码

    查看centos中的用户和用户组 1.用户列表文件: vim /etc/passwd/ 2.用户组列表文件: vim /etc/group 3.查看系统中有哪些用户: cut -d : -f /etc ...

  8. node爬虫的几种简易实现方式

    说到爬虫大家可能会觉得很NB的东西,可以爬小电影,羞羞图,没错就是这样的.在node爬虫方面,我也是个新人,这篇文章主要是给大家分享几种实现node 爬虫的方式.第一种方式,采用node,js中的 s ...

  9. Unity移动游戏加载性能和内存管理-学习笔记

    前言 正在学习Doctor 张.鑫大佬的移动游戏加载性能和内存管理,内容非常非常的干,所以我烧了很多开水,边喝边看,一边拿小本几做好笔记 本文只是关于前2章的内容笔记,关于各种资源的加载耗时 纹理资源 ...

  10. 版本管理·玩转git(快速入门git)

    如果你用过Word文档写过文章,那么你一定会有这样的经历. 我觉得某一段或者某一句写得不够好,但是,删掉之后我可能会后悔把它删掉了,进而又想把删掉的段落找回来,这时,你想到了一个好办法,将每次的修改都 ...