foreach、filter、find、some、every、map、reduce方法对比

前言

---

       我们最开始在对数组循环时用的最多的就是 for 循环 ，但是现在各种遍历方法层出不穷，我们如何去区分它们呢，其实最大的区别就是应用场景的不同。

从一堆西瓜开始

---

       首先假设我这里有一堆麒麟西瓜，换成代码表示为：

let watermelons = [{ id: '101', size: 40 },
               { id: '102', size: 60 },
               { id: '103', size: 120 },
               { id: '104', size: 80 },
               { id: '105', size: 90 },
               { id: '106', size: 100 }]

---

农民：给每个西瓜包装一下

---

我们希望把每个麒麟西瓜都包上一层泡沫网套：像这样（来减轻因为碰撞所带来的伤害），包装过后，西瓜的尺寸就会变大。
forEach方法首先站了出来

watermelons.forEach(watermelon => { watermelon.size+= 10 })

map方法说：我也可以

watermelons.map(watermelon => { watermelon.size+= 10 })

map又补充了一句：我还可以统计出这一堆西瓜的尺寸

watermelons.map(watermelon => {  return watermelon.size+= 10 })

//[50,70,130,90,100,110]

老板：我只要大西瓜

---

filter是过滤器的意思
从名字上看，就知道筛选过滤这样的活是filter来干的

let bigWatermelons= watermelons.filter(watermelon => { return watermelon.size > 100 })

//[ { id: '103', weight: 130 }, { id: '106', weight: 110 } ]

顾客：你们这有没有大一点西瓜

---

顾客问有没有大一点的西瓜，但是没说买，这个时候只要给顾客一个答案，有或者没有就可以了
所以some就登场了，它去西瓜堆里找，找到一个大西瓜，就出来了，告诉顾客答案。

let hasbig = watermelons.some(watermelon => { return watermelon.size > 100 })

//true

顾客：我要一个大西瓜

---

此时顾客想要一个大西瓜，我们不仅要告诉他有或没有，还要把它拿出来
这个时候就需要find把西瓜抱出来

let big = watermelons.some(watermelon => { return watermelon.size > 100 })

//[ { id: '103', weight: 130 } ]

旁边的商贩眼红大家都去买大西瓜，他就气愤愤的说：我就不信你那全是大西瓜

---

这个时候，只要找到一个小西瓜就可以确定答案了
所以这里使用every，当有一个西瓜不符合条件时，就返回答案了，不再继续找其他小西瓜

let allbig = watermelons.every(watermelon => { return watermelon.size > 100 })

//false

最后西瓜都卖出去了，统计总共多少斤

---

reduce刚好干这个活

let weight = [10,8,20,15]
let sum = weight.reduce((prev,next) => { return prev+next })

//53
//并不会改变原数据

–

将上述例子整理就有以下结论：

1.foreach()

• 相当于for循环的语法糖
• 没有返回值，只针对每个元素调用func。
• 缺点：无法使用break，return等终止循环

let arr = [9,2,8,6]
arr.forEach( (item,index) => {
    console.log("索引",index,"元素",item)
})

• 运行结果：
  

2.filter()

• 有返回值，返回一个符合func条件的数组的集合，循环所有

let arr = [9,2,8,6]
let newArr = arr.filter( (item,index) => {
   return item>6
})

• 运行结果：
  

3.find()

• 不创建新数组，不改变元素组
• 在判断中一旦某个元素符合func，立马跳出循环，返回当前符合条件的元素

let arr = [9,2,8,6]
let newArr = arr.find( (item,index) => {
   return item>6
})

• 运行结果：
  

4.some()

• 返回一个Boolean，判断是否有元素符合func，如果有一个符合条件，就会终止循环，返回true。

let arr = [9,2,8,6]
let newArr = arr.some( (item,index) => {
   return item>10
})

• 运行结果：
  

5.every()

• 返回一个Boolean，判断每一个元素是否都符合func，如果有一个不符合，就会终止循环，返回false。

let arr = [9,2,8,6]
let newArr = arr.every( (item,index) => {
   return item>1
})

• 运行结果：
  

6.map()

• 有返回值，返回一个新的数组，每个元素为调用func的结果。

 let arr = [9,2,8,6]
let newArr = arr.map( (item,index) => {
   return item > 6
})
console.log(newArr)

• 运行结果：
  

7.reduce()

• 让数组中的前项和后项做某种运算，并返回运算结果

let arr = [9,2,8,6]
let newArr = arr.reduce( (prev,next) => {
   return prev+next
})

• 运行结果：
  

---

欢迎大家谈论学习。