JavaScript里所有循环的用法与区别

这篇文章会清楚的解析所有跟循环有关的用法与他们之间的区别，不管是代码运用还是对付面试，都尽量偏向于全面

首先这是我们的备选实验对象

var ArrNum = [10,20,30,40,50]
var str = 'str'
var ArrObj = [
		{
			name:'小李'	,
			age:20,
			sex:'男'
		},
		{
			name:'小林'	,
			age:20,
			sex:'女'
		},
		{
			name:'小凡'	,
			age:20,
			sex:'男'
		},
	]
var Obj = {
		name:['小李','小林','小凡'],
        age:'20',
        ename:['li','lin','fan']
		}

• for in
  这个是遍历可枚举对象，也就是说，与其他循环不同的是它也可以遍历对象，然后返回它的key，如果是循环数组，就返回下标

for(var item in ArrNum){
	console.log(item)
	console.log(ArrNum(item)) //这样就会输出key值
}
// 0   	10
// 1	20
// 2	30
// 3	40
// 4	50

for(var item in Obj){
	console.log(item)
}
// name
// age
// ename 

• for of
  可以循环字符串，直接输出元素值

 for(var item of ArrNum){
		console.log(item)
}
// 10
// 20
// 30
// 40
// 50

for(var item of str){
	console.log(item)
}
// s
// t
// r

那么他可以像for in一样遍历对象吗，可以！需要借助Object的方法，分别是Object.keys()和Object.values()，上代码：

 for(var item of Object.keys(Obj)){
		console.log(item)
}
// name
// age
// ename

 for(var item of Object.values(Obj)){
		console.log(item)
}
// ['小李','小林','小凡']
// 20
// ['li','lin','fan']

接下来是运用了回调函数类的循环，这些大多用于json格式的数组

• forEach
  不可跳出循环，return也不行

   三个参数：
   	必选，数组值，
   	可选，下标
   	可选，当前数组
  

 ArrObj.forEach((item,index,arr)=> {  
     console.log(item,index,arr);
 });
 // {name: "小李", age: 20, sex: "男"} 0 (3) [{…}, {…}, {…}]
 // {name: "小林", age: 20, sex: "女"} 1 (3) [{…}, {…}, {…}]
 // {name: "小凡", age: 20, sex: "男"} 2 (3) [{…}, {…}, {…}]

 ArrNum.forEach((item,index,arr)=> {  
     console.log(item,index,arr);
 });
 // 10 0 (5) [10, 20, 30, 40, 50]
 // 20 1 (5) [10, 20, 30, 40, 50]
 // 30 2 (5) [10, 20, 30, 40, 50]
 // 40 3 (5) [10, 20, 30, 40, 50]
 // 50 3 (5) [10, 20, 30, 40, 50]

• map
  不会检测空数组，参数情况和forEach一样，可参考上面，返回一个对象

 ArrObj.map((item)=>{
	console.log(item);
 })
 // {name: "小李", age: 20, sex: "男"}
 // {name: "小林", age: 20, sex: "女"}
 // {name: "小凡", age: 20, sex: "男"}

但实际上我们通常更喜欢以return的方式返回一个数并接受它

 const item = ArrObj.map((item,index,arr)=>{return item})

• filter
  这个也跟循环有关，我也叫它筛选器，遍历数组里的每一项，更加精准方便的返回我们需要的数据，参数情况同上，返回一个数组

 const item = ArrObj.filter((e)=>{
		return e.name=='小李'
	})
 console.log(item)
// [{name: "小李", age: 20, sex: "男"}]

• every
  遍历数组每一项，对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true

 var flag = numarr.some(function (currentValue, index, arr) { 
     console.log(currentValue, index, arr) //
     return a > 20; //数组中的每个元素的值都要大于20,最后才返回true
     })
     console.log(flag)   //false

• some
  遍历数组每一项，对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true，符合条件之后，后续会停止判断

 var flag = numarr.some(function (currentValue, index, arr) { 
     console.log(currentValue, index, arr) //
     return a > 20; //数组中只要有一个元素大于20，那他就马上返回true
     })
     console.log(flag)   //true

基本关于循环的方法我都总结了下来，为了严谨我还专门搜了每一个循环更多的信息，相对来讲是比较全面了，如果还有我没有考虑到的方法或知识，欢迎评论多多补充