深入浅出Object.keys()、Object.values()、Object.entries()方法

Object.keys()

Object.keys() 静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。--MDN

简单理解就是Object.keys()作为一个静态方法，返回对象中所有可枚举的键属性名，并返回这些键属性名组成的数组。

列举一个现实生活中的例子：可以将对象比作一个房子，对象的键属性名就像是房子的不同房间，使用Object.keys()方法可以获取房子的所有房间名称的列表。

语法

Object.keys(obj)

只有一个参数obj作为对象。

案例

• 数组

const arr = ["a", "b", "c"]
console.log(Object.keys(arr)) // [ '0', '1', '2' ]

• 对象

const arr = { "a": '张三', "b": "李四", "c": "王五" }
console.log(Object.keys(arr)) // [ 'a', 'b', 'c' ]

• 数组对象

const data = [
  {
    "category": "水果",
    "name": "西瓜",
    "number": 20,
  },
  {
    "category": "水果",
    "name": "西瓜",
    "number": 141,
  },
  {
    "category": "蔬菜",
    "name": "西红柿",
    "number": 1,
  },
  {
    "category": "蔬菜",
    "name": "西红柿",
    "number": 92,
  }
];

console.log("data", Object.keys(data)) // [ '0', '1', '2', '3' ]

更复杂的使用场景可以参考文章：数组对象合并后计算

当我们在应对复杂的场景的时候可能单纯获取属性并不能满足我们的要求，这个时候如果想要获取属性的值可以看下面的Object.values()方法。

Object.values()

Object.values() 静态方法返回一个给定对象的自有可枚举字符串键属性值组成的数组。 --MDN

简单理解就是Object.values()是一个静态的方法，返回一个给定对象的可悲剧字符串属性值组成的数组。

列举一个现实生活中的例子：假设你有一个购物清单，其中包含了你要买的物品和对应的价格，你可以使用Object.values()方法来获取这个购物清单中所有物品的价格，然后将这些价格组成一个数组。

语法

Object.values(obj)

只有一个参数obj作为对象。

案例

• 数组对象

const arr = { "a": '张三', "b": "李四", "c": "王五" }
console.log(Object.values(arr)) // [ '张三', '李四', '王五' ]

更复杂的使用场景可以参考文章：拆分数组对象中数组内容并计数

上面说的两种方式都是作为单独获取一个属性或者值，下面这个方法用于同时获取属性值的场景。

Object.entries()

Object.entries() 静态方法返回一个数组，包含给定对象自有的可枚举字符串键属性的键值对。--MDN

简单理解就是Object.entries()是一个静态方法，该方法返回一个数组并包含给定对象可枚举字符串的属性键值对。

列举一个现实生活中的例子：假设有一个购物清单对象，其中包含了不同商品的名称和价格，使用Object.entries()方法可以将该对象转换为一个数组，数组中的每个元素都是包含商品名称和价格的键值对。

语法

Object.entries(obj)

只有一个参数obj作为对象。

案例

• 数组对象

const arr = { "a": '张三', "b": "李四", "c": "王五" }
console.log(Object.entries(arr)) // [ [ 'a', '张三' ], [ 'b', '李四' ], [ 'c', '王五' ] ]

小结

本文总共列举了三种遍历键值对的方式，当然也可以使用for...in、for...of等遍历方式，存在的区别这个可以自查下，写这篇文章的目的主要还是想加深自己对这三个方法的理解。

个人博客已上线，欢迎来访~ 传送门：夜雨炊烟