推荐|对象数据的读取，看这一篇就够了！Object.keys()、Object.values()和Object.entries()用法详解；如何获取对象原型链上的属性


let person = {
  name: "Alice",
  age: 30
};
 
// 使用点符号访问属性
console.log(person.name); // 输出: Alice
 
// 使用方括号访问属性
console.log(person['age']); // 输出: 30

二、对象中键、值及键值对重组的操作Object.keys()、Object.values()和Object.entries()

2.1、基础用法介绍

2.1.1、Object.keys(obj)

obj为要操作的对象

返回一个包含对象自身可枚举属性的键数组。这个方法只考虑对象自身的属性，不考虑原型链上的属性。


let person = {
  name: "Alice",
  age: 30
};
 
let keys = Object.keys(user);
console.log(keys); // ["name", "age"]

2.1.2、Object.values(obj)

返回一个包含对象自身可枚举属性值的数组。


let person = {
  name: "Alice",
  age: 30
};
 
let values = Object.values(user);
console.log(values); // ["Alice", 30]

2.1.3、Object.entries(obj)

返回一个给定对象自身可枚举属性的键值对数组。每个键值对是一个数组，其中第一个元素是键，第二个元素是值。


let person = {
  name: "Alice",
  age: 30
};
 
let entries = Object.entries(user);
console.log(entries); // [["name", "Alice"], ["age", 30]]

2.2、开发中会遇到的复杂案例

2.2.1、数据示例

假设有一个复杂的对象，表示一个公司员工的详细信息，包括他们的个人信息、技能和项目。如下所示：


let employee = {
  id: 1001,
  name: "John Doe",
  department: "Engineering",
  skills: ["JavaScript", "React", "Node.js"],
  projects: {
    project1: {
      name: "Project A",
      startDate: "2021-01-01",
      endDate: "2021-12-31"
    },
    project2: {
      name: "Project B",
      startDate: "2022-01-01",
      current: true
    }
  }
};

2.2.2、直接访问嵌套属性

常通过点符号直接获取：


console.log(employee.department); // "Engineering"
console.log(employee.projects.project1.name); // "Project A"

2.2.3、使用Object.keys()获取属性键


let employeeKeys = Object.keys(employee);
console.log(employeeKeys);
 
//["id", "name", "department", "skills", "projects"]
 
let projectKeys = Object.keys(employee.projects);
console.log(projectKeys);
 
//["project1", "project2"]
 
 
//如果你需要遍历 employee 对象中的所有属性，包括嵌套对象的属性，你可以使用递归函数或嵌套的循环。例如，打印 employee 对象及其所有嵌套对象的所有键和值：
 
//这个 printAllKeys 函数会递归地遍历对象的所有属性，打印出每个属性的路径（例如，projects.project1.name）。这对于调试和理解复杂数据结构非常有用。
 
function printAllKeys(obj, prefix = '') {
  Object.keys(obj).forEach(key => {
    let newKey = prefix ? `${prefix}.${key}` : key;
    console.log(newKey);
    if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
      printAllKeys(obj[key], newKey);
    }
  });
}
 
printAllKeys(employee);

2.2.4、使用Object.values()获取项目数组


let projectValues = Object.values(employee.projects);
console.log(projectValues);
/* 输出:
[
  { name: "Project A", startDate: "2021-01-01", endDate: "2021-12-31" },
  { name: "Project B", startDate: "2022-01-01", current: true }
]
*/

2.2.5、使用Object.entries()获取项目键值对


let projectEntries = Object.entries(employee.projects);
console.log(projectEntries);
/* 输出:
[
  ["project1", { name: "Project A", startDate: "2021-01-01", endDate: "2021-12-31" }],
  ["project2", { name: "Project B", startDate: "2022-01-01", current: true }]
]
*/

2.2.6、计算项目持续时间

假设我们需要计算每个项目的持续时间（以月为单位）。


let employee = {
  id: 1001,
  name: "John Doe",
  department: "Engineering",
  skills: ["JavaScript", "React", "Node.js"],
  projects: {
    project1: {
      name: "Project A",
      startDate: "2021-01-01",
      endDate: "2021-12-31"
    },
    project2: {
      name: "Project B",
      startDate: "2022-01-01",
      current: true
    }
  }
};
 
function calculateProjectDurations(employee) {
  let durations = Object.entries(employee.projects).map(([projectId, project]) => {
    let startDate = new Date(project.startDate);
    let endDate = project.current ? new Date() : new Date(project.endDate);
    let duration = ((endDate - startDate) / 1000 / 60 / 60 / 24 / 30) + 1; // 月数，四舍五入
    return { projectId, duration };
  });
  return durations;
}
 
let projectDurations = calculateProjectDurations(employee);
console.log(projectDurations);
/* 输出示例（取决于当前日期）:
[
  { projectId: "project1", duration: 12 },
  { projectId: "project2", duration: 17 }
]
*/

三、用for...in来遍历对象的所有可枚举属性，包括原型链上的属性

使用for...in循环时，通常需要使用hasOwnProperty方法来过滤掉原型链上的属性。


let person = {
  name: "Alice",
  age: 30
};
 
 
for (let key in user) {
  if (user.hasOwnProperty(key)) {
    console.log(key + ": " + user[key]);
  }
}
// 输出:
// name: Alice
// age: 30

如果不进行过滤，则会获取原型链上的数据：


function User(name, age, isAdmin) {
    this.name = name;
    this.age = age;
    this.isAdmin = isAdmin;
}
 
User.prototype.greeting = "Hello, I am a user"; // 这是一个可枚举属性
 
let user = new User("Alice", 30, false);
 
for (let key in user) {
    console.log(key + ": " + user[key]);
}
 
// 打印结果：
// name: Alice
// age: 30
// isAdmin: false
// greeting: Hello, I am a user

四、总结

Object.keys()、Object.values()和Object.entries()都是利于对象操作的便捷方法，能有效提升数据处理的效率。

更多丰富的前端内容请看：各种前端问题的技巧和解决方案

博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

文章知识点与官方知识档案匹配，可进一步学习相关知识

算法技能树首页概览62647 人正在系统学习中

一、基础的对象操作：点符号"."和方括号"[]"访问属性