大家好!是我这个前端小白,今天我又来给掘友们分享前端知识啦~
今日白熊镇楼
我们都知道forEach、map等等这些遍历数组的方法都是ES6的新特性,那大伙有没有去仔细的思考这些方法是怎么实现的呢?今天本小白就来给大家分享一下,本人手撸出这些方法的见解与源码。当然我们手撸这些代码的目的不是为了应付面试,是为了锻炼自己的编程思维,从最底层的思维去思考,让自己能够更好的使用并认知这些方法。
当然本小白写的有可能不够严谨,有错误的地方还望各位大佬多多担待!!
接下来话不多说,让我们直接进入正题
forEach方法
在讲解forEach之前让我们来先了解一下forEach的几个参数及特点
array.forEach(function(item, index, arr), ins)
- 参数1:回调函数
- 参数2:传递给回调函数的this指向
- 返回值:无
注意哦:forEach是没有返回值的!
了解完这些后下面就是我手撸的源码啦!
map方法
当然,跟forEach一样在讲述map方法之前,我们也先了解一下map方法的参数与特点
array.map(function(item, index, arr) {
console.log(item, index, arr)
console.log(this)
}, ins)
- 参数1:回调函数
- 参数2:执行回调函数是的this指向的值
- 返回值:返回一个新数组,每个元素都是回调函数的返回值
源码奉上!!
reduce方法
与上述一样,在讲解reduce之前让我们来了解了解他的一些参数与特性,reduce与上面说的两兄弟不同,它也是逐个遍历数组元素,但是每一步都将当前元素的值与前一步的结果相加(该结果是之前所有步骤结果的总和),直到没有更多需要相加的元素。
arr.reduce(callbackFn, initialValue)
- 参数1:回调函数
- 参数2:初始值,计算结束后的返回值
- 参数3:this指向
- 返回值:返回计算结果
接下来源码奉上!!
OK,以上就是我的手撸forEach、map与reduce的见解,如有不足之处还望各位大佬们补充,非常感谢!