数组方法深入扩展(遍历forEach,filter,reduce等)

原创 灿烂_ 随笔 ECMAScript 352阅读 2018-11-14 16:47:16 举报

先写入数据API,并在html中创建了5个li,接下来的数组方法都是通过这个数组来应用,并通过模拟每个方法来明白其实现的原理。

除了forEach方法,只表示单纯的遍历,其他方法都是在遍历的基础上有多了新的功能,比如筛选、判断等。

1.forEach()

forEach 遍历 只有数组可以用
forEach 函数里 有两个参数,第一个匿名函数,第二个参数规定当前数组的this指向,可写可不写,默认是指向window
匿名函数中有三个参数,依次是ele,index,self
ele,数组里的当前一条数据 index数组中当前第几个元素 self 数组本身

仿写:

详解:
__arr是调用这个函数方法的数组
this指向调用自己的元素,param是第二个参数,规定this的指向
arguments能调用 之前一定要写出数组的length属性来 arguments[1]是这个数组本身的第二个元素

2.filter() 过滤

数组的筛选 条件的过滤 都用这个方法
function->ele,index,self this 需要有返回值 返回true/false 为新数组存在/不存在的数据
不会改变原数组 filter() => []

筛选性别是male的数据
仿写:
验证:筛选性别是female的数据。

3.map()

map方法是映射 x -> y 集中化操作 改变新数组 原数组也会改变
会返回新数组 ,参数同上。
function ele index self this

然后将newarr数组里的数据改变,会发现原数组也会相应改变。
仿写
验证:

4.every

every方法,遍历每一个元素是否符合某个规则,然后返回true、false 有点像逻辑与。注:数组整体都需要符合一个规则才会判断true

判断数组中每个人的年龄是否大于10、大于20;
仿写

flag 默认为true,若数组中有一个不符合条件就返回false

验证:

5.some()

返回true、false 有点像逻辑或
数组中只要有一个符合某个规则,就可以返回true

检查数组中是否有人的年龄等于15.
仿写

flag 默认为false,若数组中有一个不符合条件就返回true

验证:检查数组中是否有年龄大于15岁的。

6.reduce //会返回一个值

function 里有四个形参,分别是:prevValue以前值,curValue当前值(ele),index,self
第二个参数initialValue 初始化值
并且没有this指向。

注:prevValue第一次是函数的第二个参数,即定义好的initialValue,第二次以及后面的每一次就都是return的返回值

给数组里每个人的名字后面依次加1个1,2个1,3个1...
仿写并增加this指向功能
验证:增加了第三个参数,规定this指向。
reduce方法应用:将下面的cookie变成对象,方便取数据
还有reduceRight方法,作用与reduce方法相同,只是从右开始遍历数组,这里就不介绍了。
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复