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 学习书 推荐
Jun 13 Javascript
Jquery cookie操作代码
Mar 14 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
小程序开发之模态框组件封装
Apr 23 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 Javascript
利用node.js开发cli的完整步骤
Dec 29 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数据库开发知多少
2006/10/09 PHP
PHP 在线翻译函数代码
2009/05/07 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
python在windows下实现备份程序实例
2014/07/04 Python
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
美国精油公司:Plant Therapy
2019/05/17 全球购物
大班下学期幼儿评语
2014/12/30 职场文书
护士实习自荐信
2015/03/06 职场文书
通知的格式范文
2015/04/27 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
环境卫生标语
2015/08/03 职场文书
高一军训感想
2015/08/07 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
MySQL RC事务隔离的实现
2022/03/31 MySQL
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers