Overriding JavaScript arrays 7 of the most common native traversal methods

preface

Array is one of the most important data formats in JavaScript, and the mastery of array object instance method often becomes one of the important basis for the interviewer to inspect the interviewer. Therefore, mastering the use of array is one of the necessary conditions for every excellent front-end developer.

In this article, we will rewrite seven of the most commonly used native traversal methods in arrays to help readers better understand the techniques and implementation logic of array methods, and deepen readers’ impression of array methods.

Examples show

First, this article defines a common array object for all the examples in this article, which will be shown later.

letArr = [1, 2, 3, 4, 5];Copy the code

1. forEach

1.1 Native methods

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]Copy the code

1.2 Rewrite implementation

Array.prototype.myforEach=function(callback){
	for(leti=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]Copy the code

2. map

2.1 Native methods

arr.map(x=>x)

// [1, 2, 3, 4, 5]
Copy the code

2.2 Rewrite Implementation

Array.prototype.myMap=function(callback){
	let arr=[];
	for(leti=0; i<this.length; i++){ arr.push(callback(this[i],i,this)); }return arr;	
}

arr.myMap(x=>x);

// [1, 2, 3, 4, 5]
Copy the code

3. filter

3.1 Native methods

arr.filter(item=>{
	return(item>3); }) / / [4, 5]Copy the code

3.2 Rewrite implementation

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]
Copy the code

4. some

4.1 Native Methods

arr.some((item,index,array)=>{
	returnitem>3; / /})true
Copy the code

4.2 Rewriting implementation

Array.prototype.mySome=function(callback){
	for(leti=0; i<this.length; i++){if(callback(this[i],i,this)){
			return true; }}return false;
}

arr.mySome((item,index,array)=>{
	returnitem>3; / /})true
Copy the code

5. every

5.1 Native Methods

arr.every((item,index,array)=>{
	returnitem>3; / /})false
Copy the code

5.2 Rewriting Implementation

Array.prototype.myEvery=function(callback){
	for(leti=0; i<this.length; i++){if(! callback(this[i],i,this)){return false; }}return true;
}

arr.myEvery((item,index,array)=>{
	returnitem>3; / /})false
Copy the code

6. reduce

6.1 Native Methods

arr.reduce.reduce((a, b)=>{
  console.log(a, b);
  returna + b; }) // 1 2/3 3 // 6 4 // 10 5 // Final result: 15Copy the code

6.2 Rewriting Implementation

Array.prototype.myReduce=function(callback){
	let result=callback(this[0],this[1]);
	for(leti=1; i<this.length-1; i++){ result=callback(result,this[i+1]); }return result;
}

arr.myReduce((a,b)=>{
	console.log(a,b);
	returna+b; }) // 1 2/3 3 // 6 4 // 10 5 // Final result: 15Copy the code

7. reduceRight

7.1 Native Methods

arr.reduceRight((a, b)=>{
  console.log(a, b);
  returna + b; }) // 5 4 // 9 3 // 12 2 // 14 1 // Final result: 15Copy the code

7.2 Rewriting Implementation

Array.prototype.myReduceRight=function(callback){
	this.reverse();
	let result=callback(this[0],this[1]);
	for(leti=1; i<this.length-1; i++){ result=callback(result,this[i+1]); } this.reverse();return result;
}

arr.myReduceRight((a,b)=>{
	console.log(a,b);
	returna+b; }) // 5 4 // 9 3 // 12 2 // 14 1 // Final result: 15Copy the code

conclusion

So that’s my rewrite of the seven native traversal methods for array objects. If you have any ideas, feel free to leave a comment.

Finally, I wish you success in your work and a happy life.