Explication détaillée de 5 méthodes de parcours de boucle d'objets Javascript

Comment parcourir des objets Javascript ? L'article suivant présentera en détail cinq méthodes de traversée d'objets JS et comparera brièvement ces cinq méthodes. J'espère qu'il vous sera utile !

1. Méthode de traversée d'objet

• pour ... dansfor ... in

• Object.keys(), Object.values(), Object.entries()

• Object.getOwnPropertyNames()

• Object.getOwnPropertySymbols()

• Reflect.ownKeys()

二、对象属性遍历次序规则

以上5种方法遍历对象的属性时都遵守同样的属性遍历次序规则

• 属性名为数值，按照数值升序排序

• 属性名为字符串，按照生成时间升序排序

• 属性名为Symbol，按照生成时间升序排序

三、遍历方法详解

1. for in

for…in 主要用于循环对象属性。循环中的代码每执行一次，就会对对象的属性进行一次操作。其语法如下：

for (var in object) {
 执行的代码块
}

其中两个参数：

• var：必须。指定的变量可以是数组元素，也可以是对象的属性。

• object：必须。指定迭代的的对象。

var obj = {a: 1, b: 2, c: 3}; 
 
for (var i in obj) { 
    console.log('键名：', i); 
    console.log('键值：', obj[i]); 
}

输出结果：

键名：a
键值：1
键名：b
键值：2
键名：c
键值：3

注意：

• for in 方法不仅会遍历当前的对象所有的可枚举属性，还会遍历其原型链上的属性。

2. Object.keys()、Object.values()、Object.entries()

这三个方法都用来遍历对象，它会返回一个由给定对象的自身可枚举属性（不含继承的和Symbol属性）组成的数组，数组元素的排列顺序和正常循环遍历该对象时返回的顺序一致，这个三个元素返回的值分别如下：

• Object.keys()：返回包含对象键名的数组；

• Object.values()：返回包含对象键值的数组；

• Object.entries()：返回包含对象键名和键值的数组。

let obj = { 
  id: 1, 
  name: 'hello', 
  age: 18 
};
console.log(Object.keys(obj));   // 输出结果: ['id', 'name', 'age']
console.log(Object.values(obj)); // 输出结果: [1, 'hello', 18]
console.log(Object.entries(obj));   // 输出结果: [['id', 1], ['name', 'hello'], ['age', 18]

注意

• Object.keys()方法返回的数组中的值都是字符串，也就是说不是字符串的key值会转化为字符串。

• 结果数组中的属性值都是对象本身可枚举的属性，不包括继承来的属性。

3. Object.getOwnPropertyNames()

Object.getOwnPropertyNames()方法与Object.keys()类似，也是接受一个对象作为参数，返回一个数组，包含了该对象自身的所有属性名。但它能返回不可枚举的属性。

let a = ['Hello', 'World'];
 
Object.keys(a) // ["0", "1"]
Object.getOwnPropertyNames(a) // ["0", "1", "length"]

这两个方法都可以用来计算对象中属性的个数：

var obj = { 0: "a", 1: "b", 2: "c"};
Object.getOwnPropertyNames(obj) // ["0", "1", "2"]
Object.keys(obj).length // 3
Object.getOwnPropertyNames(obj).length // 3

4. Object.getOwnPropertySymbols()

Object.getOwnPropertySymbols() 方法返回对象自身的 Symbol 属性组成的数组，不包括字符串属性：

let obj = {a: 1}
 
// 给对象添加一个不可枚举的 Symbol 属性
Object.defineProperties(obj, {
 [Symbol('baz')]: {
  value: 'Symbol baz',
  enumerable: false
 }
})
 
// 给对象添加一个可枚举的 Symbol 属性
obj[Symbol('foo')] = 'Symbol foo'
 
Object.getOwnPropertySymbols(obj).forEach((key) => {
 console.log(obj[key]) 
})
 
// 输出结果：Symbol baz Symbol foo

5. Reflect.ownKeys()

Reflect.ownKeys() 返回一个数组，包含对象自身的所有属性。它和Object.keys()类似，Object.keys()返回属性key，但不包括不可枚举的属性，而Reflect.ownKeys()会返回所有属性key：

var obj = {
 a: 1,
 b: 2
}
Object.defineProperty(obj, 'method', {
 value: function () {
     alert("Non enumerable property")
 },
 enumerable: false
})
 
console.log(Object.keys(obj))
// ["a", "b"]
console.log(Reflect.ownKeys(obj))
// ["a", "b", "method"]

注意：

• Object.keys() ：相当于返回对象属性数组；

• Reflect.ownKeys() :相当于 Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj)

Object.keys(), Object.values(), Object.entries( )

