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 更严格的相等 [译]
Sep 20 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 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
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
socket.io实现在线群聊功能
2017/04/07 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
eclipse创建python项目步骤详解
2019/05/10 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
python如何设置静态变量
2020/09/07 Python
Python 实现一个简单的web服务器
2021/01/03 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
文明村创建实施方案
2014/03/27 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
篮球比赛口号
2014/06/10 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
银行求职自荐书
2014/06/25 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
反邪教观后感
2015/06/11 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
银行求职信怎么写
2019/06/20 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js