前言
数组是JavaScript中最重要的数据格式之一，而对于数组对象实例方法的掌握程度，往往成为面试官考察面试者的重要依据之一，因此，熟练掌握数组的使用方法，是每一位优秀的前端开发人员的必备条件之一。
本文，将通过重写数组中7个最常用的原生遍历方法，帮助读者更好地了解数组方法的使用技巧和实现逻辑，加深读者对于数组方法的印象。
实例展示
首先，本文为本文所有的示例先定义一个公用的数组对象，方便后面行文展示。
let arr=[1,2,3,4,5];
1. forEach
1.1 原生方法
arr.forEach((item,index,array)=>{
console.log(item, index, array);
})
// 1 0 [1, 2, 3, 4, 5]
// 2 1 [1, 2, 3, 4, 5]
// 3 2 [1, 2, 3, 4, 5]
// 4 3 [1, 2, 3, 4, 5]
// 5 4 [1, 2, 3, 4, 5]
1.2 重写实现
Array.prototype.myforEach=function(callback){
for(let i=0;i<this.length;i++){
callback(this[i],i,this);
}
}
arr.myforEach((item,index,array)=>{
console.log(item, index, array);
})
// 1 0 [1, 2, 3, 4, 5]
// 2 1 [1, 2, 3, 4, 5]
// 3 2 [1, 2, 3, 4, 5]
// 4 3 [1, 2, 3, 4, 5]
// 5 4 [1, 2, 3, 4, 5]
2. map
2.1 原生方法
arr.map(x=>x)
// [1, 2, 3, 4, 5]
2.2 重写实现
Array.prototype.myMap=function(callback){
let arr=[];
for(let i=0;i<this.length;i++){
arr.push(callback(this[i],i,this));
}
return arr;
}
arr.myMap(x=>x);
// [1, 2, 3, 4, 5]
3. filter
3.1 原生方法
arr.filter(item=>{
return (item>3);
})
// [4, 5]
3.2 重写实现
Array.prototype.myFilter=function(callback){
let arr=[];
for(let i=0; i<this.length; i++){
if(callback(this[i], i, this)){
arr.push(this[i]);
}
}
return arr;
}
arr.myFilter(item=>{
return (item>3)
})
// [4, 5]
4. some
4.1 原生方法
arr.some((item,index,array)=>{
return item>3;
})
// true
4.2 重写实现
Array.prototype.mySome=function(callback){
for(let i=0;i<this.length;i++){
if(callback(this[i],i,this)){
return true;
}
}
return false;
}
arr.mySome((item,index,array)=>{
return item>3;
})
// true
5. every
5.1 原生方法
arr.every((item,index,array)=>{
return item>3;
})
// false
5.2 重写实现
Array.prototype.myEvery=function(callback){
for(let i=0;i<this.length;i++){
if(!callback(this[i],i,this)){
return false;
}
}
return true;
}
arr.myEvery((item,index,array)=>{
return item>3;
})
// false
6. reduce
6.1 原生方法
arr.reduce.reduce((a, b)=>{
console.log(a, b);
return a + b;
})
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：15
6.2 重写实现
Array.prototype.myReduce=function(callback){
let result=callback(this[0],this[1]);
for(let i=1;i<this.length-1;i++){
result=callback(result,this[i+1]);
}
return result;
}
arr.myReduce((a,b)=>{
console.log(a,b);
return a+b;
})
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：15
7. reduceRight
7.1 原生方法
arr.reduceRight((a, b)=>{
console.log(a, b);
return a + b;
})
// 5 4
// 9 3
// 12 2
// 14 1
//最后的结果：15
7.2 重写实现
Array.prototype.myReduceRight=function(callback){
this.reverse();
let result=callback(this[0],this[1]);
for(let i=1;i<this.length-1;i++){
result=callback(result,this[i+1]);
}
this.reverse();
return result;
}
arr.myReduceRight((a,b)=>{
console.log(a,b);
return a+b;
})
// 5 4
// 9 3
// 12 2
// 14 1
//最后的结果：15
总结
以上就是本人对数组对象的7个原生遍历方法的重写实现，如果你有任何见解和想法，欢迎留言。
最后，祝工作顺利，生活愉快。
