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 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
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中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python Property属性的2种用法
2015/06/21 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
django 控制页面跳转的例子
2019/08/06 Python
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
个人近期表现材料
2014/02/11 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
运动员口号
2014/06/09 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
领导干部考核评语
2015/01/04 职场文书
罚站检讨书
2015/01/29 职场文书
狂人日记读书笔记
2015/06/30 职场文书
小学教代会开幕词
2016/03/04 职场文书
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技