[JS] 对比for...in... 和 for...of...

for...in 和 for...of 是 JavaScript 中两种不同的遍历方法，for...in...出现的时间早于for...of...
(

for...in... 是ES5标准
for...of... 是ES6标准

)

用途比较:

for...in... 主要用于遍历对象的属性名(key)，包括对象自身的可枚举属性和继承的属性。(数组也是对象，所以可以被for...in...迭代)。

for...of... 主要用于遍历可迭代对象（iterable），如数组、字符串、Set

注意:

1、for...in 不仅遍历对象自身的属性，还会遍历继承的属性，因此需要使用额外的检查来排除继承属性(objectInstance.hasOwnProperty("key"))。
2、一个数据结构只要部署了Symbol.iterator属性，就可以用for...of循环遍历它的成员。也就是说，for...of循环内部调用的是数据结构的Symbol.iterator方法。对于普通的对象，for...of 结构不能直接使用，会报错。

看下面的代码示例

  // 遍历数组
  let arr = ["a","b"];
  for (let item in arr) {
    console.log(item); // 第一次输出0, 第二次输出1
  }

  for (let item of arr) {
    console.log(item); // 第一次输出a, 第二次输出b
  }

  // 遍历对象
  const obj = {
    a: "aa",
    b: "bb"
  }
  for (let item in obj) {
    console.log(item); // 第一次输出a, 第二次输出b
  }

  for (let item of obj) {
    console.log(item); // 报错 Uncaught TypeError: obj is not iterable
  }

  // 遍历Map;
  const map = new Map();
  map.set("a", "aa");
  map.set("b", "bb");

  for (let item in map) {
    console.log(item); // 第一次没有输出 第二次没有输出
  }

  for (let item of map) {
    console.log(item); // 第一次输出["a", "aa"], 第二次输出["b", "bb"]
  }

  // 遍历Set;
  const set = new Set(["a", "b"]);

  for (let item in set) {
    console.log(item); // 第一次没有输出 第二次没有输出
  }

  for (let item of set) {
    console.log(item); // 第一次输出a, 第二次输出b
  }

完结。

同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/cg1zrv5lu85zttym