JavaScript keys() 方法（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在 JavaScript 开发中，数据的遍历和操作是核心能力之一。无论是处理对象属性还是数组元素，开发者都需要高效的方法来提取和操作数据。keys() 方法正是这样一种工具，它可以帮助开发者快速获取对象或数组的键值列表。本文将深入讲解 JavaScript keys() 方法 的原理、用法和实际应用场景，并通过案例帮助读者理解其核心特性。

1. keys() 方法的基础用法

1.1 对象的 keys()

keys() 方法最初用于对象（Object），其返回一个包含对象所有可枚举属性名的数组。可枚举属性是指那些未被 Object.defineProperty 设置为 enumerable: false 的属性。

示例 1：基础对象的 keys()

const user = {  
  name: 'Alice',  
  age: 30,  
  isMember: true  
};  

const keys = Object.keys(user);  
console.log(keys); // 输出：['name', 'age', 'isMember']  

比喻：可以将对象想象成一个字典，每个属性名（如 name、age）是字典的条目标题。keys() 就像翻阅字典时，只提取所有标题的列表。

示例 2：不可枚举属性的处理

const obj = {};  
Object.defineProperty(obj, 'secret', {  
  enumerable: false,  
  value: 'hidden'  
});  

console.log(Object.keys(obj)); // 输出：[]（不包含 'secret'）  

1.2 数组的 keys()

对于数组（Array），keys() 方法返回一个迭代器，其中包含数组元素的索引值。需要注意的是，数组的 keys() 需要通过 Array.prototype.keys() 调用，且返回结果需转换为数组才能直接查看。

示例：数组的 keys()

const numbers = [10, 20, 30];  
const keysIterator = numbers.keys();  

// 将迭代器转换为数组  
console.log([...keysIterator]); // 输出：[0, 1, 2]  

对比：与对象不同，数组的 keys() 返回的是索引（如 0、1），而非属性名。

2. keys() 与类似方法的对比

2.1 keys()、values()、entries() 的异同

以下是三种方法的对比表格：

比喻：这三者就像观察数据的不同视角：keys() 是“只看名称”，values() 是“只看内容”，而 entries() 是“名称与内容的结合体”。

3. keys() 在实际开发中的应用场景

3.1 遍历对象属性

在需要操作对象所有属性时，keys() 可以与 for...of 或 Array.forEach() 结合使用。

示例：遍历用户配置

const userConfig = {  
  theme: 'dark',  
  fontSize: '16px',  
  notifications: true  
};  

Object.keys(userConfig).forEach(key => {  
  console.log(`配置项 ${key} 的值是：${userConfig[key]}`);  
});  

3.2 数组索引的灵活操作

当需要同时处理数组元素及其索引时，keys() 可以与 map() 或 reduce() 配合。

示例：生成带索引的列表

const fruits = ['apple', 'banana', 'orange'];  
const indexedFruits = fruits  
  .keys()  
  .map((index) => `${index + 1}: ${fruits[index]}`);  

console.log(indexedFruits); // 输出：['1: apple', '2: banana', '3: orange']  

3.3 表单数据的处理

在表单提交前，keys() 可以快速提取所有字段名，用于验证或序列化。

示例：表单字段校验

const formData = {  
  username: 'john_doe',  
  email: 'john@example.com',  
  password: ''  
};  

const requiredFields = Object.keys(formData);  

requiredFields.forEach(field => {  
  if (!formData[field]) {  
    console.log(`字段 ${field} 不能为空！`);  
  }  
});  

4. 进阶用法与注意事项

4.1 稀疏数组的处理

在稀疏数组（Sparse Array）中，keys() 会返回所有有效索引，包括中间的“空位”。

示例：稀疏数组的 keys()

const sparseArr = [10, , 30]; // 索引1未赋值  
console.log(sparseArr.length); // 输出：3（索引从0到2）  
console.log([...sparseArr.keys()]); // 输出：[0, 1, 2]  

4.2 结合 Map 和 Set

keys() 方法同样适用于 Map 和 Set，但需注意它们的返回类型。

示例：Map 的 keys()

const map = new Map([  
  ['name', 'Alice'],  
  ['age', 30]  
]);  

console.log([...map.keys()]); // 输出：['name', 'age']  

4.3 性能优化

对于大型对象或数组，直接调用 keys() 可能产生临时数组。如果只需遍历而不存储结果，建议直接使用 for...of 循环。

示例：高效遍历

for (const key of Object.keys(largeObject)) {  
  // 直接操作 key，无需存储整个数组  
}  

5. 常见误区与解决方案

5.1 错误预期所有属性都被包含

如果对象的属性被设置为 enumerable: false，keys() 将无法获取这些属性。

解决方案：强制枚举

const obj = { hidden: 'secret' };  
Object.defineProperty(obj, 'hidden', { enumerable: false });  

// 使用 Object.getOwnPropertyNames() 包含不可枚举属性  
console.log(Object.getOwnPropertyNames(obj)); // 输出：['hidden']  

5.2 数组索引的误解

keys() 返回的索引是基于数组的 length 属性，而非实际填充的元素数量。

示例：误解与澄清

const arr = [1, , 3];  
console.log(arr.length); // 输出：3（索引0、1、2）  
console.log([...arr.keys()]); // 输出：[0, 1, 2]（包含中间的空索引）  

结论

JavaScript keys() 方法 是开发者工具箱中的重要工具，尤其在处理对象属性和数组索引时。通过理解其核心逻辑和实际应用场景，开发者可以更高效地编写健壮的代码。本文通过案例展示了 keys() 在遍历、验证和数据操作中的价值，同时也提醒读者注意其局限性，如不可枚举属性的处理和稀疏数组的特性。

掌握 keys() 的同时，建议进一步探索 Object.entries() 和 Array.values() 等相关方法，以构建更全面的数据操作能力。希望本文能帮助读者在 JavaScript 开发中更自信地使用这一方法。