⚡️ 方法一：将对象转换为可迭代的结构
通过 Object.keys()、Object.values() 或 Object.entries() 将对象转为数组，再用 for...of 遍历：
1. 遍历对象的键（Keys）
javascript
const obj = { a: 1, b: 2 };
for (const key of Object.keys(obj)) {
console.log(key); // 输出 'a', 'b'
}2. 遍历对象的值（Values）
javascript
for (const value of Object.values(obj)) {
console.log(value); // 输出 1, 2
}3. 遍历键值对（Entries）
javascript
for (const [key, value] of Object.entries(obj)) {
console.log(key, value); // 输出 'a 1', 'b 2'
}⚡️ 方法二：手动让对象可迭代（添加 Symbol.iterator）
直接修改对象的原型，为其添加迭代器方法：
javascript
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）
更简洁的写法，利用生成器函数生成迭代器：
javascript
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 等库的工具函数，例如：
javascript
import _ from 'lodash';
const obj = { a: 1, b: 2 };
// 用 Lodash 遍历值
_.forEach(obj, (value, key) => {
console.log(key, value); // 输出 'a 1', 'b 2'
});⚠️ 注意事项
- 不要直接修改内置对象原型 （如
Object.prototype），这会影响所有对象。 - 优先使用
Object.keys()/Object.entries()，它们更安全且无需修改原对象。 - 如果一定要让对象原生支持
for...of，推荐使用方法二或三，但需确保代码可维护性。
总结
| 方法 | 场景 | 特点 |
|---|---|---|
Object.keys() |
快速获取键 | 无需修改对象，直接使用 |
Object.values() |
快速获取值 | 同上 |
Object.entries() |
获取键值对 | 方便解构（如 [key, value]） |
| 自定义迭代器 | 需要对象原生支持 for...of |
灵活但需修改对象结构 |
| 第三方库 | 复杂遍历需求 | 功能强大，适合企业级项目 |
回答：
首先来说forof是只能遍历可迭代对象的，返回值是value,比如说数组mapset等。 直接遍历普通对象的话会报错。 ...
html
<!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>