Introduction aux méthodes de parcours des propriétés d'objet dans JS

Dans la même période où ECMAScript 2016 a été publié en juin 2016, les développeurs JavaScript seront heureux de savoir qu'une autre série de propositions intéressantes a été atteinte Phase 4 (Terminé).

Note du traducteur : lors de la traduction de cet article, ces fonctionnalités ont été prises en charge.

Listons ces fonctionnalités :

• Object.values() et Object.entries()

• Fonctions asynchrones

• str.padStart() et str.padEnd()

• Object.getOwnPropertyDescriptors()

• Guillemets de fin dans les listes et les appels de paramètres de fonction

La nouvelle proposition est incluse dans le standard ESMAScript2017 qui sera publié en 2017, probablement à l'été 2017. Veuillez noter que cette liste de fonctionnalités peut continuer à s'allonger. Très bien!

Bien sûr, vous n'avez pas besoin d'attendre la sortie d'ES2017, ni jusqu'à ce que le fournisseur (navigateur) implémente les nouvelles fonctionnalités ! Babel inclut déjà la plupart des fonctionnalités de ces propositions terminées.

Cet article explique principalement comment améliorer l'itération des propriétés d'objet :

• Utilisez Object.values() pour obtenir les propriétés d'objet

• Utiliser Object.entries() Obtenir des propriétés key/value

À première vue, ces fonctions statiques ne semblent pas apporter de valeur significative. Mais lorsqu'ils sont utilisés conjointement avec une boucle for...of, vous obtenez une manière simple et esthétique de parcourir les propriétés d'un objet.

Découvreons.

Propriétés propres et énumérables

Comme vous le savez probablement déjà, Object.keys() accède uniquement à l'objet lui-même et aux propriétés énumérables. Ceci est raisonnable puisque la plupart du temps seules ces propriétés doivent être évaluées.

Regardons un exemple d'objet possédant et héritant de propriétés. Object.keys()Renvoie uniquement ses propres clés de propriété (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)Renvoie l'objet natureColors lui-même et les clés de propriété énumérables : . ['colorC', 'colorD'] contient les propriétés héritées de l'objet prototype natureColors. Cependant, la fonction simpleColors les ignore. Object.keys()

et Object.values() accèdent aux propriétés d'un objet en utilisant les mêmes critères : propriétés possédées et dénombrables. Jetons un coup d'oeil : 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'] ]

Remarquez maintenant la différence par rapport à for...in. Boucle sur les propriétés propres et héritées de l'énumérable. L'exemple suivant illustre cela : Le tableau

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"]

contient les clés des propriétés propres de l'objet natureColors : enumerableKeys et 'colorC'. 'colorD'

De plus,

parcourt les clés de propriété héritées du prototype for...in : simpleColors et 'colorA'. 'colorB'

Object.values() renvoie la valeur d'attribut

Afin de distinguer les avantages de

, voyons d'abord comment obtenir la valeur d'attribut d'un objet avant 2017. Object.values()

Utilisez d'abord

pour collecter la clé de propriété, puis utilisez un accesseur de propriété et stockez la valeur dans une variable supplémentaire. Regardons un exemple : 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() Mieux réalisé avec les paramètres de déstructuration des groupes de données afin que les clés et les valeurs puissent être facilement attribuées à différentes variables. Cette fonction facilite également l'exportation des propriétés normales des objets JavaScript vers des objets Map. Map prend mieux en charge le comportement traditionnel map (ou hash).

Remarque : L'ordre dans lequel object.values() et object.entries() renvoient les données est indéterminé. Alors ne vous fiez pas à la commande.

Adresse originale en anglais : https://dmitripavlutin.com/how-to-iterate-easily-over-object-properties-in-javascript/

Adresse de traduction : https : //www.w3cplus.com/javascript/how-to-iterate-easily-over-object-properties-in-javascript.html

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!