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 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
jquery实现垂直手风琴导航栏
Feb 18 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
PHP4 与 MySQL 交互使用
2006/10/09 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
Python操作列表的常用方法分享
2014/02/13 Python
django中的setting最佳配置小结
2017/11/21 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
公司董事长岗位职责
2014/06/08 职场文书
自我推荐信怎么写
2015/03/24 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android