12种数组的迭代方法【下篇】

一、迭代方法:

❑ every():对数组每一项都运行传入的函数,如果对每一项函数都返回true,则这个方法返回true。

❑ filter():对数组每一项都运行传入的函数,函数返回true的项会组成数组之后返回。

❑ forEach():对数组每一项都运行传入的函数,没有返回值。

❑ map():对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组。

❑ some():对数组每一项都运行传入的函数,如果有一项函数返回true,则这个方法返回true。

这些方法都不改变调用它们的数组。

1、在这些方法中,every()和some()是最相似的,都是从数组中搜索符合某个条件的元素。

对every()来说,传入的函数必须对每一项都返回true,它才会返回true;否则,它就返回false。

而对some()来说,只要有一项让传入的函数返回true,它就会返回true。

2、filter()方法。这个方法基于给定的函数来决定某一项是否应该包含在它返回的数组中。

非常适合从数组中筛选满足给定条件的元素。

3、在这些方法中,map()和forEach()是比较类似的,只是forEach()没有返回值,map()是一定要return的。

map()方法也会返回一个数组。这个数组的每一项都是对原始数组中同样位置的元素运行传入函数而返回的结果。

forEach()方法。这个方法只会对每一项运行传入的函数,没有返回值。本质上,forEach()方法相当于使用for循环遍历数组

二、迭代器方法:

1、在ES6中,Array的原型上暴露了3个用于检索数组内容的方法:keys()、values()entries()

keys()返回数组索引的迭代器;

values()返回数组元素的迭代器;

entries()返回索引/值对的迭代器。

image.png

2、使用ES6的解构可以非常容易地在循环中拆分键/值对:

image.png

三、断言函数:

1、ECMAScript也允许按照定义的断言函数搜索数组,每个索引都会调用这个函数。断言函数的返回值决定了相应索引的元素是否被认为匹配。

断言函数接收3个参数:元素、索引和数组本身。其中元素是数组中当前搜索的元素,索引是当前元素的索引,而数组就是正在搜索的数组。断言函数返回真值,表示是否匹配。

find()findIndex() 方法使用了断言函数。这两个方法都从数组的最小索引开始。

find()返回第一个匹配的元素;

findIndex()返回第一个匹配元素的索引。

这两个方法也都接收第二个可选的参数,用于指定断言函数内部this的值。

image.png

2、找到匹配项后,这两个方法都不再继续搜索。

image.png

3、我们发现它们的语法与forEach等十分相似,其实不光语法,find(或findIndex)在参数及其使用注意事项上,均与forEach一致。

4、其鸭式辨型写法也与forEach方法一致。

四、归并方法:

ECMAScript为数组提供了两个归并方法:**reduce()**和reduceRight()。这两个方法都会迭代数组的所有项,并在此基础上构建一个最终返回值。reduce()方法从数组第一项开始遍历到最后一项。而reduceRight()从最后一项开始遍历至第一项。

1、 reduce() 方法接收一个方法作为累加器,数组中的每个值(从左至右) 开始合并,最终为一个值。

语法:arr.reduce(fn, initialValue)

fn 表示在数组每一项上执行的函数,接受四个参数:

  • previousValue 上一次调用回调返回的值,或者是提供的初始值
  • value 数组中当前被处理元素的值
  • index 当前元素在数组中的索引
  • array 数组自身

image.png

可以使用ES6写法更加简洁:

array.reduce((p, v) => p * v); // 24
复制代码

以上回调被调用4次,每次的参数和返回见下表:

callback previousValue currentValue index array return value
第1次 1 1 0 [1,2,3,4] 1
第2次 1 2 1 [1,2,3,4] 2
第3次 2 3 2 [1,2,3,4] 6
第4次 6 4 3 [1,2,3,4] 24

reduce 一样支持鸭式辨型,具体请参考every方法鸭式辨型写法。

2、reduceRight() 方法接收一个方法作为累加器,数组中的每个值(从右至左)开始合并,最终为一个值。除了与reduce执行方向相反外,其他完全与其一致,请参考上述 reduce 方法介绍。

五、基于ECMAScript 2015(ES6)规范

1、该方法基于ECMAScript 2015(ES6)规范,同 values 方法功能相同。

语法:arrSymbol.iterator

var array = ["abc", "xyz"];
var iterator = array[Symbol.iterator](); 
console.log(iterator.next().value); // abc 
console.log(iterator.next().value); // xyz
复制代码

猜你喜欢

转载自juejin.im/post/7042942402440462343