苍穹
管理员
管理员
  • UID2
  • 粉丝0
  • 关注0
  • 发帖数202
阅读:8532回复:1

ES6~ 如何遍历JavaScript中对象属性

楼主#
更多 发布于:2018-08-20 18:42
在2016年6月发布的ECMAScript 2016的同一时期,令JavaScript开发人员开心的是知道另一组很棒的提案已经达到了第4阶段(完成)。著作权归作者所有。

来看一下这组特性的清单:
  • 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); 
      // => {colorC: "green", colorD: "yellow"} 
Object.keys(natureColors);   // => ['colorC', 'colorD'] 
natureColors['colorA'];   // => 'white' 
natureColors['colorB'];  // => 'black'




Object.keys(natureColors)返回natureColors对象自身和可枚举的属性键:['colorC', 'colorD']natureColors包含从simpleColors原型对象继承的属性。然而,Object.keys()函数会跳过它们。
苍穹
管理员
管理员
  • UID2
  • 粉丝0
  • 关注0
  • 发帖数202
沙发#
发布于:2018-08-20 18:45
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'] ]
游客


返回顶部