JavaScript数组合并的几种方式

JavaScript用四种方式实现两个数组的合并

循环遍历（本例只用forEach和for...of）
扩展运算符
contact
apply

push()的定义和用法：push() 方法可向数组的末尾添加一个或多个元素，并返回新的【长度】。

var array1 = [1,2,3,4];

var array2 = ["apple","orange","banana","pear"];

描述：将两个已知数组array1和array2，合并成为一个新的数组。

目标：得到一个新的数组[1,2,3,4,"apple","orange","banana","pear"];

（注意：以下demo每部分的代码都是独立的，所有的array1和array2的值都是原始数据）

直接用push(不成功)

// 如果在输入后面添加一个元素，直接push就可以了，例如给array1追加一个5，

array1.push(5);

console.log(array1);//[ 1, 2, 3, 4, 5 ]

//如果要添加一个数组，直接push 得到的不是想要的结果

array1.push(array2)

console.log(array1);//[ 1, 2, 3, 4, [ 'apple', 'orange', 'banana', 'pear' ] ]

下面细说几种合并能合并成功的方式。

1、循环合并

//循环合并
//forEach循环
array2.forEach(item=>{array1.push(item)
})
console.log(array1);//[ 1, 2, 3, 4, 'apple', 'orange', 'banana', 'pear' ]//for...of 循环for(var item of array2){array1.push(item);}console.log(array1);//[ 1, 2, 3, 4, 'apple', 'orange', 'banana', 'pear' ]

2、用扩展运算符...来实现

//先看下...的使用规则console.log(array2);//[ 'apple', 'orange', 'banana', 'pear' ]
console.log(...array2);//apple orange banana pear//看push的定义，只能添加一个或者多个元素，所以我们可以把需要添加的数组用...展开array1.push(...array2)//实现代码console.log(array1.length)//8
console.log(array1)//[ 1, 2, 3, 4, 'apple', 'orange', 'banana', 'pear' ]

3、用contact

定义和用法：concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

语法：arrayObject.concat(arrayX,arrayX,......,arrayX)

var array3 = array1.concat(array2);
console.log(array1);//[1,2,3,4]证明不会改变原数组
console.log(array3);//[ 1, 2, 3, 4, 'apple', 'orange', 'banana', 'pear' ]

4、apply

Array.prototype.push.apply(array1,array2);
console.log(array1)//[ 1, 2, 3, 4, 'apple', 'orange', 'banana', 'pear' ]

JavaScript数组合并的几种方式相关推荐

PHP数组合并的几种方式
1 "+": 直接将两个数组的值合并成为一个数组: $a = [1,2,3,'a'=>'a']; $b = ['a'=>'b',4,5,'b'=>'c',6,7, ...
html中数组的定义,javascript中数组定义的几种方式是什么？
javascript中怎么定义数组?下面本篇文章给大家介绍一下javascript数组定义的几种方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.什么是数组数组就是一组数据 ...
JS数组遍历的几种方式
JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比第一种:普通for循环代 ...
JavaScript 数组遍历的五种方法（转）
转自:JavaScript 数组遍历的五种方法这篇文章主要介绍了JavaScript 数组遍历的五种方法,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下在使用 JavaS ...
数组拼接html js,js数组合并的几种方法
JS合并数组的几种方法及优劣比较 var datas = [ ['红色', '蓝色'], ['XL'], ['图片', '文字'] ]; 如何将let datas = [[1, 2], [3,0,5 ...
java中打印输出数组内容的三种方式
今天输出数组遇到问题,学习一下打印输出数组内容的几种方式错误示范:System.out.println(array); //这样输出的是数组的首地址,而不能打印出数组数据.(唉,我开始就是这么写的. ...
JavaScript事件处理程序的3种方式
最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,首先跟大家在马海祥博客上跟大家分享的是JavaScript ...
javascript 数组合并与去重
一.数组合并的两种方法 1.concat--合并数组,并且不去重 var arr1 = ["ab","bc","de","fg&q ...
Javascript事件绑定的几种方式
Javascript事件绑定的几种方式来源:http://www.cnblogs.com/rainman/archive/2009/02/11/1387955.html 上篇文章讲到了事件绑定的3中 ...

JavaScript数组合并的几种方式

JavaScript用四种方式实现两个数组的合并

1、循环合并

2、用扩展运算符...来实现

3、用contact

4、apply

JavaScript数组合并的几种方式相关推荐

最新文章

热门文章

JavaScript数组合并的几种方式

JavaScript用四种方式实现两个数组的合并

1、循环合并

2、 用扩展运算符...来实现

3、用contact

4、apply

JavaScript数组合并的几种方式相关推荐

最新文章

热门文章

2、用扩展运算符...来实现