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 = 0    if (init === undefined) i = 1    for (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.length    if (init === undefined) i = this.length - 1    for (i; i > 0; i--) {     previous = callback(previous, this[i-1], i, this)    }    return previous   }

效果展示:

传入初始值时: