javascript合并两个数组最简单的实现方法


Posted in Javascript onSeptember 14, 2019

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

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 相关文章推荐
javascript修改表格背景色实例代码分享
Dec 10 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
JavaScript闭包详解
Feb 02 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
Bootstrap进度条学习使用
Feb 09 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 #Javascript
Layui表格行工具事件与数据回填方法
Sep 13 #Javascript
layui使用表格渲染获取行数据的例子
Sep 13 #Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 #Javascript
layui表格数据复选框回显设置方法
Sep 13 #Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 #Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 #Javascript
You might like
浅析PHP Socket技术
2013/08/02 PHP
php Imagick获取图片RGB颜色值
2014/07/28 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
微信自定义分享php代码分析
2016/11/24 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
js不是基础的基础
2006/12/24 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
Django异步任务线程池实现原理
2019/12/17 Python
Python中url标签使用知识点总结
2020/01/16 Python
.NET是怎么支持多种语言的
2015/02/24 面试题
集体婚礼证婚词
2014/01/13 职场文书
保险专业自荐信范文
2014/02/20 职场文书
低碳环保口号
2014/06/12 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL
Redis基本数据类型String常用操作命令
2022/06/01 Redis
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server