JavaScriptObject.entries用法详解

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《JavaScript的Object.entries方法用于将对象的可枚举属性以键值对数组的形式返回。它常用于遍历对象的键和值，特别适合在需要同时获取键和值的场景中使用。语法：Object.entries(obj)参数：obj：要转换的对象。返回值：一个包含对象自身所有可枚举属性的 [key, value] 数组。使用示例示例1：基本用法const obj = { a: 1, b: 2, c: 3 }; const entries = Object.entries(obj); console.log(entries); // 输出: [ ['a', 1], ['b', 2], ['c', 3] ]示例2：遍历对象const person = { name: 'Alice', age: 25, city: 'New York' }; for (const [key, value] of Object.entries(person)) { console.log(`${key}: ${value}`); } // 输出: // name: Alice // age: 25 // city: New York示例3：处理嵌套对象 const data = { user: { id: 1, name: 'Bob' }, status: 'active' }; const result = Object.entries(data).map(([key, value]) => {》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

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] 键值对组成的数组。这为我们遍历对象属性、进行数据转换和处理提供了极大的便利。

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() 在实际开发中有哪些应用场景？

1. 对象属性的动态渲染：在 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>

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

   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: [ '孙七', '钱八' ]

3. 创建新的对象或数据结构：基于现有对象的数据，创建新的对象或数据结构。

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

到这里，我们也就讲完了《JavaScriptObject.entries用法详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！