JavaScript的Object.entries方法是什么？怎么用？-js教程-PHP中文网

JavaScript的Object.entries方法是什么？怎么用？

煙雲

发布： 2025-07-14 15:49:01

原创

997人浏览过

object.entries() 方法的核心作用是将对象转换为由 [key, value] 键值对组成的数组。它仅返回对象自身的可枚举属性，与 for...in 不同，不会遍历原型链；可结合 map 构造函数创建 map 对象；适用于动态渲染、数据处理及构建新数据结构等场景。例如：1. 使用 object.entries(obj) 将对象转为二维数组；2. 通过 new map(object.entries(obj)) 创建 map；3. 在框架中动态生成元素、过滤排序数据、构建新对象等操作。

JavaScript的Object.entries方法是什么？怎么用？

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() 更加干净利落。

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

如何使用 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]) => (
    `<p key="${key}">${key}: ${value}</p>`
  )).join('');
}

const html = renderData(data);
console.log(html);
// Output:
// <p key="name">name: 王五</p><p key="age">age: 35</p><p key="occupation">occupation: 工程师</p>

登录后复制

数据转换和处理：将对象转换为数组，方便使用数组的各种方法进行数据处理，例如过滤、排序等。

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() 在处理对象数据时，提供了一种简洁而强大的方式。

以上就是JavaScript的Object.entries方法是什么？怎么用？的详细内容，更多请关注php中文网其它相关文章！