Heim > Web-Frontend > js-Tutorial > Hauptteil

Vergleich von JavaScript-Objektiterationsmethoden und Leistung

hzc
Freigeben: 2020-06-10 16:51:46
nach vorne
3062 Leute haben es durchsucht

Object.entries


gibt alle 可枚举 Schlüssel-Wert-Paare des Objekts zurück und verfolgt das key

let obj = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3',
}
Object.entries(obj).forEach(entry => {
  let key = entry[0]
  let value = entry[1]
  // entry 会是这样 ["key1", "value1"]
})
Nach dem Login kopieren

< nicht auf der Prototypkette. 🎜>Object.keys


Gibt alle aufzählbaren Schlüssel des Objekts zurück

let obj = {
  key1: &#39;value1&#39;,
  key2: &#39;value2&#39;,
  key3: &#39;value3&#39;,
}
Object.keys(obj).forEach(key => {
  let value = obj[key]
})
Nach dem Login kopieren

Object.values


Alle aufzählbaren Werte des Objekts zurückgeben

let obj = {
  key1: &#39;value1&#39;,
  key2: &#39;value2&#39;,
  key3: &#39;value3&#39;,
}
Object.values(obj).forEach(value => {
  // 只能使用 value
})
Nach dem Login kopieren

for…in-Schleife


Aufzählbare Eigenschaften iterieren und entlang der Prototypenkette suchen

let obj = {
  key1: &#39;value1&#39;,
  key2: &#39;value2&#39;,
  key3: &#39;value3&#39;,
}
for (const key in obj) {
  let value = obj[key]
  if (obj.hasOwnProperty(key)) {
    // 本身的
  } else {
    // 来自原型链的
  }
}
Nach dem Login kopieren

Object.getOwnPropertyNames


Gibt alle (einschließlich nicht aufzählbaren) Schlüssel des Objekts zurück (im Originaltext hieß es, dass nach der Prototypenkette gesucht wird). falsch)

let obj = {
  key1: &#39;value1&#39;,
  key2: &#39;value2&#39;,
  key3: &#39;value3&#39;,
}
Object.getOwnPropertyNames(obj).forEach(key => {
  let value = obj[key]
})
Nach dem Login kopieren

Leistungsvergleich


Der folgende Code verwendet die oben genannten Methoden, um Objekte mit 1.000.000 Attributen zu durchlaufen und 10 Mal eine Schleife zu durchlaufen

const { PerformanceObserver, performance } = require(&#39;perf_hooks&#39;)

let objectSize = 1000000
let iterations = 10

console.log(
  &#39;Starting performance test with %d object size and %d iterations&#39;,
  objectSize,
  iterations
)

let values = {
  ENTRIES: 0,
  KEYS: 0,
  VALUES: 0,
  FORIN: 0,
  GETOWP: 0,
}

const obs = new PerformanceObserver(items => {
  let entry = items.getEntries()[0]
  console.log(entry.name, entry.duration)
  values[entry.name] += entry.duration
  performance.clearMarks()
})
obs.observe({ entryTypes: [&#39;measure&#39;] })

function generateObject() {
  let obj = {}
  for (let i = 0; i < objectSize; i++) {
    obj[&#39;key&#39; + Math.random()] = &#39;val&#39; + Math.random()
  }
  return obj
}

for (let i = 0; i < iterations; i++) {
  let obj = generateObject()

  //Object.entries
  performance.mark(&#39;A&#39;)
  Object.entries(obj).forEach(entry => {
    let key = entry[0]
    let value = entry[1]
  })
  performance.mark(&#39;B&#39;)
  performance.measure(&#39;ENTRIES&#39;, &#39;A&#39;, &#39;B&#39;)

  //Object.Keys
  performance.mark(&#39;A&#39;)
  Object.keys(obj).forEach(key => {
    let value = obj[key]
  })
  performance.mark(&#39;B&#39;)
  performance.measure(&#39;KEYS&#39;, &#39;A&#39;, &#39;B&#39;)

  //Object.Values
  performance.mark(&#39;A&#39;)
  Object.values(obj).forEach(value => {})
  performance.mark(&#39;B&#39;)
  performance.measure(&#39;VALUES&#39;, &#39;A&#39;, &#39;B&#39;)

  //For In
  performance.mark(&#39;A&#39;)
  for (const key in obj) {
    let value = obj[key]
  }
  performance.mark(&#39;B&#39;)
  performance.measure(&#39;FORIN&#39;, &#39;A&#39;, &#39;B&#39;)

  //Object.getOwnPropertyNames
  performance.mark(&#39;A&#39;)
  Object.getOwnPropertyNames(obj).forEach(key => {
    let value = obj[key]
  })
  performance.mark(&#39;B&#39;)
  performance.measure(&#39;GETOWP&#39;, &#39;A&#39;, &#39;B&#39;)
}

console.log(
  Object.entries(values).sort((a, b) => {
    return a[1] - b[1]
  })
)
Nach dem Login kopieren

Die folgenden Ergebnisse habe ich selbst ausgeführt. Zufällig bedeutet, dass beim Zuweisen von Werten Zufallszahlen verwendet werden. Das erhaltene Leistungsranking ist das gleiche wie das des Autors V8, dies sollte sein. Es stellt auch die Leistungsbewertung im Browser dar.

// 顺序
;[
  [&#39;FORIN&#39;, 4677.321499],
  [&#39;KEYS&#39;, 4812.776572],
  [&#39;GETOWP&#39;, 8610.906197],
  [&#39;VALUES&#39;, 9914.674390999999],
  [&#39;ENTRIES&#39;, 19338.083694],
]

// 随机
;[
  [&#39;KEYS&#39;, 4502.579589],
  [&#39;FORIN&#39;, 4678.013548000001],
  [&#39;GETOWP&#39;, 8880.325031999999],
  [&#39;VALUES&#39;, 10104.106962],
  [&#39;ENTRIES&#39;, 17089.637588999998],
]
Nach dem Login kopieren
Ich habe schon einmal gehört, dass die Engine den nächsten Wert errät, um schneller zu laufen. Wenn man sich die Daten ansieht, scheint das keine große Auswirkung zu haben.

Es sind auch ein paar nützliche Informationen. Kommen Sie zum Originaltext, um dem Autor zu applaudieren

Empfohlenes Tutorial: „

JS-Tutorial

Das obige ist der detaillierte Inhalt vonVergleich von JavaScript-Objektiterationsmethoden und Leistung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage