ES6新增语法—数组新增七种方法介绍

[[414620]]

forEach：遍历数组

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

成都创新互联云计算的互联网服务提供商,拥有超过13年的服务器租用、成都服务器托管、云服务器、虚拟主机、网站系统开发经验，已先后获得国家工业和信息化部颁发的互联网数据中心业务许可证。专业提供云主机、虚拟主机、空间域名、VPS主机、云服务器、香港云服务器、免备案服务器等。

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

 
 
 
  
  
  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(){   
  
   let aDiv = document.getElementsByTagName('div')   
  
   Array.from(aDiv).forEach(item=>{   
  
    item.style.background = "red"   
  
   })   
  
  }

map:映射

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

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

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

filter:过滤

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

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

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

reduce:汇总

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

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

 
 
 
  
  
  let num = [1,2,3,4,5,6,7,8]   
  
  let evr = num.reduce((tmp,item,index)=>{   
  
   if( index  
  
  
  return tmp+item   
  
   }else{   
  
    return (tmp+item)/num.length   
  
   }   
  
  })

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

find:查找

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

查找姓名叫王五的这个人，代码如下：

 
 
 
  
  
  let pers = [   
  
   { name:'倩倩',age:18 },   
  
   { name:'张三',age:25 },   
  
   { name:'王五',age:60 }   
  
  ]   
  
  let per = pers.find(function(item){   
  
   return item.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=>{   
  
   return item.age < 30   
  
  })   
  
  //年龄有小于30的   
  
  let haveYoung = pers.some(item=>{   
  
   return item.age < 30   
  
  })   
  
  console.log("isYoung",isYoung) // false   
  
  console.log("haveYoung",haveYoung) //true

当前题目：ES6新增语法—数组新增七种方法介绍
当前地址：http://www.shufengxianlan.com/qtweb/news14/12114.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容