JavaScript教程：深入理解Object.keys(), values(), entries()方法-CSDN博客

JavaScript教程：深入理解Object.keys(), values(), entries()方法

ko.javascript.info 모던 JavaScript 튜토리얼(The Modern JavaScript Tutorial in Korean ) 项目地址: https://gitcode.com/gh_mirrors/ko/ko.javascript.info

引言

在JavaScript中，对象是我们最常使用的数据结构之一。了解如何有效地遍历和操作对象属性是每个开发者必备的技能。本文将深入探讨Object.keys()、Object.values()和Object.entries()这三个强大的对象操作方法，帮助你掌握对象遍历和转换的技巧。

对象遍历方法概述

JavaScript为对象提供了三种主要的遍历方法：

Object.keys(obj) - 返回对象自身可枚举属性组成的数组
Object.values(obj) - 返回对象自身可枚举属性值组成的数组
Object.entries(obj) - 返回对象自身可枚举属性的键值对数组

基本用法示例

const user = {
  name: "张三",
  age: 28,
  profession: "前端工程师"
};

console.log(Object.keys(user)); 
// 输出: ["name", "age", "profession"]

console.log(Object.values(user)); 
// 输出: ["张三", 28, "前端工程师"]

console.log(Object.entries(user));
// 输出: [ ["name", "张三"], ["age", 28], ["profession", "前端工程师"] ]

与Map/Set/Array方法的区别

值得注意的是，虽然Map、Set和Array也有类似的方法，但它们的调用方式和返回值有所不同：

| 特性 | Map/Set/Array方法 | Object方法 | |------------|------------------|---------------------| | 调用方式 | map.keys() | Object.keys(obj) | | 返回值类型 | Iterable对象 | 真实数组 |

这种设计差异主要是为了保持JavaScript的灵活性和向后兼容性。

实际应用场景

1. 遍历对象属性

const product = {
  id: 1001,
  name: "笔记本电脑",
  price: 5999,
  stock: 15
};

// 使用Object.keys()遍历属性名
for (const key of Object.keys(product)) {
  console.log(`属性: ${key}`);
}

// 使用Object.values()遍历属性值
for (const value of Object.values(product)) {
  console.log(`值: ${value}`);
}

// 使用Object.entries()同时遍历键值对
for (const [key, value] of Object.entries(product)) {
  console.log(`${key}: ${value}`);
}

2. 对象转换操作

虽然对象本身没有map、filter等数组方法，但我们可以结合使用Object.entries()和Object.fromEntries()来实现类似功能：

const prices = {
  coffee: 25,
  tea: 15,
  juice: 20
};

// 价格打8折
const discountedPrices = Object.fromEntries(
  Object.entries(prices).map(([item, price]) => [item, price * 0.8])
);

console.log(discountedPrices);
// 输出: {coffee: 20, tea: 12, juice: 16}

3. 对象属性筛选

const student = {
  name: "李四",
  age: 20,
  grade: "A",
  address: "北京市",
  phone: "13800138000"
};

// 只保留字符串类型的属性
const stringProperties = Object.fromEntries(
  Object.entries(student).filter(([key, value]) => typeof value === 'string')
);

console.log(stringProperties);
// 输出: {name: "李四", grade: "A", address: "北京市", phone: "13800138000"}

注意事项

Symbol属性：这些方法会忽略Symbol类型的属性键。如果需要处理Symbol属性，可以使用Object.getOwnPropertySymbols()或Reflect.ownKeys()。
原型链属性：这些方法只返回对象自身的属性，不会包含从原型链继承的属性。
不可枚举属性：这些方法只返回可枚举的属性，使用Object.getOwnPropertyNames()可以获取包括不可枚举属性在内的所有自身属性。