本文主要介绍几种在JS中轻松遍历对象属性的方法。本文从其自身的可枚举属性、Object.values()返回的值和Object.entries()来介绍它们。感兴趣的朋友可以参考一下。
目录
1、自枚举属性2、Object.values()返回属性值3、Object.entries()4、对象属性的顺序
1、自身可枚举属性
Object.keys()方法返回给定对象的自枚举属性数组。属性名在数组中的顺序与.in循环用于循环访问对象。如果对象的键值不可枚举，将返回一个键数组。
这是合理的，因为很多时候我们只需要关注物体本身的属性。
来看看一个对象拥有自身和继承属性的例子，Object.keys()只返回自己的属性键：
让简单颜色={
颜色：“白色”，
颜色：“黑色”
};
let natureColors={
颜色：“绿色”，
颜色：“黄色”
};
object . setprototypeof(nature colors，simple colors)；
object . keys(nature colors)；//=[colorC ， colorD]
nature colors[ colorA ]；//=白色
nature colors[ colorB ]；//=黑色
object.setprototype()方法将指定对象的原型(即内部[[Prototype]]属性)设置为另一个对象或null。
Object.keys(natureColors)返回natureColors对象的可枚举属性键：[color ， color]。
NatureColors包含从simpleColors原型对象继承的属性，但是Object.keys()函数跳过它们。
Object.values()和Object.entries()也是键-值对的数组，它们返回给定对象本身的可枚举属性。
//.
object . values(nature colors)；
//=[绿色，黄色]
object . entries(nature colors)；
//=[ [colorC ， green]，[colorD ， yellow] ]
现在请注意与for的区别.在声明中，对于.in不仅可以枚举自己的属性，还可以枚举原型链中的属性。
//.
设enumerate keys=[]；
对于(输入自然颜色){
enumerate keys . push(key)；
}
enumeratable keys；//=[colorC ， colorD ， colorA ， colorB]
EnumerableKeys数组包含natureColors自己的属性键：“color”和“color”。
此外，对于.in还遍历从simpleColors原型对象继承的属性。
2、Object.values() 返回属性值
**Object.values()**方法返回给定对象本身的所有可枚举属性值的数组，其顺序与使用for的顺序相同.in循环(区别在于for-in循环枚举原型链中的属性)。
来个例子，使用Object.keys()收集keys，然后通过 key 去对象取对应的值：
让膳食={
mealA:“早餐”，
mealB:“午餐”，
mealC:“晚餐”
};
for(let key of object . keys(meals)){
let meal name=meals[key]；
//.用我的名字做点什么
console . log(meal name)；
}
//早餐 午餐 晚餐
饭是一个普通的对象。使用Object.keys(膳食)和枚举的.以获取对象键值。
代码看起来很简单，但是，让mealName=meals[key]不是必需的，可以进一步优化，
如下：
让膳食={
mealA:“早餐”，
mealB:“午餐”，
mealC:“晚餐”
};
for(let meal name of object . values(meals)){
console . log(meal name)；
}
//早餐 午餐 晚餐
因为Object.values(meals)返回数组中对象属性的值，所以它可以在for中直接简化.的。MealName直接在循环中赋值。
3、Object.entries()
Object.entries()方法返回给定对象自己的可枚举属性的键值对数组，这些属性的排列顺序与.in循环用于遍历对象(不同的是for-in循环还枚举原型链中的属性)。
Object.entries()返回一个键值对数组，如[[key1，value1]，[key2，value2]，[keyn，valuen]]。
直接使用这些键-值对可能不方便，但是通过数组解构赋值访问键和值变得非常容易，
如下所示：
让膳食={
mealA:“早餐”，
mealB:“午餐”，
mealC:“晚餐”
};
for (let [key，value]of object . entries(meals)){
console.log(关键字:值)；
}
//mealA:早餐 mealB:午餐 mealC:晚餐
如上图，因为Object.entries()返回一个与数组解构赋值兼容的集合，所以不需要为赋值或声明添加额外的行。
Object.entries()在将普通对象转换为Map时很有用，因为Object.entries()返回的格式与Map构造函数接受的格式完全相同：(key，value)。
通过使用传统的Map构造函数，可以将二维的键-值对数组转换为Map对象。
来个例子，让人缓缓：
让问候={
早上：“早上好”，
正午：“日安”，
晚上：“晚上好”
};
let greetings Map=new Map(object . entries(greetings))；
greeting map . get( morning )；//=早上好
greetingsMap.get(正午)；//=日安
greeting map . get( evening )；//=晚上好
Map对象保存键值对。任何值(对象或原始值)都可以用作键或值。
有趣的是，Map提供了Object.values()和Object.entries()的等价方法(除了它们返回迭代器)，
以便为Map实例提取属性值或键值对：
Map.prototype.values()等效于Object.values()
Map.prototype.entries()等效于Object.entries()
Map是普通对象的改进版，可以获取map的大小(对于普通对象，必须手动获取)，使用任意对象类型作为key(普通对象使用string原语类型作为key)。
让我们看看返回.values（）和.entries（）的map的方法：
//.
[.greeting map . values()]；
//=[早上好，你好，晚上好]
[.greeting map . entries()]；
//=[ [早安，早安]，[正午，日安]，
//[晚上好，晚上好] ]
注意：
reetingsMap.values()和greetingsMap.entries()返回迭代器对象。要将结果放入数组中，需要扩展运算符…4、对象属性的顺序
JS是一个简单的键值映射。因此，对象中属性的顺序无关紧要。在大多数情况下，不应该依赖它。
在ES5和更早的标准中，属性的顺序根本没有规定。
但是，从ES 6开始，属性的顺序是基于一个特殊的规则，除非是按时间特别排序。两个新方法Object.getOwnPropertyNames和Reflect.ownKeys用于编写示例来解释这种属性排序规则。
数字：
当属性类型为数字类型时，会按照数字从大到小的顺序排序；字符串：
当属性的类型为字符串时，按时间顺序排序；Symbol：
当属性类型为符号时，按时间顺序排序。如果需要有序集合，建议将数据存储在数组或集合中。
总结：
Object.values()和Object.entries()是为JS开发者提供新的标准化辅助功能的另一个改进步骤。
Object.entries()最适合数组解构赋值，因为它很容易将键和值赋给不同的变量。这个函数也可以很容易地将纯JS对象属性映射到Map对象。
注意：
object . values()和Object.entries()返回数据的顺序是不确定的，不要依赖这种方式。没有办法知道代码实时部署后可能存在的bug。之后为了解决这些bug，在日志调试上花了大量的时间。这里顺便推荐一个简单易用的bug监控工具Fundebug。
关于在JS中轻松遍历对象属性的几种方法的文章到此结束。有关在JS中轻松遍历对象属性的几种方法的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
