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

watermelo37

已于 2024-10-11 15:05:52 修改

阅读量2.5k

点赞数 26

分类专栏：前端 # JavaScript&TypeScript 文章标签： javascript 前端开发语言数据挖掘数据分析 json 数据结构

于 2024-06-07 21:58:32 首次发布

本文链接：https://blog.csdn.net/RenGJ010617/article/details/139535663

版权

前端同时被 2 个专栏收录

36 篇文章 2 订阅

订阅专栏

JavaScript&TypeScript

21 篇文章 0 订阅

订阅专栏

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

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

2.1、基础用法介绍

2.1.1、Object.keys(obj)

2.1.2、Object.values(obj)

2.1.3、Object.entries(obj)

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

2.2.1、数据示例

2.2.2、直接访问嵌套属性

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

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

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

2.2.6、计算项目持续时间

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

四、总结

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

点符号：直接通过属性名访问对象的属性。
方括号：通过属性名的字符串形式访问对象的属性，特别适用于属性名是变量或包含特殊字符的情况。

举例：

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