怎么区分Object.keys() 和 Object.values()?

Object.keys() 与 Object.values() 的区别

在 JavaScript 中，Object.keys() 和 Object.values() 是两个常用的方法，用于获取对象的属性名和属性值。它们都是 ECMAScript 2017 标准的一部分，能够简化对象操作。下面探讨这两个方法的区别、使用场景，并通过代码示例进行解析。

Object.keys()

Object.keys() 方法返回一个给定对象自身可枚举属性名的数组。这个方法适用于需要遍历或操作对象的键名的场景。

语法：

Object.keys(obj)

• 参数：

  • obj：要返回其可枚举属性名的对象。

• 返回值：

  • 包含对象可枚举属性名的数组。

示例：

const person = {
  name: 'Alice',
  age: 30,
  occupation: 'Engineer'
};

const keys = Object.keys(person);
console.log(keys); // 输出: ["name", "age", "occupation"]

在这个示例中，Object.keys(person) 返回了 person 对象的属性名数组。

Object.values()

Object.values() 方法返回一个给定对象自身可枚举属性值的数组。这个方法适用于当你只关心对象的值而不关心键名时的场景。

语法：

Object.values(obj)

• 参数：

  • obj：要返回其可枚举属性值的对象。

• 返回值：

  • 包含对象可枚举属性值的数组。

示例：

const person = {
  name: 'Alice',
  age: 30,
  occupation: 'Engineer'
};

const values = Object.values(person);
console.log(values); // 输出: ["Alice", 30, "Engineer"]

这里，Object.values(person) 返回了 person 对象的属性值数组。

比较与使用场景

• 键名与值：Object.keys() 用于获取属性名，适合需要对键名进行操作的情况，比如过滤或映射。Object.values() 用于获取属性值，适合只关心值的场景。

• 遍历：这两个方法都可以与数组方法（如 forEach()、map() 或 reduce()）配合使用来进行遍历操作。

  使用 map() 遍历：

  const person = {
    name: 'Alice',
    age: 30,
    occupation: 'Engineer'
  };
  
  // 遍历键名
  Object.keys(person).forEach(key => {
    console.log(key); // 输出: "name", "age", "occupation"
  });
  
  // 遍历值
  Object.values(person).forEach(value => {
    console.log(value); // 输出: "Alice", 30, "Engineer"
  });
  

• 与 Object.entries() 结合使用：有时你可能需要同时获取键名和值。Object.entries() 返回一个包含 [key, value] 对的数组。

  示例：

  const person = {
    name: 'Alice',
    age: 30,
    occupation: 'Engineer'
  };
  
  const entries = Object.entries(person);
  console.log(entries); // 输出: [["name", "Alice"], ["age", 30], ["occupation", "Engineer"]]
  

  这个方法在需要同时获取属性名和属性值时非常有用。

---

Object.keys() 和 Object.values() 的使用场景示例

Object.keys() 的使用场景

1. 遍历对象的键名

   场景： 你需要对一个对象的所有键名进行操作，例如在表单中生成输入字段。

   示例代码：

   const formFields = {
     username: 'text',
     password: 'password',
     email: 'email'
   };
   
   Object.keys(formFields).forEach(field => {
     console.log(`Field name: ${field}`); // 输出: "Field name: username", "Field name: password", "Field name: email"
   });
   

   这里，Object.keys() 获取了对象的所有键名，可以用来动态生成表单字段。

2. 检查对象是否包含特定键

   场景： 你需要验证一个对象是否包含特定的属性，以便进行条件处理。

   示例代码：

   const user = {
     name: 'Alice',
     age: 30
   };
   
   const hasAge = Object.keys(user).includes('age');
   console.log(hasAge); // 输出: true
   

   在这个例子中，Object.keys() 用来检查 user 对象中是否包含 age 属性。

Object.values() 的使用场景

1. 统计对象属性值的统计信息

   场景： 你需要计算对象值的总和或其他统计信息。例如，计算对象属性值的总和。

   示例代码：

   const scores = {
     math: 85,
     science: 90,
     history: 78
   };
   
   const totalScore = Object.values(scores).reduce((sum, score) => sum + score, 0);
   console.log(totalScore); // 输出: 253
   

   使用 Object.values() 可以快速获取所有值并进行总和计算。

2. 根据值过滤对象

   场景： 你需要过滤出值满足特定条件的对象属性。

   示例代码：

   const products = {
     apple: 1.2,
     banana: 0.5,
     cherry: 2.0
   };
   
   const affordableProducts = Object.entries(products)
     .filter(([key, value]) => value < 1.0)
     .map(([key]) => key);
   
   console.log(affordableProducts); // 输出: ["banana"]
   

   在这个示例中，Object.values() 用来筛选价格低于 1.0 的产品，并输出符合条件的产品名。

总结

• Object.keys() 适用于需要操作或检查对象的属性名的场景，如生成表单字段、检查是否存在特定键等。
• Object.values() 适用于需要操作或统计对象的值的场景，如计算总和、根据值进行过滤等。

这些方法提供了灵活的手段来处理对象，使得操作对象属性变得更加高效和直观。