JS中遍历对象属性的方法是什么-创新互联
小编给大家分享一下JS中遍历对象属性的方法是什么,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:国际域名空间、虚拟空间、营销软件、网站建设、湛江网站维护、网站推广。列出了这些功能:
Object.values()
和Object.entries()
异步函数
str.padStart()
和str.padEnd()
Object.getOwnPropertyDescriptors()
在函数参数列表和调用中的拖尾逗号(Trailing commas)
新提议包括在2017年要发布的ESMAScript2017标准中,可能会在2017年夏天发布。请注意,这个功能列表可能会一直增长。太好了!
当然,你不必等到ES2017发布,或者直到供应商(浏览器)实现了新功能!Babel已经包含了这些已完成的提案中的大部分特性。
本文主要讨论如何改进对象属性的迭代:
使用
Object.values()
获取对象属性使用
Object.entries()
获取属性key/value
乍一看,这些静态函数似乎并没有带来显著的价值。但是当它们与for...of
循环配合使用,你会得到一种简而美的遍历对象的属性的方式。
让我们一探究竟吧。
自己的和可枚举的属性
正如你可能已经知道的那样,Object.keys()
只访问对象本身和可枚举的属性。这是合理的,因为大多数时候只有这些属性需要评估。
让我们看一个对象拥有和继承属性的例子。Object.keys()
只返回自己的属性键(key
):
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.keys(natureColors)
返回natureColors
对象自身和可枚举的属性键:['colorC', 'colorD']
。natureColors
包含从simpleColors
原型对象继承的属性。然而,Object.keys()
函数会跳过它们。
Object.values()
和Object.entries()
访问对象的属性采用相同的标准:拥有和可枚举属性。让我们来看看:
let simpleColors = { colorA: 'white', colorB: 'black' }; let natureColors = { colorC: 'green', colorD: 'yellow' }; Object.values(natureColors); // => ['green', 'yellow'] Object.entries(natureColors); // => [ ['colorC', 'green'], ['colorD', 'yellow'] ]
现在请注意和for...in不同之处。循环遍历可枚举的自己和继承的属性。下面的例子说明了这一点:
let simpleColors = { colorA: 'white', colorB: 'black' }; let natureColors = { colorC: 'green', colorD: 'yellow' }; let enumerableKeys = []; for (let key in natureColors) { enumerableKeys.push(key); } enumerableKeys; // => ["colorC", "colorD", "colorA", "colorB"]
enumerableKeys
数组包含natureColors对象自己属性的键:'colorC'
和'colorD'
。
此外,for...in
遍历从simpleColors
原型中继承过来的属性键:'colorA'
和'colorB'
。
Object.values()返回属性值
为了区分Object.values()
的好处,让我们先看看在2017年之前获取对象的属性值是怎么来实现的。
首先使用Object.keys()
来收集属性键,然后使用一个属性访问器,并将值存储在一个额外的变量中。让我们看一个例子:
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' }
meals
是一个普通的JavaScript对象。使用Object.keys(meals)
和for...of
的循环枚举出对象键值。代码看起来很简单,但是可以通过去掉let mealName = meals[key]
来优化它。
通过使用Object.values()
可以直接访问对象属性值,可以实现优化。优化代码后如下:
let meals = { mealA: 'Breakfast', mealB: 'Lunch', mealC: 'Dinner' }; for (let mealName of Object.values(meals)) { console.log(mealName); // => 'Breakfast' 'Lunch' 'Dinner' }
由于Object.values(meals)
返回数组中的对象属性值,因此通过for...of
循环把对象的属性值直接分配给mealName
,因此不需要添加额外的代码,就像前面的例子那样。
Object.values()
只做一件事,但做得很好。这也是我们写代码的正确姿势。
Object.entries()返回属性值和键
Object.entries()
很强大,它返回对象的键和属性值,而且它们是成对的,比如: [ [key1, value1], [key2, value2], ..., [keyN, valueN] ]
。
可能直接使用有些不爽。幸运的是,数组在for...of
循环中传入let [x, y] = array
,很容易得到对应的访问键和值。
下面是Object.entries()
的示例:
let meals = { mealA: 'Breakfast', mealB: 'Lunch', mealC: 'Dinner' }; for (let [key, value] of Object.entries(meals)) { console.log(key + ':' + value); // => 'mealA:Breakfast' 'mealB:Lunch' 'mealC:Dinner' }
Object.entries(meals)
返回meal对象的属性键和值到一个数组中。然后通过for...of
循环解构性参数let [key, value]
把数组中的值分配给key
和value
变量。
正如所见,访问的键和值现在已经是一种舒适而且易于理解的形式。由于Object.entries()
返回一个与数组解构性赋值相兼容的集合,因此没有必要添加额外的赋值或声明行。
Object.entries()
将普通对象导入到Map
时是有用的。由于Object.entries()
返回Map
构造函数所接受的格式:key
和value
成对。因此问题变得无关紧要。
让我们创建一个JavaScript对象并将其导出到Map
中:
let greetings = { morning: 'Good morning', midday: 'Good day', evening: 'Good evening' }; let greetingsMap = new Map(Object.entries(greetings)); greetingsMap.get('morning'); // => 'Good morning' greetingsMap.get('midday'); // => 'Good day' greetingsMap.get('evening'); // => 'Good evening'
new Map(Object.entries(greetings))
构造函数使用一个参数来调用,这个参数是greeting
对象中导出的数组的一个键值对。
如预期的那样,map
实例greetingsMap
包含greetings
对象导入的属性。可以使用.get(key)
方法访问这些数据。
有趣的是,Map
提供了与Object.values()
和Object.entries()
方法相同的方法(只有它们返回迭代器),以便提取Map
实例的属性值或键值对:
Map.prototype.values()
等价于Object.values()
Map.prototype.entries()
等价于Object.entries()
Map
提供了普通对象的改良版。你可以获得Map
的大小(对于一个简单的对象,你必须手动操作),并使它作为键或对象类型(简单对象把键当作一个字符串原始类型)。
我们来看看map
的.values()
和.entries()
方法返回什么:
let greetings = { morning: 'Good morning', midday: 'Good day', evening: 'Good evening' }; let greetingsMap = new Map(Object.entries(greetings)); [...greetingsMap.values()]; // =>['Good morning', 'Good day', 'Good evening'] [...greetingsMap.entries()]; // =>[['morning','Good morning'], ['midday','Good day'],['evening','Good evening']]
注意:greetingsMap.values()
和greetingsMap.entries()
返回迭代器对象(Iterator Objects)。将结果放入一个数组,扩展运算符...
是必要的。在for...of
循环语句中可以直接使用迭代器。
关于顺序上的笔记
JavaScript对象是简单的键值映射。所以对象的属性的顺序是无关紧要的。在大多数情况下,你不应该依赖它。
然而,ES2015已经对迭代的方式提供了标准化的要求:首先是有序的数字字符,然后是插入顺序的字符串,然后是插入顺序的符号(symbols
)。在ES5和较早的标准中,属性的顺序没有指定。
如果你需要一个有序的集合,推荐的方法是将数据存储到数组或集合中。
总结
Object.values()
和Object.entries()
是为JavaScript开发人员提供函数的另一个改进步骤的新标准化 。
Object.entries()
好用数据组解构性参数来执行,这样键和值就可以很容易地分配给不同的变量。这个函数还可以很容易地将普通JavaScript对象属性导出到Map
对象中。Map
能够更好地支持传统的map
(或hash
)行为。
注意:object.values()
和object.entries()
返回数据的顺序是未确定的。所以不要依赖于顺序。
看完了这篇文章,相信你对JS中遍历对象属性的方法是什么有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
名称栏目:JS中遍历对象属性的方法是什么-创新互联
链接分享:http://pwwzsj.com/article/ddgioj.html