ES5与ES6中的数组操作方法简单介绍
许多同学在写javascript代码的时候都习惯于使用顺手和常用的方法,比如说在操作数组时习惯使用for,whlie循环,在枚举对象时,习惯使用for in,其实在ES5和ES6出来以后,有很多新的操作数组和对象的方法,这里我们来重点看一下一些功能强大,但又往往被我们忽视的操作方法。
先来定义一个简单的数组。
var arr = [1,2,3,4,5,6];
1.forEach()方法
forEach主要用来查看数据内部结构,相当于for循环,方法的第一个参数接受一个回到函数,该回调函数又接受三个参数(正在遍历的当前元素,该元素的下标,数组),在forEach里面return不会打断循环,该方法会完全遍历整个数组的所有元素,该回调函数不会产生返回值,即使return也不会有返回值。方法的第二个参数可以修改当前回调函数的this指向,如果不传递第二个参数,默认回调函数中的this是指向window的,返回值为undefined
var forEachArr = arr.forEach((value,index,arr) => { console.log(value); },this); console.log(forEachArr);//undefined
2.some()方法
some主要用来遍历数组,只要数组中有一个元素满足条件就返回true,返回值为布尔值。
var someArr = arr.some((value,index) => { return value > 3; }); console.log(someArr);//true
3.every()方法
every主要用来遍历数组,必须所有元素都满足条件才返回true,否则返回false,返回值为布尔值。
var everyArr = arr.every((value,index) => { return value > 3; }); console.log(everyArr);//false
4.map()方法
map可以理解主要用来修改遍历数据,参数形式和forEach一样,返回值为新数组,有可能会改变原数组。
var mapArr = arr.map((value,index,arr) => { return value + '666666'; },this); console.log(mapArr);//["1666666", "2666666", "3666666", "4666666", "5666666", "6666666"]
5.filter()方法
filter可以理解主要用来过滤删除数据,根据设定的条件来过滤掉不要的元素,参数形式和forEach一样,返回值为新数组,有可能会改变原数组。
var filterArr = arr.filter((value,index,arr) => { if(value > 2){ return true; } },this); console.log(filterArr);//[3, 4, 5, 6]
6.reduce()方法
reduce主要用来统计计算数据,第一个参数是一个回调函数,这个回调函数的第一个参数prev就等于是reduce方法的第二个参数,这里是0,它的第二个参数可以是任意类型,如果不传这个第二个参数,当第一次遍历开始时,默认该回调函数会使用数组的第一项元素作为回调函数的第一个参数prev,之后的遍历使用上一次统计计算出来的结果作为prev。返回值为计算出来的一个数据,可能是新数值也可能是新对象或者新数组。
var reduceArr = arr.reduce((prev,value,index,arr) => { let sum = 0; sum = prev + value; return sum; },0); console.log(reduceArr);//21
为了进一步的说明reduce方法的灵活之处,我们继续看,下面这个例子reduce方法的第二个参数传递的是一个空数组,逻辑判断如果这个空数组里不包含正在遍历的元素,就把这个元素拼接在一起,否则就把上一次的这个数组prev返回出去。这里的理解可能有点难,但是只要记住一个细节就行。
(ps:①如果reduce方法的第二个参数传递了,那么prev就等于是这个参数,并且会从原数组的第一个元素开始遍历,reduce方法的返回值和这个参数一样类型的数据。②如果reduce方法的第二个参数不传递,那个prev就等于是原数组的第一个元素,并且会从原数组的第二个元素开始遍历,reduce方法的返回值就可以由用户自定义决定)。
var arr = [1,2,3,4,4,1]; var arr1 = arr.reduce((prev,value,index,arr) => {//数组去重 if(!prev.includes(value)){ return prev.concat(value); }else{ return prev; } },[]); console.log(arr1);//[1, 2, 3, 4]
以上就是这些方法的简单介绍,希望同学们能多多使用这些新方法来写代码,一来可以用更少的代码实现更丰富的功能,二来也能提升不少逼格,所以如果你觉得这个文章对你有帮助,就请点个赞吧!
https://edu.51cto.com/lecturer/11857712.html 星星课堂web前端系列课程
https://edu.51cto.com/course/25959.html js设计模式课程
https://edu.51cto.com/course/23133.html js进阶与组件化实战课程
https://edu.51cto.com/course/24757.html jquery课程
https://edu.51cto.com/course/22392.html js基础与入门课程
https://edu.51cto.com/course/26063.html vue零基础入门课程
https://edu.51cto.com/course/22393.html xhtml与css基础入门课程

浙公网安备 33010602011771号