本文主要介绍几种在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中轻松遍历对象属性的几种方法的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。