Object.fromEntries()

Object.fromEntries() 是 ECMAScript 10 中引入的一个静态方法，用于将键值对列表转换为对象。它弥补了 Object.entries() 的反向操作需求，使得对象与可迭代结构之间的转换更加灵活。

基本语法与功能

Object.fromEntries() 接收一个可迭代对象（通常是数组）作为参数，其中每个元素都是一个包含两个元素的数组（即键值对）。方法会将这些键值对转换为一个新对象：

const entries = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(entries);
console.log(obj); // { a: 1, b: 2, c: 3 }

如果传入的可迭代对象包含重复的键，后面的键值对会覆盖前面的：

const entries = [['a', 1], ['a', 2]];
const obj = Object.fromEntries(entries);
console.log(obj); // { a: 2 }

与 Object.entries() 的关系

Object.fromEntries() 是 Object.entries() 的逆操作。两者结合可以实现对象的浅拷贝或转换：

const original = { x: 10, y: 20 };
const copied = Object.fromEntries(Object.entries(original));
console.log(copied); // { x: 10, y: 20 }

这种模式在需要过滤或修改对象属性时特别有用：

const user = { name: 'Alice', age: 25, password: 'secret' };
const safeUser = Object.fromEntries(
  Object.entries(user).filter(([key]) => key !== 'password')
);
console.log(safeUser); // { name: 'Alice', age: 25 }

处理 Map 结构

Object.fromEntries() 可以直接将 Map 转换为普通对象：

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);
const obj = Object.fromEntries(map);
console.log(obj); // { key1: 'value1', key2: 'value2' }

实际应用场景

URL 查询参数解析

浏览器提供的 URLSearchParams 接口返回的迭代器可以直接转换为对象：

const params = new URLSearchParams('name=John&age=30');
const queryObj = Object.fromEntries(params);
console.log(queryObj); // { name: 'John', age: '30' }

表单数据处理

收集表单数据并转换为对象结构：

const form = document.querySelector('form');
const formData = new FormData(form);
const formObj = Object.fromEntries(formData);

数据格式转换

将二维数组转换为对象：

const data = [
  ['id', 1],
  ['title', 'ECMAScript 10'],
  ['published', true]
];
const post = Object.fromEntries(data);
console.log(post); // { id: 1, title: 'ECMAScript 10', published: true }

注意事项

1. 非字符串键的转换：所有键都会被强制转换为字符串

   const entries = [[1, 'one'], [true, 'true']];
   const obj = Object.fromEntries(entries);
   console.log(obj); // { '1': 'one', 'true': 'true' }
   

2. Symbol 键的支持：ES2019 开始支持 Symbol 作为键

   const sym = Symbol('description');
   const obj = Object.fromEntries([[sym, 42]]);
   console.log(obj[sym]); // 42
   

3. 原型链问题：生成的对象不会继承额外的原型属性

   const obj = Object.fromEntries([['__proto__', 'polluted']]);
   console.log(obj.__proto__); // 不会改变原型链
   

与其他方法的对比

相比手动使用 reduce 实现相同功能，Object.fromEntries() 更简洁：

// 旧方式
const entries = [['a', 1], ['b', 2]];
const obj = entries.reduce((acc, [key, val]) => {
  acc[key] = val;
  return acc;
}, {});

// 新方式
const obj = Object.fromEntries(entries);

浏览器兼容性与 polyfill

在不支持的环境中可以通过以下方式实现兼容：

if (!Object.fromEntries) {
  Object.fromEntries = function(entries) {
    const obj = {};
    for (const [key, value] of entries) {
      obj[key] = value;
    }
    return obj;
  };
}