前言
同样是前端面试高频的一个问题，我们就取用到最多的map和forEach方法来实现一下，附带一下reduce，just面试题目分享，木得深度昂。来首最近很喜欢的一首bgm：思念是一种病
帝王蟹最近也在秋招求职之中，其实经历过春招、秋招这两个阶段，自己作为21届的小白最大的感触就是两个点：注重基础、很多问题难度是不大的只是平常自己可能没有去看过。
题外话
这个点就不扯多了，只是最近看到了太多关于这个的讨论，自己其实也有一些想法，标题党从争取浏览希望大家的认可，到后来的仅为争取浏览，但我自己其实一直觉得一篇文章自己看过了会有收获那就是对于自己来说的一篇好的文章嘛。我倒也不反感，每次点进标题党文章，诶嘿我就记下
ID防止再会（玩笑玩笑）
方法实现
实现map
const result = arr.map(x => x * 2)
这方法用得太多啦，一说写就想到它了，对数组每一项进行指定参数函数操作，返回一个新的数组，看下我们实现的关键点
- 数组能够调用，并不改变数组自身
map方法第一个参数方法（必填，不写会抛出错误）的参数（哈哈哈绕死了）- 当前操作项
- 当前数组值索引（可选）
- 数组本身（可选）
map方法第二个参数（可选），改变this指向，默认为window- 返回操作后结果数组
读者：就这？直接莽不需要你写了（抢过键盘）
Array.prototype.myMap = function(fn, thisArg = window) {
if(typeof fn !== 'function') {
// 当然实际报错情况有很多这边就只写一个
throw new TypeError('第一个参数需为函数')
}
// 定义我们要返回的新数组
let newArr = []
let _this = this
for(let i = 0; i< _this.length; i++) {
let newItem = fn.call(thisArg, _this[i], i, _this);
newArr.push(newItem);
}
return newArr
}
帝王蟹：就都写完了？？？那我模仿着写一下forEach吧，我擦？？？forEach不是一样的逻辑嘛，不写了不写了，其他数组方法应该也是这种逻辑去操作。哦？对了我想起来了一个方法被问了几次，但其实用得比较少
reduce，看一道面试题
面试题
用reduce方法 实现 map Polyfill（当时这样问我还有点懵逼不好意思去问Polyfill是什么意思，后来发现就是借助reduce模拟map）
Array.prototype.myMap = function(fn, thisArg = window) {
if(typeof fn !== 'function') {
// 当然实际报错情况有很多这边就只写一个
throw new TypeError('第一个参数需为函数')
}
// 定义我们要返回的新数组
let newArr = []
let _this = this
return _this.reduce((pre, cur, index) => {
return [...pre, fn.call(thisArg, cur, index, _this)]
}, [])
}
ok完美解决在不怕被问这个了，看一眼女友然后撸一下reduce实现
实现reduce
reduce用法可以去MDN康一眼，这个点其实被问到还是多的，当时说到手写也是有点懵逼
Array.prototype.myReduce = function(fn, initialValue){
let _this = this
let index = 0
// 当没有初始值时定义数组第一项为初始值
if(!initialValue) {
initialValue = _this[0]
index = 1
}
for(let i=index, len = _this.length; i< len; i++){
initialValue = fn(initialValue, _this[i])
}
return initialValue
}
总结
其实虽然这些数组方法大家平常肯定都会用的嘛，但是其实自己手动去实现了一下之后更加能理解到方法实现的一个具体流程了，在方便的方法也都是基于底层代码去封装实现的撒。同样的面试也是高频点希望有帮助到。下期见~
