开撸!!分享用原生JS手撸forEach、map与reduce.

133 阅读2分钟

大家好!是我这个前端小白,今天我又来给掘友们分享前端知识啦~

u=1989164016,383771968&fm=253&fmt=auto&app=138&f=JPEG.webp

今日白熊镇楼

我们都知道forEach、map等等这些遍历数组的方法都是ES6的新特性,那大伙有没有去仔细的思考这些方法是怎么实现的呢?今天本小白就来给大家分享一下,本人手撸出这些方法的见解与源码。当然我们手撸这些代码的目的不是为了应付面试,是为了锻炼自己的编程思维,从最底层的思维去思考,让自己能够更好的使用并认知这些方法。

当然本小白写的有可能不够严谨,有错误的地方还望各位大佬多多担待!!

接下来话不多说,让我们直接进入正题

forEach方法

在讲解forEach之前让我们来先了解一下forEach的几个参数及特点

array.forEach(function(item, index, arr), ins)
  • 参数1:回调函数
  • 参数2:传递给回调函数的this指向
  • 返回值:无

注意哦:forEach是没有返回值的!

了解完这些后下面就是我手撸的源码啦!

image.png

image.png

map方法

当然,跟forEach一样在讲述map方法之前,我们也先了解一下map方法的参数与特点

array.map(function(item, index, arr) { 
console.log(item, index, arr)
console.log(this)
}, ins)
  • 参数1:回调函数
  • 参数2:执行回调函数是的this指向的值
  • 返回值:返回一个新数组,每个元素都是回调函数的返回值

源码奉上!!

image.png

image.png

reduce方法

与上述一样,在讲解reduce之前让我们来了解了解他的一些参数与特性,reduce与上面说的两兄弟不同,它也是逐个遍历数组元素,但是每一步都将当前元素的值与前一步的结果相加(该结果是之前所有步骤结果的总和),直到没有更多需要相加的元素。

arr.reduce(callbackFn, initialValue)
  • 参数1:回调函数
  • 参数2:初始值,计算结束后的返回值
  • 参数3:this指向
  • 返回值:返回计算结果

接下来源码奉上!!

image.png

image.png

OK,以上就是我的手撸forEach、map与reduce的见解,如有不足之处还望各位大佬们补充,非常感谢!