JS高级:数组方法map、filter、find等的用法与实现

map()

使用场景 :对数组中每一个值都进行操作,返回数组中所有的值
注意:使用时需要 return
JS高级:数组方法map、filter、find等的用法与实现_第1张图片
JS高级:数组方法map、filter、find等的用法与实现_第2张图片

JS高级:数组方法map、filter、find等的用法与实现_第3张图片
代码实现:map函数传入两个参数,第一个是要执行的函数,第二个是this指向。首先需要判断传入的第一个函数是否为 function 类型,不是则返回。通过arr保存this,创建一个空数组temp,利用for循环拿到数组中的每个元素,将执行完的fn函数返回的内容保存再restlu中,利用call改变this指向,将元素值,下标值以及原数组传给 fn 函数,再将返回的元素加入到空数组temp中,最后将整个temp返回。
JS高级:数组方法map、filter、find等的用法与实现_第4张图片
测试:
在这里插入图片描述
在这里插入图片描述


find()

使用场景:遍历数组中的每个值,找出符合条件的数组值。
注意:使用时需要return
JS高级:数组方法map、filter、find等的用法与实现_第5张图片
JS高级:数组方法map、filter、find等的用法与实现_第6张图片
代码实现:总体思路与map一样,不同之处在于find里面是通过判断函数中的执行条件是否返回true,若为true则把这个数组元素返回,并中断循环。
JS高级:数组方法map、filter、find等的用法与实现_第7张图片
测试:
JS高级:数组方法map、filter、find等的用法与实现_第8张图片
在这里插入图片描述


filter()

使用场景:对数组中的每一个值都进行筛选,返回符合条件的数据。
注意:使用时需要return
JS高级:数组方法map、filter、find等的用法与实现_第9张图片
JS高级:数组方法map、filter、find等的用法与实现_第10张图片
代码实现:通过传入的 fn 判断数组中的元素是否符合条件,若符合则将该元素放入创建好的空数组temp中并返回出去。
JS高级:数组方法map、filter、find等的用法与实现_第11张图片
测试:
JS高级:数组方法map、filter、find等的用法与实现_第12张图片
在这里插入图片描述


every()

使用场景:遍历数组中的元素,若有一个不满足条件的则直接返回false,并不会执行后面的元素。
注意:使用时需要return
JS高级:数组方法map、filter、find等的用法与实现_第13张图片
JS高级:数组方法map、filter、find等的用法与实现_第14张图片
代码实现:返回的是一个Boolean值,用isTrue来保存,将 fn 中的执行函数返回的Boolean值保存在isTrue中,若为false则直接中断循环,将isTrue返回出去。
JS高级:数组方法map、filter、find等的用法与实现_第15张图片
测试:
JS高级:数组方法map、filter、find等的用法与实现_第16张图片
在这里插入图片描述


some()

使用场景:判断是否有元素符合fun条件,如果有一个元素符合fun条件,则循环会终止,并返回true,比如判断数组中是否存在某个值。
注意:使用时需要return
JS高级:数组方法map、filter、find等的用法与实现_第17张图片
JS高级:数组方法map、filter、find等的用法与实现_第18张图片
代码实现:some的实现思路与 every 的是一样的,不同之处在于 some 是遇到符合条件的元素才返回true,并且中断循环。
JS高级:数组方法map、filter、find等的用法与实现_第19张图片
测试:
JS高级:数组方法map、filter、find等的用法与实现_第20张图片
在这里插入图片描述


forEach()

使用场景:用于遍历拿到每一个数组元素。
注意:使用时不需要return
在这里插入图片描述
JS高级:数组方法map、filter、find等的用法与实现_第21张图片
代码实现:forEach的实现比较简单,只需要遍历数组元素并将每个元素传入fn中作为参数即可。
JS高级:数组方法map、filter、find等的用法与实现_第22张图片
测试:
在这里插入图片描述
JS高级:数组方法map、filter、find等的用法与实现_第23张图片


reduce()

使用场景:对数组进行累加操作。
注意:使用时需要return
JS高级:数组方法map、filter、find等的用法与实现_第24张图片
JS高级:数组方法map、filter、find等的用法与实现_第25张图片
代码实现:reduce 接受两个参数,第一个是回调函数,第二个是初始值,实现函数中要判断有没有传初始值value,如果没有则从第二个元素开始遍历,并且将前一个元素pre设置成第一个元素,如果有传初始值value,则从第一个元素开始遍历,pre值则使用初始值,最后将start跟pre传给fn函数。再把pre返回出去.
JS高级:数组方法map、filter、find等的用法与实现_第26张图片
测试:
JS高级:数组方法map、filter、find等的用法与实现_第27张图片
JS高级:数组方法map、filter、find等的用法与实现_第28张图片

你可能感兴趣的:(JS,javascript,前端)