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操作cookie_获取与修改代码
May 21 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 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/11/25 PHP
windows xp下安装pear
2006/12/02 PHP
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
YII实现分页的方法
2014/07/09 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
[原创]图片分页查看
2006/08/28 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
解密Python中的描述符(descriptor)
2015/06/03 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
python实现淘宝购物系统
2019/10/25 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
Java程序员面试题
2013/07/15 面试题
开工仪式策划方案
2014/05/23 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
求职自我评价怎么写
2015/03/09 职场文书