JavaScript 遍历对象

# 普通遍历：只遍历对象自身、可枚举的属性，不包含原型链、Symbol、不可枚举属性。
for...in  +  if (obj.hasOwnProperty(key)) # 遍历自身 或者 自身和原型链属性
Object.keys() + forEach # 遍历对象 key 数组
Object.values() + forEach # 遍历对象 value 数组
Object.entries() + for...of  # 彻底解构遍历对象

# 包含 Symbol 属性的遍历，以上方法遍历不到 Symbol 类型的 key
Object.getOwnPropertySymbols() # 只获取自身 Symbol 属性
Reflect.ownKeys() # 自身所有属性（字符串 + Symbol + 不可枚举）

# 包含不可枚举属性的遍历
Object.getOwnPropertyNames() # 获取自身所有属性（包括不可枚举，不含 Symbol）

# 遍历自身属性和原型链属性
for...in（不加 hasOwnProperty）

# 二维键值对数据转对象
Object.fromEntries

案例

const obj = { name: "小明", age: 18 };

for...in

最经典，但是要注意原型链属性

for (let key in obj) {
  console.log(key, obj[key]); // name 小明, age 18
}

for (let key in obj) {
  if (obj.hasOwnProperty(key)) { // 只保留自身属性
    console.log(key, obj[key]);
  }
}

Object.keys() + forEach

对象 key 数组

Object.keys(obj).forEach(key => {console.log(key, obj[key])});

Object.values() + forEach

对象 value 数组

Object.values(obj).forEach(val => console.log(val));

Object.entries() + for...of

对象 键值对 数组

for (let [key, val] of Object.entries(obj)) {
  console.log(key, val);
}

Object.getOwnPropertySymbols()

只获取自身 Symbol 属性

const sym = Symbol('age');
const obj = { name: '小明', [sym]: 18 };

Object.getOwnPropertySymbols(obj).forEach(key => {
  console.log(key, obj[key]);
});

Reflect.ownKeys()

最强遍历：自身所有属性（字符串 + Symbol + 不可枚举）

Reflect.ownKeys(obj).forEach(key => {
  console.log(key, obj[key]);
});

Object.getOwnPropertyNames()

最强遍历：自身所有属性（字符串 + Symbol + 不可枚举）

// 例：数组的 length 是不可枚举属性
const arr = [1, 2];
Object.getOwnPropertyNames(arr); // ["0", "1", "length"]