挫其銳，解其紛，和其光，同其塵。
简介
Array.prototype上有很多方法，可以很方便的实现各种循环、过滤对数组做很多的处理，这里主要记录自己怎么实现几个方法map、forEach、filter、reduce，怎么使用就不多做讲解了因为在mdn 中 Array或者别人的文章中有很多的讲解了。
实现 reduce
首先要了解reduce它有两个参数，第一个参数是一个回调方法callback，第二个参数是一个初始值initialValue。
大致实现步骤如下：
- 判断参数，判断调用方法本身是否为 Array
- 声明要用的变量
- 判断是否有初始值，如果没有则从本身数组中取，取到直接跳出循环
- 循环调用 callback
Array.prototype.selfReduce = function(callback, initalValue) {
// 不能是null调用方法
if (this === null) {
throw new TypeError(
"Array.prototype.reduce" + "called on null or undefined"
);
}
// 第一个参数必须要为function
if (typeof callback !== "function") {
throw new TypeError(callback + " is not a function");
}
// 声明要用到的变量
// 要循环的数组
let arr = Array.prototype.slice.call(this);
let _len = arr.length;
// 结果数组
let res = [];
// 开始的数组索引 默认为 0
let startIndex = 0;
// 判断是否为有初始化值 initalValue
if (initalValue === undefined) {
// 如果初始值为 undefined 循环从数组中找到有值，并且退出循环
// 过滤稀疏值
for (let i = 0; i < _len; i++) {
if (!arr.hasOwnProperty(i)) {
continue;
} else {
startIndex = i;
res = arr[i];
break;
}
}
} else {
res = initalValue;
}
// 在上一步拿到初始值，循环调用传入的回调函数，并且过滤松散值
for (let i = startIndex++; i < arr.length; i++) {
if (!arr.hasOwnProperty(i)) {
continue;
}
res = callback.call(null, res, arr[i], i, this);
}
return res;
};
测试一下selfReduce和reduce方法是否表现一致，代码如下：
var aTest = [1, 2, 3, 4, 5];
arr.reduce((prev, next) => {
return prev + next;
}, 0); // 15
arr.selfReduce((prev, next) => {
return prev + next;
}, 0); // 15
其实也可以去看一下官方的mdn reduce polyfill。
实现 map
map的使用这里不多做赘述，只记录它的两种实现方式一种通过for循环实现，另一种通过reduce实现。
for 循环实现
Array.prototype.selfMap = function(callback, context) {
// 不能是null调用方法
if (this === null) {
throw new TypeError(
"Array.prototype.reduce" + "called on null or undefined"
);
}
// 第一个参数必须要为function
if (typeof callback !== "function") {
throw new TypeError(callback + " is not a function");
}
// 声明要用到的变量
let arr = Array.prototype.slice.call(this);
let _len = arr.length;
let aMap = [];
// 循环调用
for (let i = 0; i < _len; i++) {
// 过滤稀疏值
if (!arr.hasOwnProperty(i)) {
continue;
}
aMap[i] = callback.call(context, arr[i], i, this);
}
return aMap;
};
测试实现selfMap和map是否一致，代码如下：
var aTest = [1, 2, 3, 4, 5];
aTest.map(item => {
return item * 2;
}); // [2, 4, 6, 8, 10]
aTest.selfMap(item => {
return item * 2;
}); // [2, 4, 6, 8, 10]
reduce 实现
Array.prototype.reduceMap = function(callback, context) {
// 不能是null调用方法
if (this === null) {
throw new TypeError(
"Array.prototype.reduce" + "called on null or undefined"
);
}
// 第一个参数必须要为function
if (typeof callback !== "function") {
throw new TypeError(callback + " is not a function");
}
// 获取数组
let aMap = Array.prototype.slice.call(this);
// 使用reduce实现循环
return aMap.reduce((pre, cur, index) => {
// 拼接上次循环结果和当前结果
// 循环调用callback
return [...pre, callback.call(context, cur, index, this)];
}, []);
};
测试实现reduceMap和map是否一致，代码如下：
var aTest = [1, 2, 3, 4, 5];
aTest.map(item => {
return item * 2;
}); // [2, 4, 6, 8, 10]
aTest.reduceMap(item => {
return item * 2;
}); // [2, 4, 6, 8, 10]
filter 实现
filter 也用到很多次，这里也不多做赘述直接看两种实现方法：
for 循环实现
Array.prototype.selfFilter = function(callback, context) {
// 不能是null调用方法
if (this === null) {
throw new TypeError(
"Array.prototype.reduce" + "called on null or undefined"
);
}
// 第一个参数必须要为function
if (typeof callback !== "function") {
throw new TypeError(callback + " is not a function");
}
// 获取数组
let aArr = Array.prototype.slice.call(this);
let _len = aArr.length;
let aFArr = [];
// 循环调用callback
for (let i = 0; i < _len; i++) {
if (!aArr.hasOwnProperty(i)) {
continue;
}
callback.call(context, aArr[i], i, this) && aFArr.push(aArr[i]);
}
return aFArr;
};
reduce 实现
Array.prototype.reduceFilter = function(callback, context) {
// 不能是null调用方法
if (this === null) {
throw new TypeError(
"Array.prototype.reduce" + "called on null or undefined"
);
}
// 第一个参数必须要为function
if (typeof callback !== "function") {
throw new TypeError(callback + " is not a function");
}
// 获取数组
let aArr = Array.prototype.slice.call(this);
// 循环调用callback
aArr.reduce((pre, cur, index) => {
return callback.call(context, cur, index, this) ? [...pre, cur] : [...pre];
}, []);
return aArr;
};
测试代码
var aTest = [1, 2, 3, 4, 5, 6];
aTest.filter(item => {
return item > 2;
});
aTest.selfFilter(item => {
return item > 2;
});
aTest.reduceFilter(item => {
return item > 2;
});
实现 forEach
for 循环实现
Array.prototype.selfForeach = function(callback, context) {
// 不能是null调用方法
if (this === null) {
throw new TypeError(
"Array.prototype.reduce" + "called on null or undefined"
);
}
// 第一个参数必须要为function
if (typeof callback !== "function") {
throw new TypeError(callback + " is not a function");
}
// 获取数组
let arr = Array.prototype.slice.call(this);
let _len = arr.length;
for (let i = 0; i < _len; i++) {
callback.call(context, arr[i], i, arr);
}
return arr;
};
reduce 循环实现
Array.prototype.reduceForeach = function(callback, context) {
// 不能是null调用方法
if (this === null) {
throw new TypeError(
"Array.prototype.reduce" + "called on null or undefined"
);
}
// 第一个参数必须要为function
if (typeof callback !== "function") {
throw new TypeError(callback + " is not a function");
}
// 获取数组
let arr = Array.prototype.slice.call(this);
arr.reduce((pre, cur, index) => {
return [...pre, callback.call(context, cur, index, this)];
}, []);
};
总结
基本上理解了怎么实现，无论是使用 for 来实现还是用 reduce 实现，基本上没有太大的差别。 写作不易，如果喜欢点赞、关注
