前言
我们最开始在对数组循环时用的最多的就是 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
//并不会改变原数据
–
![]()
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a0cb4bf23a683059cc28a9dcc9eb28a1.jpeg)
将上述例子整理就有以下结论:
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
})
- 运行结果:
欢迎大家谈论学习。