Object.getOwnPropertyNames()obéissent toutes aux mêmes règles d'ordre de parcours d'attribut lors du parcours des propriétés d'un objetvaleurvaleurChaîneTemps de générationSymboleTemps de générationfor…in est. principalement utilisé pour boucler les propriétés des objets. Chaque fois que le code de la boucle est exécuté, les propriétés de l'objet seront exploitées. La syntaxe est la suivante : Deux paramètres : objet : obligatoire. Spécifie l’objet sur lequel effectuer une itération. Résultat de sortie : Remarque :

Utilisez les trois méthodes pour parcourir l'objet, il renverra un tableau composé des propres propriétés énumérables de l'objet donné (à l'exclusion des propriétés héritées et Symbol). L'ordre des éléments du tableau est cohérent avec l'ordre renvoyé lorsque l'objet est parcouru normalement. par chaque élément sont les suivants : Object.values() : renvoie un tableau contenant la valeur de la clé de l'objet ; Object.entries() : renvoie un tableau contenant les noms de clés d'objet et les valeurs de clés. NoteLes valeurs du tableau renvoyées par la méthode Object.keys() sont toutes des chaînes, ce qui signifie que les valeurs de clé qui ne sont pas des chaînes seront converties en chaînes. Les valeurs d'attribut dans le tableau de résultats sont tous des de l'objet lui-même, à l'exclusion des attributs hérités.

3. La méthode Object.getOwnPropertyNames()

Object.getOwnPropertyNames() est similaire à Object.keys() et accepte également un object En paramètre, renvoie un tableau contenant tous les noms de propriétés de l'objet lui-même. Mais il peut renvoyer des propriétés

	Object.getOwnPropertySymbols()		Reflect.ownKeys()		2. Règles d'ordre de parcours des attributs d'objet	Les cinq méthodes ci-dessus
Le nom de l'attribut est	, selon la	Trier par ordre croissant		Le nom de l'attribut est	, Trier par	Par ordre croissant
Le nom de l'attribut est	, Trier par	Ordre croissant		3. Explication détaillée de la méthode de traversée		1 for in
rrreee		var : obligatoire. La variable spécifiée peut être un élément de tableau ou une propriété d'objet.			rrreee	rrreee
for in méthode parcourra non seulement toutes les propriétés énumérables de l'objet actuel, mais parcourra également les propriétés de sa chaîne de prototypes.		2. Object.keys(), Object.values(), Object.entries()			Object.keys() : renvoie un tableau contenant le nom de la clé de l'objet ;
	rrreee				attributs énumérables

non énumérables.

rrreeeLes deux méthodes peuvent être utilisées pour compter le nombre de propriétés dans un objet : rrreee

4.Object.getOwnPropertySymbols()🎜🎜 🎜 La méthode Object.getOwnPropertySymbols() renvoie un tableau de propriétés Symbol de l'objet lui-même, à l'exclusion des propriétés de chaîne : 🎜rrreee🎜🎜5. ()🎜🎜🎜Reflect.ownKeys() renvoie un tableau contenant toutes les propriétés de l'objet lui-même. C'est similaire à Object.keys(). Object.keys() renvoie les clés de propriété, mais n'inclut pas les propriétés non énumérables, tandis que Reflect.ownKeys() renvoie toutes les clés de propriété : 🎜rrreee🎜Remarque : 🎜

🎜🎜 Object.keys() : équivalent au retour d'un tableau de propriétés d'objet ; 🎜🎜🎜🎜Reflect.ownKeys() : équivalent à Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj). 🎜🎜 🎜🎜4. Comparaison des méthodes de traversée🎜🎜🎜🎜🎜Méthode de traversée🎜🎜Auto-propriétés🎜🎜Propriétés héritées🎜🎜Propriétés de base de traversée🎜🎜Chaîne de prototypes de traversée🎜🎜Propriétés de traversée non énumérables🎜 🎜Type de symbole🎜🎜🎜 🎜🎜🎜pour ... en🎜🎜self🎜🎜hérite🎜🎜oui🎜🎜oui🎜🎜non🎜🎜ne contient pas🎜🎜🎜🎜Object.keys()🎜🎜self🎜🎜🎜🎜 🎜oui🎜🎜non 🎜 🎜Non🎜🎜Non Contient 🎜🎜🎜🎜Object.getOwnPropertyNames()🎜🎜self🎜🎜🎜🎜🎜 est 🎜🎜 non 🎜🎜 est 🎜🎜 ne contient pas 🎜🎜🎜 🎜Object.getOwnPropertySymbols() 🎜🎜Self🎜🎜🎜 🎜🎜Non🎜🎜Non 🎜🎜 est 🎜🎜 Toutes les propriétés des symboles 🎜🎜🎜🎜Reflect.ownKeys()🎜🎜 lui-même 🎜🎜🎜🎜🎜 est 🎜🎜 non 🎜🎜 est 🎜 🎜 contient 🎜🎜🎜🎜 🎜[Recommandations associées : 🎜Tutoriel d'apprentissage javascript🎜🎜 】🎜🎜

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!