极简三分钟ES6 - ES10中的Object.fromEntries

键值对 → 对象（快递装箱）

假设我们有一堆散乱的快递单（键值对），需要整理成包裹（对象）

// 快递单列表（键值对数组）
const expressList = [
  ["name", "小明"],
  ["package", "书籍"],
  ["tracking", "SF12345"]
];
 
// 装箱成包裹对象 
const package = Object.fromEntries(expressList); 
console.log(package);  // { name: "小明", package: "书籍", tracking: "SF12345" }

什么时候使用

URL参数解析

const urlParams = new URLSearchParams("name=小王&age=18&city=北京");
const userInfo = Object.fromEntries(urlParams);
console.log(userInfo); // { name: "小王", age: "18", city: "北京" }

Map转对象

const warehouseMap = new Map([
  ["apple", 100],
  ["banana", 200]
]);
 
const stock = Object.fromEntries(warehouseMap); // {apple: 100, banana: 200}

数据清洗

const rawData = [["id", 101], ["_password", "****"]];
 
// 过滤敏感字段 
const safeData = Object.fromEntries( 
  rawData.filter(([key])  => !key.startsWith("_")) 
);
// {id: 101}

特殊情况的处理规则

输入类型	处理方式	示例
二维数组	直接转换	[['a',1]] → {a:1}
Map对象	自动解构键值对	Map([['b',2]]) → {b:2}
空数组	返回空对象	[] → {}
重复键	后者覆盖前者	[['x',1],['x',2]] → {x:2}
非字符串键	自动转为字符串	[1, 'a'] → {'1':'a'}

与Ojbect.entries的关系

在前面章节的学习中我们知道 entries会生成一个数组，而fromEntries会生成一个对象，那是不是可以同时使用这两个方法来实现克隆对象呢，是可以的

const user = {name: "小明", level: 3};
 
// 对象 → 数组 → 新对象 
const clone = Object.fromEntries(Object.entries(user)); 

一些常见的使用场景

表单数据收集

// 获取表单所有输入项 
const formData = new FormData(document.querySelector("form")); 
const submitData = Object.fromEntries(formData); 

API数据处理

// 从API获取键值对数据
fetch("/api/data")
  .then(res => res.json()) 
  .then(pairs => Object.fromEntries(pairs)) 
  .then(data => render(data));

牢记

Object.fromEntries() 是键值对流水线的封装工，让无序数据秒变结构化对象，塔尤其擅长处理URL参数、Map转换和数据清洗