为何JavaScript中for of遍历字符串正常，遍历普通对象却不生效

原因说明 #

for...of 只能遍历可迭代对象（Iterable），也就是实现了Symbol.iterator接口的对象：

• 字符串、数组、Map、Set、类数组对象（如arguments、DOM节点集合）都是JS内置的可迭代对象，默认部署了Symbol.iterator接口，所以可以直接用for...of遍历。
• 普通对象默认没有实现该接口，直接用for...of遍历会抛出is not iterable类型的报错。

可行解决方案 #

方案1：改用for...in遍历对象键名 #

for...in是专门用于遍历对象可枚举属性的语法，直接使用即可：

for (key in me_labba) {
  console.log(key); // 输出 name、bd
  // 如需获取对应值可使用 me_labba[key]
}

方案2：将对象的键/值转成数组后用for...of遍历 #

借助Object的静态方法把需要遍历的内容转成可迭代的数组即可：

// 遍历所有键名
for (key of Object.keys(me_labba)) {
  console.log(key);
}

// 遍历所有属性值
for (value of Object.values(me_labba)) {
  console.log(value);
}

// 同时遍历键和值
for ([key, value] of Object.entries(me_labba)) {
  console.log(`${key}: ${value}`);
}

方案3：手动给对象部署Symbol.iterator接口（按需使用） #

如果需要多次直接用for...of遍历该类对象，可以手动添加迭代接口：

me_labba[Symbol.iterator] = function* () {
  const allKeys = Object.keys(this);
  for (const key of allKeys) {
    yield [key, this[key]];
  }
}

// 现在可以直接遍历获取键值对
for ([key, value] of me_labba) {
  console.log(key, value);
}

内容的提问来源于stack exchange，提问作者kezara