ES6新增语法(三)——数组新增 7 种方法介绍

forEach:遍历数组

foreach只是对数组进行遍历,并不会改变原来的数组。

示例:打印数组中的每个元素。

let arr = ['a','b','c'];

arr.forEach( item=>{

console.log('当前元素',item)

})

上述使用了箭头函数,省略了括号,如果需要数组下标的时候,可以把标加上,改写成:

let arr = ['a','b','c'];

arr.forEach( (item,index)=>{

console.log('当前元素',item)

console.log('当前元素下标',index)

})

如果是给同级的几个元素遍历设置背景颜色时,运行发现失败,代码如下:

window.onload = function(){

let aDiv =document.getElementsByTagName('div') 

aDiv.forEach(item=>{ 

 item.style.background ="red"

})}

运行报错:Uncaught TypeError: aDiv.forEach is not a function at window.onload

报错主要是因为 aDiv 并不是一个真正的数组,它是一个类数组。此时我们需要借助from方法。

from:转换数组

from()方法把类数组转换成真正的数组。

使用语法:Array.from(类数组)

此时我们只需要借助from方法,把aDiv转换成真正的数组,就可以使用forEach遍历,给每个元素设置背景。代码如下:

window.onload =function(){letaDiv =document.getElementsByTagName('div')Array.from(aDiv).forEach(item=>{  item.style.background ="red"})}

map:映射

原数组被映射成一个新的数组。返回值是一个新数组,不改变原来的数组。

将一组成绩映射成是否及格的布尔值,判断大于60分就算及格,否则就不及格。代码如下:

letgrad = [55,66,77,88]letarr2 = grad.map(function(item){returnitem>=60})console.log("arr2",arr2)

filter:过滤

Filter过滤数组,进去一堆出来几个,返回过滤后的新数组。

比如去掉数组中的偶数,只保留奇数。

letnum = [1,2,3,4,5,6,7,8]letodd = num.filter(function(item){returnitem%2})console.log("odd",odd)

reduce:汇总

进去一堆数据,出来一个。比如求和或者求平均数。

以下是求平均数的一个实例:

letnum = [1,2,3,4,5,6,7,8]letevr = num.reduce((tmp,item,index)=>{if( index

上述的tmp是中间的一个结果,最开始是第一个值。

find:查找

在数组中找到符合要求的对象,和filter的区别是找到符合要求的对象就停止搜索了,返回的是一个对象。

查找姓名叫王五的这个人,代码如下:

letpers = [ {name:'倩倩',age:18}, {name:'张三',age:25}, {name:'王五',age:60}]letper = pers.find(function(item){returnitem.name ==='王五'})console.log('per',per)//per {name: "王五", age: 60}

erver()、some()

every目标数组中每一个对象都符合条件则返回true,否则返回false。

some目标数组中有一个或一个以上符合条件就会返回true,否则返回false。

let pers = [ 

{name:'倩倩',age:18},

 {name:'张三',age:25}, 

{name:'王五',age:60}

]

//年龄是否都小于30

let isYoung = pers.every(item=>{

returnitem.age <30

})

//年龄有小于30的

let haveYoung = pers.some(item=>{

returnitem.age <30

})

console.log("isYoung",isYoung)  // false

console.log("haveYoung",haveYoung)  //true

你可能感兴趣的:(ES6新增语法(三)——数组新增 7 种方法介绍)