前言
在javaScript的初期学习中，我们会发现数组有很多的内置方法，比如常见的遍历数组的方法 forEach、map、filter、find、findIndex、some、every、reduce等等。那么这些方法如何实现的呢？今天就让我们一起回顾一下吧！！！
forEach的实现
代码如下：
let array = [
{
name: "小明",
age: 18,
},
{
name: "小红",
age: 28,
},
]
Array.prototype.myForEach = function (callBack) { //向数组的原型上挂载myForEach方法
// 这个的this指向调用者，也就是array数组
// console.log(this)
// 遍历当前的数组，返回相应的值
for (let i = 0; i < this.length; i++) {
const item = array[i]
const index = i
const arr = this
callBack(item, index, arr)
}
}
array.myForEach((item, index, arr) => {
console.log("myItem", item)
console.log("myIndex", index)
console.log("myArr", arr)
})
效果如下：
注意事项：forEach的代码实现相对比较简单，值得注意的是，myForEach不能是箭头函数，如果是箭头函数的话，这里的this指向window。
map的实现
代码如下：
let array = [
{
name: "小明",
age: 18,
},
{
name: "小强",
age: 28,
},
]
Array.prototype.myMap = function (callBack) {
let callArrays = []
for (let i = 0; i < this.length; i++) {
const item = this[i]
const index = i
const array = this
let items = callBack(item, index, array)
callArrays.push(items)
}
return callArrays
}
let newMyArray = array.myMap((item, index, arr) => {
console.log("index", index)
return {...item, sex: "男"}
})
console.log("newMyArray", newMyArray)
效果如下：
思路:map相对于forEach是有返回值的，可以改变原数组，所以在实现map的时候需要定义一个数组，用于返回，在每一次for循环的时候搜集当前的项，并push到数组中用于返回。
filter的实现
代码如下：
let array = [
{
name: "小明",
age: 18,
},
{
name: "小强",
age: 28,
},
]
Array.prototype.myFilter = function (callBack) {
let callArrays = []
for (let i = 0; i < this.length; i++) {
const item = this[i]
const index = i
const array = this
if (callBack(item, index, array)) {
callArrays.push(item)
}
}
return callArrays
}
let newMyArray = array.myFilter((item, index, arr) => {
console.log("index", index)
return item.age === 18
})
console.log("newMyArray", newMyArray)
效果如下：
思路：如果你已经实现了map，那么filter相对就比较简单了，filter是返回条件为true的项的集合。
find的实现
代码如下：
let array = [
{
name: "小明",
age: 18,
},
{
name: "小强",
age: 28,
},
{
name: "小张",
age: 18,
},
]
Array.prototype.myFind = function (callBack) {
for (let i = 0; i < this.length; i++) {
const item = this[i]
const index = i
const array = this
if (callBack(item, index, array)) {
return item
}
}
}
let newMyArray = array.myFind((item, index, arr) => {
console.log("index", index)
return item.age === 18
})
console.log("newMyArray", newMyArray)
效果如下：
思路：find是返回最先满足条件的那一项，所以在循环的时候判断当前的项是不是满足条件，满足就返回。
findIndex的实现
代码如下：
Array.prototype.myFindIndex = function (callBack) {
for (let i = 0; i < this.length; i++) {
const item = this[i]
const index = i
const array = this
if (callBack(item, index, array)) {
return index
}
}
}
let newMyArray = array.myFindIndex((item, index, arr) => {
console.log("index", index)
return item.age === 18
})
console.log("newMyArray", newMyArray)
效果如下：
思路：findIndex返回的是最先满足条件的下标，和find类似。some和every的实现和上面的几种类似，就不再赘述了。
reduce的实现
代码如下：
let array = [1, 2, 3, 4];
Array.prototype.myReduce = function (callBack, initialValue = null) {
for (let i = 0; i < this.length; i++) {
if (!initialValue) { // 初始值不传
initialValue = callBack(this[i], this[i + 1], i, this);
i++;
} else {
initialValue = callBack(initialValue, this[i], i, this);
}
}
return initialValue;
};
let newMyArray = array.myReduce((previousValue, currentValue) => {
return previousValue + currentValue;
});
console.log('newMyArray', newMyArray);
效果如下：
思路：reduce中接受两个参数，第一个是参数是一个回调函数，第二个参数是一个作为第一个回调函数的累积值（previousValue）的初始值。在回调函数中，接受4个参数，分别是累积值（previousValue），当前值（currentValue），当前索引（index），数组本身（arr），如果reduce中第二个参数为空，那么累积值就是数组的第一个项。所以在上面的实现思路中，把callBack的返回值作为一个累积值，等累加完成再返回，就实现了reduce。
后记
创作是一个复杂的过程，需要将思考、灵感和技巧完美结合，每一次的成功都来之不易。以上是我花费了N个小时呕心沥血的整理出来的。感谢观看、点赞、转发、收藏 ⛽️
