JS中如何轻松遍历对象属性的方式总结

自身可枚举属性

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举，那么将返回由键组成的数组。

这是合理的，因为大多数时候只需要关注对象自身的属性。

来看看一个对象拥有自身和继承属性的例子，Object.keys()只返回自己的属性键：

let simpleColors = { colorA: 'white', colorB: 'black'};let natureColors = { colorC: 'green', colorD: 'yellow'};Object.setPrototypeOf(natureColors, simpleColors);Object.keys(natureColors); // => ['colorC', 'colorD']natureColors['colorA']; // => 'white'natureColors['colorB']; // => 'black'

Object.setPrototypeOf() 方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性）到另一个对象或 null。

Object.keys(natureColors)返回natureColors对象的自身可枚举属性键： ['colorC'，'colorD'] 。

natureColors包含从simpleColors原型对象继承的属性，但是Object.keys()函数会跳过它们。

Object.values() 和 Object.entries() 也都是返回一个给定对象自身可枚举属性的键值对数组

// ...Object.values(natureColors); // => ['green', 'yellow']Object.entries(natureColors);// => [ ['colorC', 'green'], ['colorD', 'yellow'] ]

现在注意与for..in语句的区别，for..in不仅可以循环枚举自身属性还可以枚举原型链中的属性

// ...let enumerableKeys = [];for (let key in natureColors) { enumerableKeys.push(key);}enumerableKeys; // => ['colorC', 'colorD', 'colorA', 'colorB']

enumerableKeys数组包含natureColors自身属性键: 'colorC'和'colorD'。

另外for..in也遍历了从simpleColors原型对象继承的属性

2. Object.values() 返回属性值

Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。

来个例子，使用Object.keys()收集keys，然后通过 key 去对象取对应的值：

let meals = { mealA: 'Breakfast', mealB: 'Lunch', mealC: 'Dinner'};for (let key of Object.keys(meals)) { let mealName = meals[key]; // ... do something with mealName console.log(mealName);}// 'Breakfast' 'Lunch' 'Dinner'

meal是一个普通对象。 使用Object.keys(meals)和枚举的for..of循环获取对象键值。

代码看起来很简单，但是，let mealName = meals[key] 没有多大的必要，可以进一步优化，如下：

let meals = { mealA: 'Breakfast', mealB: 'Lunch', mealC: 'Dinner'};for (let mealName of Object.values(meals)) { console.log(mealName);}// 'Breakfast' 'Lunch' 'Dinner'