JavaScript循环结构知识点

forEach，for…in，for…of的区别？

forEach

      forEach是数组的方法，对数组的每一个元素执行一次提供的函数。

• 更加简洁，效率与for循环相同不用关心集合下标问题，减少出错概率；
• 没有返回值，会改变原数组；
• 不能使用return、break终止循环；

for…in

      for…in是ES5的标准，用于遍历数组或者对象属性（大部分用于对象）。如果迭代对象的变量值是null或undefined，不执行循环体；

for…of

      ES6借鉴C++、Java、C++和Python语言，引入了for…of，作为遍历所有数据结构的统一方法。一个数据结构只要部署了SymbolLiterator属性，就被视为具有iterator接口，就可以用for…of循环遍历它的成员。如数组、set、map、类数组对象。

例题：统计数组中每个元素出现次数，输出json对象

let arr=['one','two','three','one']
function getMount(arr){
    let res={};
    for(let item of arr){
        if(res[item]==undefined){
            res[item]=1;
        }else{
            res[item]++;
        }
    }
    return res;
}
console.log('res:',getMount(arr))

forEach和map的区别

let arr=[1,2,2,3,4,4,5]
let res1=arr.forEach(function(item,index,arr){
    arr[index]=item*10;
})
console.log(res1,arr)

      forEach会改变原数组，没有返回值。

let arr=[1,2,2,3,4,4,5]
let res2=arr.map(function(item,index,input){
   return  item*10;
})
console.log(res2,arr)

      map（）不会改变原数组，会返回一个新数组，支持return语句。

forEach和map不支持异步转同步

      大家可以考虑这种情况，遍历去查询服务器获取数据，并且后边的代码需要借用上边查询到的数据，但是发送请求是一个异步操作，所以我们需要实现异步变同步：

let arr=[1,2,3,4,5];
function asyncEvent(ele){
    setTimeout(function(a){
        console.log(a)
    },500,ele)
}
function test(){
	arr.map(item=> asyncEvent(item));//异步任务 相当于发送请求
  	console.log("finish!");//同步任务
}
test();

      这个时候，用map或者forEach都会先打印出finish!，然后同时打印出12345。
      首先将异步函数用用Promise封装一下 ：

let arr=[1,2,3,4,5];
function asyncEvent(ele){
    return new Promise(resolve=>{
    	setTimeout(e=>{
      		console.log(e);
      		resolve(e)
    },1000,ele);
  })
  }

for…of

async function test(){
	for(let i of arr){
    	    await asyncEvent(i);
  	}
  	console.log("next");
}
test();

for循环

async function test(){
	for(let i=0;i<arr.length;i++){
   	     await asyncEvent(arr[i]);
        }
  	console.log("next");
}
test();