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
})
- 运行结果：
欢迎大家谈论学习。
