JS | Object.entries() 和 Object.formEntries()的用法详解

目录

​一、原理

[1. ​Object.entries()](#1. Object.entries())

[2. ​Object.fromEntries()](#2. Object.fromEntries())

​二、应用场景

[1. ​Object.entries() 的常见用途](#1. Object.entries() 的常见用途)

[2. ​Object.fromEntries() 的常见用途](#2. Object.fromEntries() 的常见用途)

​三、对比与注意事项

[▼​ 总结 ▼](#▼ 总结 ▼)


一、原理

1. ​Object.entries()

原理 :该方法返回一个由对象自身可枚举属性的键值对组成的二维数组,每个子数组形式为 [key, value],顺序与 **for...in**循环一致,但不会遍历原型链上的属性。

  • 若输入是数组,键会被转换为字符串索引(如 ['0', 1])。
  • 若输入是字符串,会按字符索引生成键值对。
  • 数字或 Symbol 类型的键会被强制转为字符串。
2. ​Object.fromEntries()

原理 :作为**Object.entries()**的逆操作,它将键值对数组转换为对象。

  • 支持接收任何可迭代对象(如 Map、自定义迭代器)。
  • 若存在重复键,后出现的值会覆盖前者。
  • 仅处理可枚举属性,且返回的是浅拷贝对象。

二、应用场景

1. ​Object.entries() 的常见用途

❶ ​遍历对象属性 :结合 mapfilter 等方法处理键值对,例如,筛选或修改属性。

javascript 复制代码
Object.entries(obj).map(([key, value]) => console.log(key, value));

❷ ​对象转 Map :直接通过 **new Map(Object.entries(obj))**转换为 Map 结构。

❸ ​处理表单数据:将表单输入项映射为键值对数组,便于批量操作。

​❹ 交换键值:通过遍历修改键值对实现属性与值的交换。

javascript 复制代码
const swapped = Object.fromEntries(Object.entries(obj).map(([k, v]) => [v, k]));
2. ​Object.fromEntries() 的常见用途
  • Map/数组转对象 :将 Map 或二维数组快速转换为普通对象

    javascript 复制代码
    const map = new Map([['a', 1], ['b', 2]]);
    Object.fromEntries(map); // {a:1, b:2}
  • URL 查询参数解析 :与 URLSearchParams 结合,将查询字符串转为对象

    javascript 复制代码
    const params = new URLSearchParams('name=John&age=30');
    const obj = Object.fromEntries(params);
    console.log(params) // {size: 2}
    console.log(obj) // {name: 'John', age: '30'}
  • 数据清洗与重构 :过滤或转换对象属性,例如仅保留特定字段或数值计算

    javascript 复制代码
    // 过滤属性
    const filtered = Object.fromEntries(Object.entries(obj).filter(([k]) => k !== 'id'));
    // 数值翻倍
    const doubled = Object.fromEntries(Object.entries(obj).map(([k, v]) => [k, v * 2]));

三、对比与注意事项

特性 Object.entries() Object.fromEntries()
输入类型 对象、数组、字符串等 键值对数组或可迭代对象(如 Map)
输出类型 二维数组([[key, value], ...] 对象
重复键处理 无(原对象属性唯一) 后者覆盖前者
Symbol 键处理 忽略 Symbol 键 支持 Symbol 键

▼​ 总结 ▼

​**Object.entries()**适用于需要以数组形式操作对象属性的场景(如遍历、转换数据结构)

Object.fromEntries() 擅长将键值对列表还原为对象,尤其在处理表单、URL 参数或 Map 结构时非常高效。

两者结合使用可实现对象属性的灵活转换与重构。


▼ 参考资料 ▼

JS | 对象数据的读取,看这一篇就够了!Object.keys、Object.values和Object.entries方法详解

Js中的Object.entries() 和 Object.fromEntries() | Object.entries() 用法详解 | Object.entries()

Object方法 --- Object.entries() | "键值对大逃亡:Object.entries如何带领它们奔向数组自由"