JS常用的循环方法

注意点

所有的循环都中如果去改变数组中元素属性，都会影响原数组，这里涉及浅拷贝和深拷贝。

1. for

首先是for循环,我这边定义为最基础用法

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

2. for in

相当于上面的写法简化

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

上面的i对应数组索引

3. for of

与for in 类似，区别在于讲索引变成了元素

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

4. forEach

与上面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)
}

5. while

while循环跟for循环区别就很明显了，其条件是写在方法内的。

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

6. do while

这个方法是先执行循环内部方法，然后根据条件判断是否成功。

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

7.map

map是一个集成循环和数据处理的循环方法,原数组随之改变。

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}
*/
// 换成for的写法
for(let i = 0;i<arr.length;i++){
      if(arr[i].name === 'test6'){  
          arr[i].check = true;
      };
};

8. filter

filter是一个集成循环和数据处理的循环方法,原数组不改变，返回新数组。

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 }
    ]
*/

9. reduce()，reduceRight()

累积循环，将所有参数进行计算方法设定返回结果。

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

a=arr.reduce(f)、b=arr.reduceRight(f) 假设arr=[1,2,3,4]；
a=f(f(f(1,2),3),4)、b=f(f(f(4,3),2),1)

10. 循环的退出和继续

continue：继续
break：退出

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 }]

JS-循环（map、filter...）