js如何遍历对象属性,js遍历对象的几种方法,JS中轻松遍历对象属性的几种方式

js如何遍历对象属性,js遍历对象的几种方法,JS中轻松遍历对象属性的几种方式

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

留言与评论(共有 条评论)
   
验证码: