设计师导航网站大全_网络营销的特点主要体现为()_开一个免费网站_seo岗位

深入理解 Object.entries()：基础用法与 Object.keys() 的核心区别

---

一、Object.entries() 是什么？

Object.entries() 是 JavaScript 中的一个内置方法，用于将对象的 ‌可枚举属性‌（自身的、非继承的）转换为一个数组。每个属性会被表示为 [key, value] 形式的子数组，最终返回一个包含所有键值对的二维数组。

语法

Object.entries(obj)

• 参数‌：obj 目标对象（若参数非对象，会被强制转换为对象）。
• 返回值‌：格式为 [[key1, value1], [key2, value2], …] 的数组。

---

二、基础使用与示例

1. 基础示例

const user = { name: "John", age: 30, 1: "数字键会被转为字符串" 
};const entries = Object.entries(user);
console.log(entries);

‌输出‌：

[["1", "数字键会被转为字符串"],  // 注意数字键被转为字符串 "1"["name", "John"],["age", 30]
]

2. 遍历对象属性

结合 for...of 循环或 forEach 遍历：

const book = { title: "JavaScript 指南", price: 99 };// 使用 for...of
for (const [key, value] of Object.entries(book)) {console.log(`${key}: ${value}`);
}// 使用 forEach
Object.entries(book).forEach(([key, value]) => {console.log(`${key} -> ${value}`);
});

‌输出‌：

title: JavaScript 指南
price: 99

3. 将对象转为 Map

直接利用 Object.entries() 生成 Map：

const obj = { a: 1, b: 2 };
const map = new Map(Object.entries(obj));
console.log(map.get("a")); // 1

---

三、Object.entries() vs Object.keys()

1. 核心区别对比表

特性	Object.entries(obj)	Object.keys(obj)
返回值	[[key1, value1], [key2, value2], ...]	[key1, key2, ...]
‌是否包含值	✅ 包含键和值	❌ 仅包含键
‌适用场景	需要同时操作键值对	仅需操作键
‌与 Map 的兼容性	可直接转为 Map	需额外处理
键的类型处理	数字键转为字符串	数字键转为字符串

2. 代码示例对比

const data = { id: 101, name: "Alice", 2: "数字键" };// Object.entries()
console.log(Object.entries(data));
// 输出: [ ["2", "数字键"], ["id", 101], ["name", "Alice"] ]// Object.keys()
console.log(Object.keys(data));
// 输出: ["2", "id", "name"]

3. 典型使用场景

• ‌使用 Object.entries() 的场景‌：
  • 需要同时访问键和值（如数据转换、生成表格）。
  • 将对象转为 Map 或其他需要键值对的结构。
  • 根据值过滤属性（例如筛选出所有值为数字的属性）。
• 使用 Object.keys() 的场景‌：
  • 仅需遍历或操作键（如检查某个键是否存在）。
  • 快速获取对象的所有键名。 -

---

四、扩展：何时选择 Object.entries()？

场景 1：数据格式化

将对象转换为特定结构的数组（如表格数据）：

const products = {p101: { name: "鼠标", price: 50 },p102: { name: "键盘", price: 80 }
};// 转换为 [{ id: "p101", name: "鼠标", ... }, ...]
const formatted = Object.entries(products).map(([id, info]) => ({id,...info
}));console.log(formatted);

‌输出‌：

[{ id: "p101", name: "鼠标", price: 50 },{ id: "p102", name: "键盘", price: 80 }
]

场景 2：值过滤

筛选出对象中符合条件（如值大于 100）的属性：

const scores = { Alice: 95, Bob: 120, Charlie: 80 };const highScores = Object.entries(scores).filter(([name, score]) => score > 100).map(([name]) => name);console.log(highScores); // ["Bob"]

---

五、总结

1. ‌Object.entries()

• 返回键值对数组，适合需要同时操作键和值的场景。
• 是连接对象和数组/Map 操作的桥梁。

2. ‌Object.keys()

• 仅返回键数组，适合仅需操作键的场景。
• 性能略优（因无需处理值）。

3. 补充方法：Object.values()

若仅需操作值，可使用 Object.values(obj)（返回 [value1, value2, …]）。

最终选择建议‌：

• 需要键值对？用 Object.entries()。
• 只需要键？用 Object.keys()。
• 只需要值？用 Object.values()。

掌握这三者的区别，能让你在处理对象时更加游刃有余！ 🚀

扩展阅读
JavaScript 嵌套数组扁平化的 5 种核心方案与深度实践指南
Moment.js 中 isSame(..., ‘isoWeek‘) 的深入解析