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

forEach：遍历数组

 

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

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

1. let arr = ['a','b','c']; 
2. arr.forEach(item=>{ 
3.  console.log('当前元素',item) 
4. }) 

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

1. let arr = ['a','b','c']; 
2. arr.forEach((item,index)=>{ 
3.  console.log('当前元素',item) 
4.  console.log('当前元素下标',index) 
5. }) 

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

1. window.onload = function(){ 
2.  let aDiv = document.getElementsByTagName('div') 
3.  aDiv.forEach(item=>{ 
4.   item.style.background = "red" 
5.  }) 
6. } 

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

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

from：转换数组

 

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

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

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

1. window.onload = function(){ 
2.  let aDiv = document.getElementsByTagName('div') 
3.  Array.from(aDiv).forEach(item=>{ 
4.   item.style.background = "red" 
5.  }) 
6. } 

map:映射

 

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

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

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

filter:过滤

 

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

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

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

reduce:汇总

 

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

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

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

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

find:查找

 

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

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

1. let pers = [ 
2.  { name:'倩倩',age:18 }, 
3.  { name:'张三',age:25 }, 
4.  { name:'王五',age:60 } 
5. ] 
6. let per = pers.find(function(item){ 
7.  return item.name === '王五' 
8. }) 
9. console.log('per',per)//per {name: "王五", age: 60} 

erver()、some()

 

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

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

1. let pers = [ 
2.  { name:'倩倩',age:18 }, 
3.  { name:'张三',age:25 }, 
4.  { name:'王五',age:60 } 
5. ] 
6. //年龄是否都小于30 
7. let isYoung = pers.every(item=>{ 
8.  return item.age < 30 
9. }) 
10. //年龄有小于30的 
11. let haveYoung = pers.some(item=>{ 
12.  return item.age < 30 
13. }) 
14. console.log("isYoung",isYoung) // false 
15. console.log("haveYoung",haveYoung) //true 

原文链接：https://www.toutiao.com/i6985044488829846049/