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 相关文章推荐
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
jQuery实现的简单百分比进度条效果示例
Aug 01 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
Vue.use源码分析
Apr 22 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 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 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
求职者应聘的自我评价
2013/10/16 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
红楼梦读书笔记
2015/06/25 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
学风建设主题班会
2015/08/17 职场文书
《小小的船》教学反思
2016/02/18 职场文书
python flask框架快速入门
2021/05/14 Python
Python Flask实现进度条
2022/05/11 Python