JavaScript entries() 方法（千字长文）

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 中的 entries() 方法

在 JavaScript 开发中，对象和数组的遍历与操作是日常任务的核心。无论是处理用户数据、配置项，还是构建动态功能，开发者常常需要高效地访问键值对或索引项。本文将深入讲解 JavaScript entries() 方法，通过循序渐进的讲解、生动的比喻和实际案例，帮助编程初学者和中级开发者掌握这一实用工具，提升代码的简洁性和可维护性。

基本概念：什么是 entries() 方法？

entries() 方法 是 JavaScript 中用于遍历对象或数组的迭代器方法之一，它返回一个包含所有可枚举键值对的迭代器对象。其核心功能是将键值对（或索引与元素对）转换为数组形式，方便后续处理。

形象比喻：把对象“拆箱”

想象一个装满物品的箱子，每个物品都有一个标签（键）和内容（值）。entries() 方法就像一个拆箱工具，将每个物品的标签和内容分离出来，整理成一个清单。例如：

const book = {  
  title: "JavaScript 核心指南",  
  author: "David Flanagan"  
};  
const entries = Object.entries(book);  
// 输出：[ ["title", "JavaScript 核心指南"], ["author", "David Flanagan"] ]  

这里，entries() 将对象拆解为键值对数组，每个元素是一个包含键和值的二元数组。

语法与基本用法

对象的 entries()

对于对象，需通过 Object.entries() 调用：

const obj = { name: "Alice", age: 25 };  
const entries = Object.entries(obj);  
console.log(entries); // 输出：[ ["name", "Alice"], ["age", 25] ]  

注意：entries() 仅遍历对象自身的可枚举属性，继承或不可枚举的属性会被忽略。

数组的 entries()

对于数组，直接使用 array.entries()：

const arr = ["apple", "banana", "cherry"];  
const entries = arr.entries();  
console.log([...entries]); // 输出：[ [0, "apple"], [1, "banana"], [2, "cherry"] ]  

这里，数组的 entries() 返回索引和元素组成的迭代器，展开为数组后可直接使用。

与类似方法的对比

为了更好地理解 entries()，可以将其与 keys()、values() 方法对比：

通过表格可见，entries() 是唯一同时返回键和值的方法，适用于需要同时操作键和值的场景。

结合循环结构：遍历与操作

使用 for...of 循环

entries() 返回的迭代器可以直接与 for...of 结合，逐个处理键值对：

const user = { id: 123, name: "Bob", email: "bob@example.com" };  
for (const [key, value] of Object.entries(user)) {  
  console.log(`键: ${key}, 值: ${value}`);  
}  
// 输出：  
// 键: id, 值: 123  
// 键: name, 值: Bob  
// 键: email, 值: bob@example.com  

结合数组方法：map、filter 等

由于 entries() 返回的迭代器可展开为数组，可以与 map()、filter() 等方法链式调用：

// 过滤出值为字符串的键值对  
const filtered = Object.entries(user)  
  .filter(([_, value]) => typeof value === "string");  
console.log(filtered); // 输出：[ ["name", "Bob"], ["email", "bob@example.com"] ]  

实际应用场景与案例

案例 1：对象与 URL 参数的转换

在前端开发中，常需将对象转换为 URL 查询参数。entries() 可简化这一过程：

function objToUrlParams(obj) {  
  const params = Object.entries(obj)  
    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)  
    .join("&");  
  return `?${params}`;  
}  

const params = { page: 2, search: "JavaScript" };  
console.log(objToUrlParams(params)); // 输出：?page=2&search=JavaScript  

案例 2：数组元素的索引与值操作

假设需要根据索引动态生成 HTML 列表项：

const items = ["Home", "About", "Contact"];  
const listItems = [...items.entries()]  
  .map(([index, text]) => `<li data-id="${index}">${text}</li>`)  
  .join("");  

console.log(listItems);  
// 输出：  
// <li data-id="0">Home</li><li data-id="1">About</li><li data-id="2">Contact</li>  

进阶技巧：与对象的相互转换

将键值对数组转回对象

使用 reduce() 可将 entries() 的结果还原为对象：

const entries = [ ["name", "Charlie"], ["score", 95] ];  
const obj = entries.reduce((acc, [key, value]) => {  
  acc[key] = value;  
  return acc;  
}, {});  

console.log(obj); // 输出：{ name: "Charlie", score: 95 }  

数组索引与值的分离

对于数组，entries() 可帮助同时操作索引和元素：

const scores = [85, 90, 78];  
const formatted = [...scores.entries()]  
  .map(([index, score]) => `第 ${index + 1} 题得分：${score}`);  

console.log(formatted);  
// 输出：  
// ["第 1 题得分：85", "第 2 题得分：90", "第 3 题得分：78"]  

常见问题与注意事项

Q1：为什么某些属性未被包含？

entries() 仅遍历对象自身的可枚举属性。若属性被设置为不可枚举（如通过 Object.defineProperty()），或继承自原型链，则会被忽略。

Q2：如何处理空对象或空数组？

若对象或数组为空，entries() 会返回空迭代器，不会报错。例如：

console.log(Object.entries({})); // 输出：[]  
console.log([].entries()); // 输出：空迭代器（展开后为 []）  

Q3：与 for...in 循环的区别？

for...in 会遍历对象自身的可枚举属性和原型链上的属性，而 entries() 仅遍历自身属性。此外，entries() 返回键值对，而 for...in 仅返回键。

结论：掌握 entries() 的价值

entries() 方法是 JavaScript 中高效遍历和操作键值对的利器。通过将其与循环、数组方法结合，开发者可以轻松实现数据转换、过滤、格式化等任务。无论是处理用户输入、配置对象，还是优化数组操作，entries() 都能提供简洁、直观的解决方案。

建议读者通过实际项目练习，例如构建表单数据处理工具、动态生成配置项列表等，逐步掌握这一方法的灵活性。未来学习中，可进一步探索 Object.keys()、Object.values() 以及 ES6 的其他迭代器方法，构建更强大的数据处理能力。