js用递归遍历多维数组_JS数组的遍历上 (含forEach等方法源码)

forEach()

方法用于调用数组的每个元素(循环遍历数组中的每一个元素)，并将元素传递给回调函数。

它内部的回调函数可以传入三个参数：function(item, index, arr)

item为必填参数，表示当前元素

index为可选参数，表示当前元素的索引

arr同样为可选参数，表示当前元素所属的数组对象(正在遍历的这个数组)。

forEach源码实现：

Array.prototype.myForEach = function(callback) {for (let i = 0; i < this.length; i++) {callback(this[i], i, this)}}

对比原生：

嗯。可以看出，应该是没错的！

filter()

创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

。。官方解释比较坑，大致就是说它首先创建了一个空数组，然后筛选callback的返回值，如果返回值可以隐式转换成true,则将对应的元素push到那个空数组中！

它内部的回调函数可以传入三个参数(同forEach完全一样)

item为必填参数，表示当前元素

index为可选参数，表示当前元素的索引

arr同样为可选参数，表示当前元素所属的数组对象(正在遍历的这个数组)。

不同于forEach，它是有返回值的，找个变量接收即可：

filter源码实现：

Array.prototype.myFilter = function(callback) {let newArr = []for (let i = 0; i < this.length; i++) {if (callback(this[i], i, this)) {newArr.push(this[i])}}return newArr}

效果测试：

map()

方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

这个就比较好理解了，意思就是它也有返回值，它的返回值就是将你正在遍历的那个数组中的回调函数中的return返回值挨个push到它提前创建好的空数组中！

它内部的回调函数可以传入三个参数(同forEach完全一样)

item为必填参数，表示当前元素

index为可选参数，表示当前元素的索引

arr同样为可选参数，表示当前元素所属的数组对象(正在遍历的这个数组)。

eg:

map源码实现：

Array.prototype.myMap = function (callback) {let newArr = []for (let i = 0; i < this.length; i++) {newArr.push(callback(this[i], i, this))}return newArr}

效果展示：

reduce()

reduce() 方法接收一个函数作为累加器，数组中的每个值(从左到右)开始缩减，最终计算为一个值。

和之前的数组方法一样，它也需要传入一个回调函数作为参数。出了回调函数之外，它还可以穿入一个形参(initialValue)作为初始值。

不同于之前，它的第一个参数发生变化：

array.reduce(function(pre, item, index, arr) {}，initialValue)中

pre为必填参数，上一次调用回调返回的值，或者是提供的初始值 initialValue

item为必填参数，表示当前元素

index为可选参数，表示当前元素的索引

arr同样为可选参数，表示当前元素所属的数组对象(正在遍历的这个数组)。

刚刚的有一点没有说明，就是当 initialValue 传参的时候，pre的初始值为initialValue ，如果 initialValue 没有传出，则 pre 为数组中的第一个元素。

其次，如果initialValue 没有传参，pre 为数组中的第一个元素。那么item将从数组中第二个开始。

反之正常顺序：

en,这东西其实用的地方不多，不过它效率要比forEach快几十倍，，反正我没用过~~~~

reduce源码实现：

Array.prototype.myReduce = function(callback, init) {let previous = init || this[0]let i = 0if (init === undefined) i = 1for (i; i < this.length; i++) {previous = callback(previous, this[i], i, this)}return previous}

效果展示：

reduceRight()

同reduce()类似，不过不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加(reduce自左往右累加，reduceRight自右往左累加)。

参数也都是一样的！

array.reduceRight(function(pre, item, index, arr) {}，initialValue)中

pre为必填参数，上一次调用回调返回的值，或者是提供的初始值 initialValue

item为必填参数，表示当前元素

index为可选参数，表示当前元素的索引

arr同样为可选参数，表示当前元素所属的数组对象(正在遍历的这个数组)。

使用细节参照reduce即可，我就不水了~

对啦，如果没有传初始值，pre默认是最后一个元素: this[this.length -1]

eg:

reduceRight源码实现：

Array.prototype.myReduceRight = function(callback, init) {let previous = init || this[this.length - 1]let i = this.lengthif (init === undefined) i = this.length - 1for (i; i > 0; i--) {previous = callback(previous, this[i-1], i, this)}return previous}

效果展示：

传入初始值时：