如何使用for of 遍历普通对象？

⚡️ 方法一：将对象转换为可迭代的结构

通过 Object.keys()、Object.values() 或 Object.entries() 将对象转为数组，再用 for...of 遍历：

1. 遍历对象的键（Keys）

const obj = { a: 1, b: 2 };

for (const key of Object.keys(obj)) {
  console.log(key); // 输出 'a', 'b'
}

2. 遍历对象的值（Values）

for (const value of Object.values(obj)) {
  console.log(value); // 输出 1, 2
}

3. 遍历键值对（Entries）

for (const [key, value] of Object.entries(obj)) {
  console.log(key, value); // 输出 'a 1', 'b 2'
}

---

⚡️ 方法二：手动让对象可迭代（添加 Symbol.iterator）

直接修改对象的原型，为其添加迭代器方法：

const obj = { a: 1, b: 2 };

// 定义 Symbol.iterator 方法
obj[Symbol.iterator] = function() {
  const keys = Object.keys(this);
  let index = 0;
  return {
    next: () => {
      if (index < keys.length) {
        const key = keys[index++];
        return { value: this[key], done: false }; // 返回值
      } else {
        return { done: true };
      }
    }
  };
};

// 现在可以用 for...of 遍历对象的值
for (const value of obj) {
  console.log(value); // 输出 1, 2
}

---

⚡️ 方法三：使用生成器函数（Generator）

更简洁的写法，利用生成器函数生成迭代器：

const obj = { a: 1, b: 2 };

obj[Symbol.iterator] = function* () {
  for (const key of Object.keys(this)) {
    yield this[key]; // 返回当前值
  }
};

for (const value of obj) {
  console.log(value); // 输出 1, 2
}

---

⚡️ 方法四：借助第三方库

使用 Lodash 或 Ramda 等库的工具函数，例如：

import _ from 'lodash';

const obj = { a: 1, b: 2 };

// 用 Lodash 遍历值
_.forEach(obj, (value, key) => {
  console.log(key, value); // 输出 'a 1', 'b 2'
});

---

⚠️ 注意事项

1. 不要直接修改内置对象原型 （如 Object.prototype），这会影响所有对象。
2. 优先使用 Object.keys()/Object.entries()，它们更安全且无需修改原对象。
3. 如果一定要让对象原生支持 for...of，推荐使用方法二或三，但需确保代码可维护性。

---

总结

方法	场景	特点
Object.keys()	快速获取键	无需修改对象，直接使用
Object.values()	快速获取值	同上
Object.entries()	获取键值对	方便解构（如 [key, value]）
自定义迭代器	需要对象原生支持 for...of	灵活但需修改对象结构
第三方库	复杂遍历需求	功能强大，适合企业级项目

回答：

首先来说forof是只能遍历可迭代对象的，返回值是value,比如说数组mapset等。 直接遍历普通对象的话会报错。 ...

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    const obj ={
      a:'23',
      b:'67'
    }
    
    const arr = [1,2,3]
    // for in
    for(const key in obj){
      console.log(key);
    }
    // for of 
    for(const value of arr){
      console.log(value);  
    }
    //使用for of遍历普通对象直接报错
    // for(const aaa of obj){
    //   console.log(aaa);
    // }
    //如何使用for of遍历普通对象?
    //方案一:可以把对象的键\值以及键值对转成数组,使用Object.keys方法Object.values方法以及Object.entries方法
    for(const key of Object.keys(obj)){
      console.log(key);
    }
    for(const value of Object.values(obj)){
      console.log(value);
    }
    for(const kv of Object.entries(obj)){
      console.log(kv);
    }
   //方案二:添加Symbol.iterator方法,让普通对象也可迭代
   obj[Symbol.iterator] = function(){
    //先获取普通对象键的数组
    const keys = Object.keys(this)
    //定义遍历的起始位置
    let index = 0
    // 返回遍历方法
    return {
      next:()=>{
      // 先检查索引是否越界
      if(index < keys.length){
        // 不越界的话,先获取键,然后让索引加1,然后返回键对应的值,标记为false
        let key = keys[index++]
        return {value:this[key], done:false}
      }else{
        // 越界的话,返回标记为true
        return {done : true}
      }
    }    
   }
    }
   for(const aaa of obj){
      console.log(aaa);
    }
  </script>
</body>
</html>