JavaScript：浅析for...of、for...in，简单易懂~

一、for in与for of

for-in语句是一种严格的迭代语句，用于枚举对象中的非符号键属性。也就是说：for in返回的是key值，而不是value。

for-of语句是一种严格的迭代语句，用于遍历可迭代对象的元素。也就是说：for of只能用于遍历存在迭代器的数据，且返回的是value值。

1、对于数组

for in输出的值是数组的下标

let arr=[1,2,3,4,5];
for (const key in arr) {
  console.log(key);  // 0，1，2，3，4
}

for of输出的是数组的值 

let arr=[1,2,3,4,5];
for (const key of arr) {
  console.log(key);  // 1，2，3，4，5
}

2、对于对象

for in输出的值是对象的键

let obj={
  name:"marry",
  age:18,
  gender:"男"
}
for (const key in obj) {
  console.log(key);  // name,age,gender
}

for of不能遍历对象，因为object不可迭代 

let obj={
  name:"marry",
  age:18,
  sex:"男"
}
for (const key of obj) {
  console.log(key);  // TypeError: obj is not iterable
}

3、对于原型链

for in能拿到原型链上定义的属性名

let arr=[1,2,3,4,5];
Array.prototype.test=321;
for (const key in arr) {
  console.log(key);  // 0，1，2，3，4，test
}

for of不会遍历原型链，拿不到原型链上定义的数据，只会遍历元素本身 

let arr=[1,2,3,4,5];
Array.prototype.test=321;
for (const key of arr) {
  console.log(key);  // 1，2，3，4，5
}

总结：

• for in：适用于遍历对象；输出的值为key值；会遍历原型链上的属性；不能保证返回对象属性的顺序。换句话说，所有可枚举的属性都会返回一次，但返回的顺序可能会因浏览器而异；
• for of：适用于遍历数组等内置迭代器的数据；输出的值为value值；不会遍历原型链上的属性；按照可迭代对象的next()方法产生值的顺序迭代元素；