【九月打卡】第4天 for-in和for-of的区别?-原创手记-慕课网

第一模块:

课程名称:2周刷完100道前端优质面试真题
课程章节:第四章第十节 js中for-in和for-of有什么区别？
主讲老师:双越

第二模块:

课程内容概述

获取到key(0,1,2,3)
const arr = [10,20,30,40];
for(let key in arr){
	console.log(key);
}

获取到val(10,20,30,40)
const arr = [10,20,30,40];
for(let val of arr){
	console.log(val);
}

图片描述

适用于不同的数据类型

遍历对象： for-in可以
遍历Map Set、遍历generator：for-of可以

const set = new Set([10,20,30,40]);
for(let n of set){
	console.log(n);//10,20,30,40
}

const map = new Map([
	['x',100],
	['y',200],
	['z',300]
])
for(let n of map){
	console.log(n);//内容值
}

可枚举VS可迭代(原因对比)

for-in：用于可枚举数据，如对象、数字、字符串(enumerable: true)，得到key
for-of：用于可迭代数据，如数组、字符串、Map、Set,得到value

补充：

for-await-of有什么作用？

const list = [p1,p2,p3]；
// 方式一
Promise.all(list).then(res=>{
	console.log(res);
})
// 方式二
for await(let res of list){
	console.log(res);
}
// 场景：图片按需加载
// 方式三,执行第一个后再去执行第二个，顺序执行
for(let num of list){
	const res = await createPromise(num);
	console.log(re);
}

第三模块：

更加清晰地明白for-in和for-of 的区别
在工作中能够更加游刃有余

第四模块：

图片描述