js for in for of用法

前情提要

for...in， for....of是两种常用的循环结构，允许遍历对象的属性或数组，字符串、Map、Set等可迭代对象元素

for...in循环

循环遍历对象可枚举属性（包括从原型上继承的属性）

注意：

• for-in 循环并不是按照对象属性在对象中的顺序迭代
• 会遍历对象的原型链，因此用hasOwnProperty来检查属性是否为 person 对象自身的属

const p = {
	name: 'jack',
	age: '1',
	gender: 'male'
}
for(let key in p) {
	if(p.hasOwnProperty(key)) {
		console.log(key, p[key])
	}
}
// name jack
// age 1
// gender male

for...of循环

ES6引入的新遍历指令，遍历可迭代对象元素，与for....in不同，它是遍历值，而不是键

注意：

• for..of不会遍历对象的原型链
• for...of循环遍历的是可迭代对象的元素值，而不是属性名
• for...of适用于数组、字符串、Map、Set等可迭代对象，不适用于迭代对象元素

  const p = {
  	name: 'jack',
  	age: '1',
  	gender: 'male'
  }
  
  for(let key of p) {
  	console.log(key)
  }
  //p is not iterable

总结

• for-in 循环适用于遍历对象，包括普通对象、数组、函数等；for-of 循环适用于遍历可迭代对象，包括数组、字符串、Map、Set、TypedArray 等。 
• for-in 循环的迭代顺序是不确定的，因为对象的属性没有固定的顺序。而 for-of 循环的迭代顺序是确定的，因为可迭代对象的值是按照一定顺序排列的
• for-in 循环遍历对象时，会遍历对象的原型链，性能会下降，因此数字对象最好用forof;而for-of 循环遍历的对象是可迭代对象，它们的值是可枚举的。

参考链接

你理解了for-in 和 for-of 吗？他们有什么区别？_for in for of-CSDN博客