β

如何遍历JavaScript中对象属性

W3CPlus 38 阅读

在2016年6月发布的 ECMAScript 2016 的同一时期,令JavaScript开发人员开心的是知道另一组很棒的提案已经达到了 第4阶段 (完成)。

译者注:在翻译这篇文章时,这几个特性已得到了支持。

来看一下这组特性的清单:

新提议包括在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() 函数会跳过它们。

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 提供了普通对象的改良版。你可以获得 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() 返回数据的顺序是未确定的。所以不要依赖于顺序。

我希望你喜欢这篇文章。如果你喜欢的话,你可以自由地分享这篇文章,如果你对这些特性有看法,可以在下面的评论中与我们一起分享。

本文根据 @Dmitri Pavlutin 的《 How to iterate easily over object properties in JavaScript 》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处: https://rainsoft.io/how-to-iterate-easily-over-object-properties-in-javascript/

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3:核心技术与案例实战 》。

如需转载,烦请注明出处: https://www.w3cplus.com/javascript/how-to-iterate-easily-over-object-properties-in-javascript.html

作者:W3CPlus
原文地址:如何遍历JavaScript中对象属性, 感谢原作者分享。

发表评论