Object.entries和Object.formEntries

 

​一、原理

1. ​Object.entries()

• ​原理：
  该方法返回一个由对象自身可枚举属性的键值对组成的二维数组，每个子数组形式为 [key, value]，顺序与 for...in 循环一致，但不会遍历原型链上的属性
  • 若输入是数组，键会被转换为字符串索引（如 ['0', 1]）
  • 若输入是字符串，会按字符索引生成键值对
  • 数字或 Symbol 类型的键会被强制转为字符串

2. ​Object.fromEntries()

• ​原理：
  作为 Object.entries() 的逆操作，它将键值对数组转换为对象
  
  • 支持接收任何可迭代对象（如 Map、自定义迭代器）
  • 若存在重复键，后出现的值会覆盖前者
  • 仅处理可枚举属性，且返回的是浅拷贝对象

---

​二、应用场景

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

• ​遍历对象属性：
  结合 map、filter 等方法处理键值对，例如筛选或修改属性

  Object.entries(obj).map(([key, value]) => console.log(key, value));

• ​对象转 Map：
  直接通过 new Map(Object.entries(obj)) 转换为 Map 结构
• ​处理表单数据：
  将表单输入项映射为键值对数组，便于批量操作
• ​交换键值：
  通过遍历修改键值对实现属性与值的交换

  const swapped = Object.fromEntries(Object.entries(obj).map(([k, v]) => [v, k]));

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

• ​Map/数组转对象：
  将 Map 或二维数组快速转换为普通对象

  const map = new Map([['a', 1], ['b', 2]]);
  Object.fromEntries(map); // {a:1, b:2}

• ​URL 查询参数解析：
  与 URLSearchParams 结合，将查询字符串转为对象

  const params = new URLSearchParams('name=John&age=30');
  const obj = Object.fromEntries(params);

• ​数据清洗与重构：
  过滤或转换对象属性，例如仅保留特定字段或数值计算

  // 过滤属性
  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 结构时非常高效
  两者结合使用可实现对象属性的灵活转换与重构。