优雅的遍历JavaScript中的对象

2022-12-02 08:28:20

参考文章：https://dmitripavlutin.com/how-to-iterate-easily-over-object-properties-in-javascript/

遍历js中的对象，包括了遍历对象的key和value,以及还会遍历到继承的对象上的属性（原型上的属性），当有些属性是不可枚举的，是不能遍历到的。下面我们就要总结一下，哪些方法可以遍历自身的可枚举属性，哪些是可以遍历除了自身还有原型上的可枚举属性。

注意:能够遍历到的属性均是可枚举属性

这里补充一下，一个对象上的某个属性是否能够遍历，要看这个对象属性描述符的enumerable属性,一般默认是true,例如：

var person = {}
Object.defineProperty(person, 'name', {
  value: 'jack',
  enumerable: true
});

遍历自身可枚举属性的方法

Object.keys()

Object.keys()只访问对象本身的可枚举的属性。这是合理的，因为大多数时候只有这些属性需要被用到。让我们看一个例子

let person1 = {
 run: 'person run',
 walk: 'pseron walk'
}
let person2 = {
 work: 'person work',
 eat: 'pseron eat'
}
Object.setPrototypeOf(person2,person1)
console.log(Object.keys(person2))
console.log(person2['run'])
console.log(person2['walk'])

通过以上结果可以看出，Object.keys()返回person2的自身属性。

Object.values() 和 Object.entries()

Object.value()返回对象自身可枚举属性的值。而Object.entries()返回对象自身可枚举键值对的组合。

let person1 = {
 run: 'person run',
 walk: 'pseron walk'
}
let person2 = {
 work: 'person work',
 eat: 'pseron eat'
}
Object.setPrototypeOf(person2,person1)
console.log(Object.values(person2))
console.log(Object.entries(person2))

我们来看一下使用Object.value()如何获取循环遍历对象的每一个值

let person = {
 run: 'i run',
 eat: 'i eat',
 work: 'i work'
}
for (let value of Objet.values(person)) {
 console.log(value)
}

Object.entries()很强大，它返回对象的键和属性值，而且它们是成对的，比如： [ [key1, value1], [key2, value2], ..., [keyN, valueN] ]。
可能直接使用有些不爽。幸运的是，数组在for...of循环中传入let [x, y] = array，很容易得到对应的访问键和值

   let person = {
     run: 'i run',
     eat: 'i eat',
     work: 'i work'
    }
    for (let [key, value] of Objet.entries(person)) {
     console.log(key+':'+value)
    }

Object.entries(meals)返回meal对象的属性键和值到一个数组中。然后通过for...of循环解构性参数let [key, value]把数组中的值分配给key和value变量。

正如所见，访问的键和值现在已经是一种舒适而且易于理解的形式。由于Object.entries()返回一个与数组解构性赋值相兼容的集合，因此没有必要添加额外的赋值或声明行。

Object.entries()将普通对象导入到Map时是有用的。由于Object.entries()返回Map构造函数所接受的格式：key和value成对。因此问题变得无关紧要。

让我们创建一个JavaScript对象并将其导出到Map中

 let greetings = { 
      morning: 'Good morning', 
      midday: 'Good day', 
      evening: 'Good evening' 
  }
  let greetingsMap = new Map(Object.entries(greetings))
  greetingsMap.get('morning')
  greetingsMap.get('midday')
  greetingsMap.get('evening')

new Map(Object.entries(greetings))构造函数使用一个参数来调用，这个参数是greeting对象中导出的数组的一个键值对。

如预期的那样，map实例greetingsMap包含greetings对象导入的属性。可以使用.get(key)方法访问这些数据。

有趣的是，Map提供了与Object.values()和Object.entries()方法相同的方法（只有它们返回迭代器），以便提取Map实例的属性值或键值对：

Map.prototype.values()等价于Object.values()

Map.prototype.entries()等价于Object.entries()

Map提供了普通对象的改良版。你可以获得Map的大小（对于一个简单的对象，你必须手动操作），并使它作为键或对象类型（简单对象把键当作一个字符串原始类型）。

我们来看看map的.values()和.entries()方法返回什么：

let greetings = { 
    morning: 'Good morning', 
    midday: 'Good day', 
    evening: 'Good evening' 
}
let greetingsMap = new Map(Object.entries(greetings))[...greetingsMap.values()]
[...greetingsMap.entries()]

注意：object.values()和object.entries()返回数据的顺序是未确定的。所以不要依赖于顺序。

for in

for in 即可以遍历自身的可枚举属性，也可以遍历继承对象上的可枚举属性

let person1 = {
 run: 'person run',
 walk: 'pseron walk'
}
let person2 = {
 work: 'person work',
 eat: 'pseron eat'
}
Object.setPrototypeOf(person2,person1)
let enumerableKeys = []
for (let key in person2) { enumerableKeys.push(key) }
console.log(enmuerableKeys)

结束

码农公寓

遍历自身可枚举属性的方法

Object.keys()

Object.values() 和 Object.entries()

for in

相关文章