编辑
一、基础的对象操作：点符号"."和方括号"[]"访问属性
- 点符号：直接通过属性名访问对象的属性。
- 方括号：通过属性名的字符串形式访问对象的属性，特别适用于属性名是变量或包含特殊字符的情况。
举例：
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()都是利于对象操作的便捷方法，能有效提升数据处理的效率。
更多丰富的前端内容请看：各种前端问题的技巧和解决方案
博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
