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

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. python3学习-pickle模块

    pickle提供了一个简单的持久化功能.可以将对象以文件的形式存放在磁盘上. 基本接口: pickle.dump(obj, file, [,protocol]) 注解:将对象obj保存到文件file中 ...

  2. 8.14 day32 TCP服务端并发 GIL解释器锁 python多线程是否有用 死锁与递归锁 信号量event事件线程q

    TCP服务端支持并发 解决方式:开多线程 服务端 基础版 import socket """ 服务端 1.要有固定的IP和PORT 2.24小时不间断提供服务 3.能够支 ...

  3. 【原创】微信小程序支付java后台案例(公众号支付同适用)(签名错误问题)

    前言 1.微信小程序支付官方接口文档:[点击查看微信开放平台api开发文档]2.遇到的坑:预支付统一下单签名结果返回[签名错误]失败,建议用官方[签名验证工具]检查签名是否存在问题.3.遇到的坑:签名 ...

  4. J.U.C并发包(1)

    J.U.C并发包(1) AbstractQueuedSynchronizer AbstractQueuedSynchronizer是JUC并发包中锁的底层支持,AbstractQueuedSynchr ...

  5. ubuntu16.04安装Ros(kinetic版本)【亲测好用】

    准备 1.ubuntu16.04 64位桌面版 ps:关于系统的下载和安装这里不做介绍,请自行百度,不是介绍重点 2.更改源 图上的几个勾默认是选上的,如果没有选上,选成上图这样(如果修改过勾,点击关 ...

  6. net core 3.0 之Grpc新特性小试牛刀

      相信微服务大家伙都有听说和知道,好处弊端咱也不多说了,Grpc算是一个比较全面的微服务框架,也得到微软的支持 总结下来就是,跨平台,可靠,通信快,扩展性强,网络消耗小,模板多语言通用 光说好处,没 ...

  7. C#中的变量祥解

    一.C#数据类型: A:值类型 值类型变量可以直接分配一个值,它是从System.ValueType派生而来,值类型直接包含数据,比如int,char,float,他们分别存储整型数据,字符,浮点数, ...

  8. Python-demo(video)

    #!/usr/bin/env python# #-*-coding:utf-8-*-import requestsimport randomimport timedef get_json(url): ...

  9. Redis学习总结(二)--Redis数据结构

    Redis支持六种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合). 结构类型 存储的值 string 可以是字符串.浮 ...

  10. jvm系列(四):jvm调优-命令篇

    运用jvm自带的命令可以方便的在生产监控和打印堆栈的日志信息帮忙我们来定位问题!虽然jvm调优成熟的工具已经有很多:jconsole.大名鼎鼎的VisualVM,IBM的Memory Analyzer ...