重寫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個原生遍歷方法的重寫實現，若是你有任何看法和想法，歡迎留言。

最後，祝工做順利，生活愉快。