您的位置 首页 技术

JavaScript对象迭代方法和性能的比较

Object.entries 返回对象所有可枚举的键值对,不会追寻原型链上的 key let obj = { key1: 'value1', key2: &#0…

Object.entries


返回对象所有可枚举的键值对,不会追寻原型链上的 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"]})

Object.keys


返回对象所有可枚举的键

let obj = {  key1: 'value1',  key2: 'value2',  key3: 'value3',}Object.keys(obj).forEach(key => {  let value = obj[key]})

Object.values


返回对象所有可枚举的值

let obj = {  key1: 'value1',  key2: 'value2',  key3: 'value3',}Object.values(obj).forEach(value => {  // 只能使用 value})

for…in loop


迭代可枚举属性,会顺着原型链找下去

let obj = {  key1: 'value1',  key2: 'value2',  key3: 'value3',}for (const key in obj) {  let value = obj[key]  if (obj.hasOwnProperty(key)) {    // 本身的  } else {    // 来自原型链的  }}

Object.getOwnPropertyNames


返回对象所有(包括不可枚举)的键(原文说会找原型链是错的)

let obj = {  key1: 'value1',  key2: 'value2',  key3: 'value3',}Object.getOwnPropertyNames(obj).forEach(key => {  let value = obj[key]})

性能比较


下面的代码用上面的几种方法遍历有 1000000 个属性的对象,循环 10 次

const { PerformanceObserver, performance } = require('perf_hooks')let objectSize = 1000000let iterations = 10console.log(  'Starting performance test with %d object size and %d iterations',  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: ['measure'] })function generateObject() {  let obj = {}  for (let i = 0; i < objectSize; i++) {    obj['key' + Math.random()] = 'val' + Math.random()  }  return obj}for (let i = 0; i < iterations; i++) {  let obj = generateObject()  //Object.entries  performance.mark('A')  Object.entries(obj).forEach(entry => {    let key = entry[0]    let value = entry[1]  })  performance.mark('B')  performance.measure('ENTRIES', 'A', 'B')  //Object.Keys  performance.mark('A')  Object.keys(obj).forEach(key => {    let value = obj[key]  })  performance.mark('B')  performance.measure('KEYS', 'A', 'B')  //Object.Values  performance.mark('A')  Object.values(obj).forEach(value => {})  performance.mark('B')  performance.measure('VALUES', 'A', 'B')  //For In  performance.mark('A')  for (const key in obj) {    let value = obj[key]  }  performance.mark('B')  performance.measure('FORIN', 'A', 'B')  //Object.getOwnPropertyNames  performance.mark('A')  Object.getOwnPropertyNames(obj).forEach(key => {    let value = obj[key]  })  performance.mark('B')  performance.measure('GETOWP', 'A', 'B')}console.log(  Object.entries(values).sort((a, b) => {    return a[1] - b[1]  }))

下面的结果是我自己跑的,顺序的是指赋值的时候直接用 index,随机则是键值对都插入随机数,得到的性能排序是和作者一样的,也因为 node.js 和 chrome 都是 V8,所以这个应该也是代表在浏览器上的性能排序。

// 顺序;[  ['FORIN', 4677.321499],  ['KEYS', 4812.776572],  ['GETOWP', 8610.906197],  ['VALUES', 9914.674390999999],  ['ENTRIES', 19338.083694],]// 随机;[  ['KEYS', 4502.579589],  ['FORIN', 4678.013548000001],  ['GETOWP', 8880.325031999999],  ['VALUES', 10104.106962],  ['ENTRIES', 17089.637588999998],]

之前听说引擎会猜测下一个值让运行速度更快,看数据似乎没有太大影响。

也算是一点干货,快点来原文给作者鼓鼓掌吧

推荐教程:《JS教程》

以上就是JavaScript对象迭代方法和性能的比较的详细内容,更多请关注24课堂在线网其它相关文章!

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:https://www.24ketang.cn/72598.html

为您推荐

返回顶部