Il existe plusieurs façons de parcourir des objets dans JS

Il y a quelques jours, un ami m'a demandé Object.getOwnPropertyNames() à quoi elle sert

Je n'utilise pas vraiment cette méthode en temps ordinaire, donc je ne sais pas comment y répondre pendant un moment

D'après le nom de la méthode, cela devrait être. Ce qui est renvoyé est un tableau composé des propres noms d'attributs de l'objet

N'est-ce pas la même chose que la méthode Object.keys() ? 🎜>Je sentais que les choses n'étaient pas si simples, alors j'ai regardé de plus près ces méthodes. La différence entre les méthodes de parcours d'objets

for in

for in loop est le moyen le plus basique de traverse les objets, il obtiendra également les attributs sur la chaîne du prototype de l'objet

// 创建一个对象并指定其原型，bar 为原型上的属性
const obj = Object.create({
  bar: 'bar'
})

// foo 为对象自身的属性
obj.foo = 'foo'

for (let key in obj) {
  console.log(obj[key]) // foo, bar
}

Oui Voyez que les attributs sur le prototype de l'objet sont également recyclés

Dans ce cas, vous pouvez utiliser le méthode pour filtrer les attributs sur la chaîne du prototype

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(obj[key]) // foo
  }
}

A ce moment, le prototype L'attribut bar est filtré hasOwnProperty()

Object.keys

est un nouvelle méthode objet dans ES5. Cette méthode renvoie un tableau composé des propres noms d'attributs de l'objet, qui seront automatiquement filtrés. Les attributs de la chaîne prototype peuvent ensuite être parcourus via la méthode

du tableau

Object.keys(obj).forEach((key) => {
  console.log(obj[key]) // foo
})

Il existe également des méthodes Object.keys() et des méthodes forEach(). La portée de ces deux méthodes est similaire à la méthode . Par conséquent, il n'est plus expliqué que la boucle

Object.values()for in. La méthode Object.entries() ne renverra pas les propriétés non énumérables de l'objet Object.keys()

Si vous devez parcourir les propriétés non énumérables, vous devez utiliser la méthode

Object.keys()

Object susmentionnée. .getOwnPropertyNames

Object.getOwnPropertyNames()

est également une nouvelle méthode objet dans ES5. Cette méthode renvoie un tableau composé des propres noms de propriétés de l'objet, y compris les propriétés non énumérables, vous pouvez également parcourir

// 创建一个对象并指定其原型，bar 为原型上的属性
// baz 为对象自身的属性并且不可枚举
const obj = Object.create({
  bar: 'bar'
}, {
  baz: {
    value: 'baz',
    enumerable: false
  }
})

obj.foo = 'foo'

// 不包括不可枚举的 baz 属性
Object.keys(obj).forEach((key) => {
  console.log(obj[key]) // foo
})

// 包括不可枚举的 baz 属性
Object.getOwnPropertyNames(obj).forEach((key) => {
  console.log(obj[key]) // baz, foo
})

via la méthode

du tableau. ES2015 a ajouté le type de données Symbol, qui peut être utilisé comme clé de l'objet. Pour ce type, ES2015 a également ajouté une nouvelle méthode

Object.getOwnPropertyNames() Le Object.getOwnPropertySymbolsforEach

renvoie un tableau de propriétés Symbol de l'objet lui-même, à l'exclusion des propriétés de chaîne Object.getOwnPropertySymbols()

Object.getOwnPropertySymbols(obj).forEach((key) => {
  console.log(obj[key])
})

Rien, car l'objet n'a pas encore de propriété Symbol

La méthode

// 给对象添加一个不可枚举的 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
})

Reflect.ownKeys

Object.getOwnPropertySymbols()

est une nouvelle méthode statique dans ES2015. Cette méthode renvoie un tableau de tous les noms de propriétés de l'objet lui-même, y compris les propriétés non énumérables et les propriétés de symbole

.

Reflect.ownKeys(obj).forEach((key) => {
  console.log(obj[key]) // baz, foo, Symbol baz, Symbol foo
})

Comparaison

ConclusionReflect.ownKeys()

Parmi elles, seule la boucle for in obtiendra les attributs sur la chaîne de prototype d'objet, les autres méthodes ne sont applicables qu'aux attributs de l'objet lui-même

Les nouvelles fonctionnalités ajoutées ultérieurement dans le langage ES n'auront pas d'effets secondaires sur le code précédent. Par exemple, la boucle for in qui existait avant ES2015, Object.keys() et Object.getOwnPropertyNames() n'en aura certainement pas. renvoie la propriété Symbol.

方式	基本属性	原型链	不可枚举	Symbol
for in	是	是	否	否
Object.keys()	是	否	否	否
Object.getOwnPropertyNames()	是	否	是	否
Object.getOwnPropertySymbols()	否	否	是	是
Reflect.ownKeys()	是	否	是	是

Tutoriel recommandé : "

Tutoriel JS

"

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!