object.entries() 方法的核心作用是将对象转换为由 [key, value] 键值对组成的数组。它仅返回对象自身的可枚举属性，与 for...in 不同，不会遍历原型链；可结合 map 构造函数创建 map 对象；适用于动态渲染、数据处理及构建新数据结构等场景。例如：1. 使用 object.entries(obj) 将对象转为二维数组；2. 通过 new map(object.entries(obj)) 创建 map；3. 在框架中动态生成元素、过滤排序数据、构建新对象等操作。
Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组。这个数组的元素是包含key和value的数组。说白了，就是把一个对象变成一个二维数组，方便遍历和处理。
解决方案
Object.entries() 方法的核心作用在于将一个对象转换成一个由 [key, value] 键值对组成的数组。这为我们遍历对象属性、进行数据转换和处理提供了极大的便利。
立即学习“Java免费学习笔记（深入）”；
const obj = {
name: '张三',
age: 30,
city: '北京'
};
const entries = Object.entries(obj);
console.log(entries);
// Output:
// [
// [ 'name', '张三' ],
// [ 'age', 30 ],
// [ 'city', '北京' ]
// ]
// 遍历
entries.forEach(([key, value]) => {
console.log(`${key}: ${value}`);
});
// Output:
// name: 张三
// age: 30
// city: 北京Object.entries() 和 for...in 循环有什么区别？
for...in 循环会遍历对象自身以及原型链上的可枚举属性，而 Object.entries() 只返回对象自身的可枚举属性。 也就是说，如果你的对象继承了一些属性，for...in 会把那些也算上，但 Object.entries() 不会。
举个例子：
const parent = {
parentProp: 'parentValue'
};
const child = Object.create(parent);
child.childProp = 'childValue';
console.log("for...in loop:");
for (let key in child) {
console.log(key);
}
// Output:
// childProp
// parentProp
console.log("Object.entries():");
console.log(Object.entries(child));
// Output:
// [ [ 'childProp', 'childValue' ] ]可以看到，for...in 循环输出了 childProp 和 parentProp，而 Object.entries() 只输出了 childProp。 所以，如果你只想处理对象自身的属性，Object.entries() 更加干净利落。
如何使用 Object.entries() 将对象转换为 Map？
可以将 Object.entries() 的结果传递给 Map 构造函数，快速创建一个 Map 对象。Map 对象是一种键值对的集合，与普通对象相比，Map 的键可以是任意类型，而不仅仅是字符串。
const obj = {
name: '李四',
age: 25,
city: '上海'
};
const map = new Map(Object.entries(obj));
console.log(map);
// Output:
// Map(3) {
// 'name' => '李四',
// 'age' => 25,
// 'city' => '上海'
// }
console.log(map.get('name')); // Output: 李四这种方式在需要使用 Map 的一些特性（比如键可以是任意类型，或者需要保持键的插入顺序）时非常有用。
Object.entries() 在实际开发中有哪些应用场景？
-
对象属性的动态渲染：在 React、Vue 等前端框架中，可以使用
Object.entries()遍历对象属性，动态生成 HTML 元素。const data = { name: '王五', age: 35, occupation: '工程师' }; function renderData(data) { return Object.entries(data).map(([key, value]) => ( `${key}: ${value}
` )).join(''); } const html = renderData(data); console.log(html); // Output: //name: 王五
age: 35
occupation: 工程师
-
数据转换和处理：将对象转换为数组，方便使用数组的各种方法进行数据处理，例如过滤、排序等。
const users = { user1: { name: '赵六', age: 20 }, user2: { name: '孙七', age: 30 }, user3: { name: '钱八', age: 25 } }; const adultUsers = Object.entries(users) .filter(([key, user]) => user.age >= 25) .map(([key, user]) => user.name); console.log(adultUsers); // Output: [ '孙七', '钱八' ] -
创建新的对象或数据结构：基于现有对象的数据，创建新的对象或数据结构。
const product = { id: 123, name: 'iPhone', price: 999 }; const discountedProduct = Object.entries(product) .reduce((acc, [key, value]) => { if (key === 'price') { acc[key] = value * 0.9; // 打九折 } else { acc[key] = value; } return acc; }, {}); console.log(discountedProduct); // Output: // { id: 123, name: 'iPhone', price: 899.1 }Object.entries() 在处理对象数据时，提供了一种简洁而强大的方式。
