本文主要介绍几种在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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。