JavaScript教程：深入理解Object.keys()、values()和entries()方法-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00624/article/details/148416478

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

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.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方法的区别

虽然Map数据结构也有类似的方法，但它们之间存在重要区别：

| 特性 | Map方法 | Object方法 | |------------|-----------------|--------------------| | 调用方式 | map.keys() | Object.keys(obj) | | 返回值类型 | 可迭代对象 | 真正的数组 | | 原型链属性 | 不包含 | 不包含 |

Object方法的这种设计有两个主要原因：

保持灵活性，避免与自定义对象方法冲突
历史原因，早期JavaScript更倾向于返回数组

实际应用场景

1. 遍历对象属性

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

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

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

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

2. 对象属性统计

const surveyResults = {
  optionA: 125,
  optionB: 89,
  optionC: 203,
  optionD: 56
};

// 计算总票数
const total = Object.values(surveyResults).reduce((sum, count) => sum + count, 0);
console.log(`总票数: ${total}`);

3. 对象转换与操作

const temperatureData = {
  '2023-01-01': 12,
  '2023-01-02': 15,
  '2023-01-03': 9,
  '2023-01-04': 11
};

// 将温度转换为华氏度
const fahrenheitTemps = Object.fromEntries(
  Object.entries(temperatureData).map(([date, temp]) => {
    return [date, (temp * 9/5) + 32];
  })
);

console.log(fahrenheitTemps);

注意事项

Symbol属性：这些方法会忽略Symbol类型的属性键，如果需要获取Symbol属性，可以使用Object.getOwnPropertySymbols()
原型链属性：这些方法只返回对象自身的可枚举属性，不会包含原型链上的属性
属性顺序：虽然现代JavaScript引擎通常会按照属性创建顺序返回键，但这不是语言规范要求的，对于数字键会有特殊排序
性能考虑：对于大型对象，这些方法会创建新数组，可能带来内存开销

高级技巧

1. 对象过滤

const userSettings = {
  theme: 'dark',
  fontSize: 14,
  notifications: true,
  location: false
};

// 过滤出布尔类型的设置
const booleanSettings = Object.fromEntries(
  Object.entries(userSettings).filter(([key, value]) => typeof value === 'boolean')
);

console.log(booleanSettings);
// 输出: {notifications: true, location: false}

2. 对象映射

const productPrices = {
  laptop: 999,
  phone: 699,
  tablet: 399,
  headphones: 199
};

// 应用折扣
const discountedPrices = Object.fromEntries(
  Object.entries(productPrices).map(([product, price]) => {
    return [product, price * 0.9]; // 10%折扣
  })
);

console.log(discountedPrices);

3. 对象合并与转换

const defaultConfig = {
  timeout: 5000,
  retries: 3,
  cache: true
};

const userConfig = {
  timeout: 3000,
  cache: false
};

// 合并配置并转换为查询字符串
const configParams = Object.entries({...defaultConfig, ...userConfig})
  .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
  .join('&');

console.log(configParams);