Es gibt mehrere Möglichkeiten, Objekte in JS zu durchlaufen

Vor ein paar Tagen hat mich ein Freund gefragt Object.getOwnPropertyNames()wofür es verwendet wird

Ich verwende diese Methode normalerweise nicht wirklich, daher weiß ich eine Weile nicht, was ich darauf antworten soll

Aus dem Methodennamen sollte Folgendes hervorgehen: Was zurückgegeben wird, ist ein Array, das aus den eigenen Attributnamen des Objekts besteht

Ist das nicht dasselbe wie die Object.keys()-Methode

Ich hatte das Gefühl, dass die Dinge nicht so einfach sind, also habe ich mir diese Methoden genauer angesehen. Der Unterschied zwischen den Methoden zum Durchlaufen von Objekten

for in

for in-Schleife ist der grundlegendste Weg dazu Beim Durchlaufen von Objekten werden auch die Attribute in der Objektprototypkette abgerufen

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

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

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

Ja Achten Sie darauf, dass die Attribute im Objektprototyp ebenfalls recycelt werden

In diesem Fall können Sie die Methode zum Herausfiltern der Attribute in der Prototypenkette hasOwnProperty()

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

Zu diesem Zeitpunkt wird der Prototyp Das Balkenattribut wird herausgefiltert

Object.keys

ist ein Neue Objektmethode in ES5. Diese Methode gibt ein Array aus den objekteigenen Attributnamen zurück, die automatisch herausgefiltert werden. Die Attribute in der Prototypenkette können dann über die Object.keys()-Methode des Arrays forEach()

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

. Es gibt auch -Methoden und

-Methoden. Der Umfang dieser beiden Methoden ähnelt der Object.values()-Methode. Daher wird nicht mehr erklärt, dass die Object.entries()Object.keys()for-in-Schleife und Die

-Methode gibt die nicht aufzählbaren Eigenschaften des Objekts nicht zurück

Object.keys()Wenn Sie die nicht aufzählbaren Eigenschaften durchlaufen müssen, müssen Sie die oben genannte

-Methode

Object.getOwnPropertyNames() verwenden Object.getOwnPropertyNames

ist auch eine neue Objektmethode in ES5. Diese Methode gibt ein Array zurück, das aus den eigenen Eigenschaftsnamen des Objekts besteht, einschließlich nicht aufzählbarer Eigenschaften. Sie können auch

// 创建一个对象并指定其原型，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
})

über die Object.getOwnPropertyNames()-Methode des Arrays. ES2015 hat den Symboldatentyp hinzugefügt, der als Schlüssel des Objekts verwendet werden kann. Für diesen Typ hat ES2015 auch eine neue forEach-Methode Object.getOwnPropertySymbols

Object.getOwnPropertySymbols()

-Methode gibt ein Array von Symboleigenschaften des Objekts selbst zurück, ausgenommen String-Eigenschaften

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

Nichts, da das Objekt noch keine Symboleigenschaft hat

Die Methode

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

Object.getOwnPropertySymbols()Reflect.ownKeys

ist eine neue statische Methode in ES2015. Diese Methode gibt ein Array zurück, das aus allen Eigenschaftsnamen des Objekts selbst besteht, einschließlich nicht aufzählbarer Eigenschaften und Symboleigenschaften

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

Vergleich

Reflect.ownKeys()

Schlussfolgerung

Unter diesen erhält nur die for-in-Schleife die Attribute in der Objektprototypkette, andere Methoden sind nur auf die Attribute des Objekts anwendbar Objekt selbst

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

Neue Funktionen, die später in der ES-Sprache hinzugefügt werden, werden keine Nebenwirkungen auf den vorherigen Code haben. Beispielsweise werden die for in-Schleife, die vor ES2015 existierte, Object.keys() und Object.getOwnPropertyNames() definitiv gibt die Symbol-Eigenschaft nicht zurück.

Empfohlenes Tutorial: „

JS-Tutorial

“

Das obige ist der detaillierte Inhalt vonEs gibt mehrere Möglichkeiten, Objekte in JS zu durchlaufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!