重写JavaScript数组7个最经常使用的原生遍历方法

前言

数组是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个原生遍历方法的重写实现，若是你有任何看法和想法，欢迎留言。

最后，祝工做顺利，生活愉快。