JS common loop method

Pay attention to the point

In all loops, if you change an element’s property in an array, it will affect the original array, shallow copy and deep copy.

1. for

The first is the for loop, which I define as the most basic usage

let arr = ['a'.'b'.'c'.'d'.'e']
for(let i=0; i<arr.length; i++){console.log(arr[i])
}
Copy the code

2. for in

So this is kind of a simplification

let arr = ['a'.'b'.'c'.'d'.'e']
for(let i in arr){
    console.log(arr[i])
}
Copy the code

The I above corresponds to the array index

3. for of

Similar to for in, except that the index becomes an element

let arr = ['a'.'b'.'c'.'d'.'e']
for(let i in arr){
    console.log(i)
}
Copy the code

4. forEach

Similar to the above for of

let arr = ['a'.'b'.'c'.'d'.'e']
arr.forEach(item= >{
    console.log(item)
})
// for of
for(let i of arr){
    fordo(i)
}
function fordo(item){
	console.log(item)
}

Copy the code

5. while

A while loop is very different from a for loop because its conditions are written inside the method.

let arr = ['a'.'b'.'c'.'d'.'e']
let i = 0;
while(i<10) {console.log(arr[i]);
	i++;
}
Copy the code

6. do while

This method is to execute the inner loop method first and then determine success based on the condition.

let arr = ['a'.'b'.'c'.'d'.'e']
let i = 0;
do{
	console.log(arr[i]);
	i++;
}while(i<0)
// a
Copy the code

7.map

Map is a looping method that integrates looping and data processing, and the original array changes accordingly.

let arr = [
	{name:'test1'.age:'25'.check:true},
	{name:'test2'.age:'25'.check:true},
	{name:'test3'.age:'25'.check:true},
	{name:'test4'.age:'25'.check:true},
	{name:'test5'.age:'25'.check:true},
	{name:'test6'.age:'25'.check:true},
	{name:'test7'.age:'25'.check:true},
	{name:'test8'.age:'25'.check:true},
	{name:'test9'.age:'25'.check:true},
	{name:'test10'.age:'25'.check:true},];let arrMap = arr.map(item= >{
	if(item.name === 'test6'){
		item.check = false;
	}
	return item
});
console.log(arrMap);
/* {name:'test1',age:'25',check:true}, {name:'test2',age:'25',check:true}, {name:'test3',age:'25',check:true}, {name:'test4',age:'25',check:true}, {name:'test5',age:'25',check:true}, {name:'test6',age:'25',check:false}, {name:'test7',age:'25',check:true}, {name:'test8',age:'25',check:true}, {name:'test9',age:'25',check:true}, {name:'test10',age:'25',check:true} */
// Write for instead
for(let i = 0; i<arr.length; i++){if(arr[i].name === 'test6'){  
          arr[i].check = true;
      };
};
Copy the code

8. filter

Filter is a loop method that integrates looping and data processing, leaving the original array unchanged and returning the new array.

let arr = [
	{name:'test1'.age:'25'.check:true},
	{name:'test2'.age:'25'.check:false},
	{name:'test3'.age:'25'.check:true},
	{name:'test4'.age:'25'.check:false},
	{name:'test5'.age:'25'.check:true},
	{name:'test6'.age:'25'.check:false},
	{name:'test7'.age:'25'.check:true},
	{name:'test8'.age:'25'.check:false},
	{name:'test9'.age:'25'.check:true},
	{name:'test10'.age:'25'.check:false},];let arrFilter = arr.filter(item= > {
	if(item.check){
		return item
	}
});
console.log(arrFilter);
/* [ { name: 'test1', age: '25', check: true }, { name: 'test3', age: '25', check: true }, { name: 'test5', age: '25', check: true }, { name: 'test7', age: '25', check: true }, { name: 'test9', age: '25', check: true } ] */
Copy the code

9. The reduce (), reduceRight ()

Cumulative loop, all parameters are calculated method set return results.

let arr = [1.2.3.4.5.6.7.8.9];
let it = arr.reduce((x,y) = >{
	return x-y;
});
let iT = arr.reduceRight((x,y) = >{
	return x-y;
});
console.log(it); / / - 43
console.log(iT); / / - 27
let its = arr.reduce((x,y) = >{
	return x+y;
});
let iTs = arr.reduceRight((x,y) = >{
	return x+y;
});
console.log(its); / / 45
console.log(iTs); / / 45
Copy the code

A =arr.reduce(f), b= arr.reduceright (f) assume that arr=[1,2,3,4]; A = f (f (f) (1, 2, 3), 4), b = f (f (f (4, 3), 2), 1)

10. Loop exit and continuation

  1. Continue, continue to
  2. Break: quit
let arr = [
	{name:'test1'.age:'25'.check:true},
	{name:'test2'.age:'25'.check:false},
	{name:'test3'.age:'25'.check:true},
	{name:'test4'.age:'25'.check:false},
	{name:'test5'.age:'25'.check:true},
	{name:'test6'.age:'25'.check:false},
	{name:'test7'.age:'25'.check:true},
	{name:'test8'.age:'25'.check:false},
	{name:'test9'.age:'25'.check:true},
	{name:'test10'.age:'25'.check:false},];let arrs = [];
for(let i of arr){
	arrs.push(i)
	if(i.name === 'test1') {continue
	}else{
		break}}console.log(arrs) 
//[{name:'test1',age:'25',check: false },{name:'test2',age:'25',check:false }]
Copy the code