生动形象解释forEach、filter、map、some、every、find、findIndex

Luosunce 发布于2019-08-23 16:51 / 2956人阅读

摘要：前言从最开始学的循环遍历方法，到后来层出不穷的各种遍历方法，其实最大的区别就是应用场景的不同。我们最需要记住的就是，什么情况下用哪一种方法比较合适。

前言

从最开始学的for循环遍历方法，到后来层出不穷的各种遍历方法，其实最大的区别就是应用场景的不同。
我们最需要记住的就是，什么情况下用哪一种方法比较合适。

从挑土豆开始

这里有一堆土豆，如果换成代码，可以表示如下：

var potatos = [{ id: "1001", weight: 50 },
{ id: "1002", weight: 80 },
{ id: "1003", weight: 120 },
{ id: "1004", weight: 40 },
{ id: "1005", weight: 110 },
{ id: "1006", weight: 60 }]

同时把上面的重量（g）记录成一个数组

var w = [50, 80, 120, 40, 110, 60]

农民：我要催熟（批量操作）

我们希望把这一批土豆全部催熟一下，进行增重
可以用到forEach方法

potatos.forEach(potato => { potato.weight += 20 })

map方法说：我也可以！

potatos.map(potato => { potato.weight += 20 })

map补充了一句，我还可以把重量统计表格，更新出一份新的给你

w = potatos.map(potato => 
{ return potato.weight += 20 })

//[ 70, 100, 140, 60, 130, 80 ]

forEach和map的最大区别就在于，forEach没有返回值。
即便你给forEach加上return也没用

w = potatos.forEach(potato => 
    { return potato.weight += 20 })
    
//undefined

老板：我只要大土豆（筛选过滤）

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

var bigOnes = potatos.filter(potato => { return potato.weight > 100 })

//[ { id: "1003", weight: 120 }, { id: "1005", weight: 110 } ]

返回一个新的对象数组，并不会改变原数组

商贩：你这有没有大的啊（有符合）

旁边的小商贩嘲笑我们说，我们这都是小土豆，不中用的
那不得找一个巨无霸给他看看

当只需要判断数组中有没有符合条件的时候（一个就行）
就需要我们的some方法登场了

var hasbig = potatos.some(potato => { return potato.weight > 100 })

//true

我们的some小伙计，去土豆存放的仓库进行寻找，只要找到一个符合条件的，就回来报告true
所以并不会全部遍历，不做多余的活（性能优良）

商贩：难道全都是大的吗（全符合）

小商贩不服了，我不信你这全是大的
派了个every小伙计去检查

var allbig = potatos.every(potato => { return potato.weight > 100 })

//false

every因为要检查所有元素是否都符合条件，所以性能比较差
因此一些简单的情况，可以反向检查
比如这一例，可以换成用some检查是否有小个的，再将结果取反，就可以减少遍历，节省性能

var allbig=!potatos.some(potato => { return potato.weight <= 100 })

//false

顾客：给我个大土豆（返回一个符合的）

来了一个顾客，想要一个大土豆
find自告奋勇，我去找给他

var big = potatos.find(potato => { return potato.weight > 100 })

//{ id: "1003", weight: 120 }

find和some很类似，都是寻找符合条件的，有一个就可以
不过some进去搜罗了一圈回来报了个“有”（true），而find则把那个土豆抱了出来（返回第一个符合条件的对象）

收银员：这土豆是仓库的第几个来着（返回序号）

收银员卖完准备记录一下

“哎，这土豆是仓库的第几个？”
find说：“哎呀我光顾着抱土豆了，没看是第几个”

“你这粗心鬼，早知道让findIndex跟你一起去了”

var i = potatos.findIndex(potato=>{ return potato.weight > 100 })

//2

当需要知道所需元素的索引，就可以用findIndex

findIndex返回第一个符合条件的索引号

老板：今年收成如何呀（递归累加）

说起来还不知道今年收成到底怎么样呢
谁数学好把表格上那些土豆重量加一加
reduce说：那不得我来么

var sum = weight.reduce((sum, w) => { return w + sum },0)

//460
//并不会改变原表格

reduce()方法接收一个回调函数作为第一个参数，回调函数又接受四个参数，分别是： 
1、previousValue =>初始值或上一次回调函数叠加的值； 
2、currentValue => 本次回调（循环）将要执行的值； 
3、index=>“currentValue”的索引值； 
4、arr => 数组本身； 
reduce()方法返回的是最后一次调用回调函数的返回值；

也可以这样

  var sum = potatos.reduce((sum, p) => 
  { return p.weight + sum },0)
  
  //460

reduce能力其实不止于此，这里知道基本用法即可

总结

在土豆身上，我们学会了这些方法的基本应用场景，还有一些高阶用法，比如上面提到的reduce，可以用来扁平数组，数组去重等等，以后再进行更深入的研究与介绍
希望这篇文章对大家区分这些方法有所帮助~

超融合服务器专线服务 findIndex every some() some

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103406.html

JavaScript数组迭代（遍历）方法

摘要：正文和中新增的的数组迭代方法如下其中，是新增的，其余都是新增的。指数组后，返回过滤后的新数组。它的参数跟方法是一样的所有数组成员依次执行回调函数，直到找出第一个返回值为的成员，然后返回该成员。前言 ES5和ES6中新增了不少东西，对于数组而言，新增了不少迭代方法，让我们可以抛弃for循环，更方便的写JS代码。正文 ES5和ES6中新增的的数组迭代方法如下： forEach map...

light 2019-08-20 17:34 评论0 收藏0
forEach、map、filter、find、sort、some等易错点整理

摘要：最近手头上做了一个很大的后台管理项目，前端对复杂数据的处理要求颇高，也确实让自己发现了很多之前被忽视的细节。鸣人佐助卡卡西佐助佐助佐助但是很遗憾及更早版本也不支持。最近手头上做了一个很大的后台管理项目，前端对复杂数据的处理要求颇高，也确实让自己发现了很多之前被忽视的细节。在此特整理出来，希望不熟悉的朋友们们以后可以绕开我踩的这些坑。本文初衷在于帮助大家梳理一些数组操作上的重点和易...

AJie 2019-08-23 16:50 评论0 收藏0
数组常见的遍历循环方法、数组的循环遍历的效率对比

摘要：场景检查数组中是否含有某个东西和是对立的案例案例是否包含为对象循环遍历效率对比参考参考原生实现等方法其他参考 1 遍历数组的方法 1-1、for / while 最普通的循环效率最高兼容ie6tips:for循环更适用于循环的开始和结束已知，循环次数固定的场合；while循环更适合于条件不确定的场合 1-2、for in 兼容ie6，效率最差（效率可看最下面的对比） for in...

xfee 2019-08-23 15:14 评论0 收藏0
数组空位元素的处理

之前看到知乎上的这道题：如何不使用loop循环，创建一个长度为100的数组，并且每个元素的值等于它的下标？，在这个问题里面题主提到，他写了这么一段代码： use strict let arr = Array(100).map( (item,idx) => idx) 结果arr是一个有100个空位的数组:showImg(https://segmentfault.com/img/bVtNMu);这说...

Yujiaao 2019-08-19 17:56 评论0 收藏0
javaScript数组遍历方法总结

摘要：首次调用回调函数时，和可以是两个值之一。否则返回张三男王小毛男李四男李四返回结果为李四男方法李四对于数组中的每个元素，方法都会调用一次回调函数采用升序索引顺序，直到有元素返回。数组遍历方法 1.for循环使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。 for(var j = 0,j < arr.length;j++) { //执行代码 ...

shiguibiao 2019-08-26 10:39 评论0 收藏0