JS用Object.fromEntries转换键值对

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《JavaScript用Object.fromEntries转换键值对》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

Object.fromEntries在JavaScript中用于将可迭代的键值对转换为对象。它接收一个包含键值对数组的可迭代对象，遍历并创建新对象，是Object.entries()的逆操作。1. 常见用法包括从Object.entries()输出、键值对数组或Map对象转换；2. 与Object.entries()互补，形成“拆装”机制，适用于过滤、映射等中间操作后重建对象；3. 处理重复键时以最后一个键值为准，便于配置覆盖；4. 可结合map进行数据转换，如将用户数组转为以ID为键的对象；5. 支持从URLSearchParams或FormData转换，简化查询字符串或表单数据解析；6. 相比reduce，Object.fromEntries意图更明确、代码更简洁，具备更好的可读性和维护性。

Object.fromEntries在JavaScript中用于将一个可迭代的键值对（例如[key, value]数组的数组或Map对象）转换回一个新的JavaScript对象。它本质上是Object.entries()的逆操作，让你能方便地从列表形式的数据重构出对象结构。

解决方案

Object.fromEntries()方法接收一个可迭代对象，该对象应该包含一系列键值对数组（[key, value]）。它会遍历这些键值对，并以它们为属性名和属性值，创建一个全新的普通JavaScript对象。

最常见的应用场景，就是当你用Object.entries()把一个对象拆解成键值对数组后，经过一些筛选、映射或排序操作，再用Object.fromEntries()把它“拼”回去。这就像你把一本书拆成一张张纸，整理完再装订成册一样。

基本用法示例：

// 从Object.entries()的输出转换回来
const myObject = { a: 1, b: 2, c: 3 };
const entries = Object.entries(myObject); // [['a', 1], ['b', 2], ['c', 3]]

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

// 从一个键值对数组转换
const dataArray = [
  ['name', 'Alice'],
  ['age', 30],
  ['city', 'New York']
];
const person = Object.fromEntries(dataArray);
console.log(person); // { name: 'Alice', age: 30, city: 'New York' }

// 从Map对象转换
const myMap = new Map([
  ['id', 'xyz123'],
  ['status', 'active']
]);
const mapToObject = Object.fromEntries(myMap);
console.log(mapToObject); // { id: 'xyz123', status: 'active' }

这个方法特别方便，因为它提供了一种声明式的方式来处理键值对的转换，避免了手动循环和赋值的繁琐。在处理一些需要中间转换和操作对象数据的场景时，它简直是神器。

Object.fromEntries与Object.entries()：它们是互补的吗？

是的，它们是设计上完全互补的。可以说，Object.entries()和Object.fromEntries()构成了JavaScript中处理对象键值对的一个非常优雅的“拆装”机制。Object.entries()负责将一个对象扁平化成一个包含[key, value]数组的数组，而Object.fromEntries()则负责将这个扁平化的数组重新组装回一个对象。

这种互补性在实际开发中非常有用。想象一下，你有一个配置对象，需要根据某些条件筛选或修改其中的一些属性，然后再把它作为新的配置对象使用。如果直接操作原对象，可能会比较麻烦，或者需要写很多条件判断。但有了这对组合，流程就变得清晰多了：

1. 拆解： 使用Object.entries(originalObject)，将对象转换成一个可操作的数组。
2. 操作： 对这个数组进行filter()、map()等操作，筛选或修改键值对。
3. 重组： 使用Object.fromEntries(modifiedEntriesArray)，将处理后的键值对数组重新构建成一个新的对象。

来看个例子，我们想从一个用户对象中移除所有值为null或undefined的属性：

const userProfile = {
  id: 101,
  name: 'John Doe',
  email: 'john.doe@example.com',
  phone: null,
  address: undefined,
  age: 30
};

const cleanedProfileEntries = Object.entries(userProfile).filter(([key, value]) => {
  // 过滤掉值为 null 或 undefined 的条目
  return value !== null && typeof value !== 'undefined';
});

const cleanedProfile = Object.fromEntries(cleanedProfileEntries);
console.log(cleanedProfile);
// 输出: { id: 101, name: 'John Doe', email: 'john.doe@example.com', age: 30 }

这种模式让数据转换变得异常灵活，也更具函数式编程的风格，代码读起来也更像是在描述“做什么”，而不是“怎么做”。

Object.fromEntries在处理复杂数据结构时有哪些技巧？

当数据结构稍微复杂一点，或者说，当你的原始数据并非直接就是[key, value]对的数组时，Object.fromEntries依然能派上用场，关键在于你如何将原始数据“塑形”成它能接受的格式。这里有几个我个人觉得挺实用的技巧：

1. 处理重复键： 如果你的输入数组中存在相同的键，Object.fromEntries会以最后一个出现的键值对为准。这其实是个挺有用的特性，比如当你需要合并多个配置，后面出现的配置项覆盖前面的。

   const configUpdates = [
     ['theme', 'dark'],
     ['fontSize', '16px'],
     ['theme', 'light'] // 'theme'键重复，这个值会覆盖前面的
   ];
   const finalConfig = Object.fromEntries(configUpdates);
   console.log(finalConfig); // { theme: 'light', fontSize: '16px' }

   这比你手动去写循环和判断来处理覆盖逻辑要简洁得多。

2. 结合map进行数据转换： 这是最常见的技巧之一。你可能有一个数组，里面每个元素都是一个对象，但你希望将这个数组转换成一个以某个特定属性为键的对象。

   const users = [
     { id: 'u001', name: 'Alice', status: 'active' },
     { id: 'u002', name: 'Bob', status: 'inactive' },
     { id: 'u003', name: 'Charlie', status: 'active' }
   ];
   
   // 将用户数组转换成以id为键的对象，方便通过id查找用户
   const usersById = Object.fromEntries(
     users.map(user => [user.id, user]) // 将每个用户对象转换为 [id, userObject] 形式
   );
   console.log(usersById['u002']); // { id: 'u002', name: 'Bob', status: 'inactive' }

   这个模式在处理后端返回的列表数据时尤其有用，当你需要快速按某个ID或唯一标识符访问数据时，它能省去很多遍历的功夫。

3. 从URLSearchParams或FormData转换： 这两个Web API的实例都提供了entries()方法，可以直接生成[key, value]迭代器，完美适配Object.fromEntries。

   // 假设我们有一个URL查询字符串
   const queryString = '?name=Alice&age=30&city=New%20York';
   const params = new URLSearchParams(queryString);
   
   const queryAsObject = Object.fromEntries(params.entries());
   console.log(queryAsObject); // { name: 'Alice', age: '30', city: 'New York' }
   
   // FormData也类似
   // const formData = new FormData(someFormElement);
   // const formObject = Object.fromEntries(formData.entries());

   这比你手动解析查询字符串或者表单数据要安全和高效得多。

这些技巧的核心在于，只要你能把你的原始数据通过某种方式（通常是map或filter）转换成一个可迭代的[key, value]对的集合，Object.fromEntries就能登场，帮你优雅地完成最后的转换。它让代码更具表达力，也减少了出错的可能性。

为什么不直接用reduce来转换键值对？Object.fromEntries的优势在哪里？

这是一个非常好的问题，因为在Object.fromEntries出现之前，我们确实经常使用Array.prototype.reduce来做类似的事情。例如，将一个键值对数组转换成对象：

const entriesToConvert = [['a', 1], ['b', 2]];

// 使用 reduce
const objectFromReduce = entriesToConvert.reduce((acc, [key, value]) => {
  acc[key] = value;
  return acc;
}, {});
console.log(objectFromReduce); // { a: 1, b: 2 }

reduce确实能完成这个任务，而且它的通用性非常强，几乎能实现任何数组的聚合操作。那么，Object.fromEntries的优势到底在哪里呢？

我认为主要体现在以下几点：

1. 意图明确，代码更具可读性： Object.fromEntries这个方法名本身就清晰地表达了它的目的：从条目（entries）创建对象。当你在代码中看到它时，几乎不需要思考就能明白这行代码在做什么。而reduce虽然强大，但它的通用性也意味着你需要花一点时间去理解回调函数内部的逻辑，才能明白最终的聚合结果是什么。在大型项目中，这种即时理解性对于代码维护和团队协作至关重要。

2. 简洁性： 对于“将键值对列表转换为对象”这个特定任务，Object.fromEntries的代码量明显更少，也更简洁。它直接解决了这个特定问题，而不需要你手动去初始化累加器，也不需要写赋值语句。

   // 简洁性对比
   const objectFromFromEntries = Object.fromEntries(entriesToConvert);
   console.log(objectFromFromEntries); // { a: 1, b: 2 }

   少写代码，就意味着更少的出错机会，也让代码看起来更“干净”。

3. 性能（理论上）： 尽管对于大多数日常应用来说，reduce和Object.fromEntries的性能差异可以忽略不计，但从理论上讲，Object.fromEntries作为JavaScript引擎的内置原生方法，它在底层实现上可能会有更优化的C++代码，处理效率可能比JavaScript实现的reduce回调函数更高。尤其是在处理非常庞大的数据集时，这种原生优化可能会带来微小的性能优势。当然，这通常不是我们选择它的主要原因，但也是一个潜在的优点。

4. 符合API设计趋势： 现代JavaScript API设计倾向于提供更具体、更语义化的方法来解决常见问题，而不是只提供少数几个通用但需要更多样板代码的方法。Object.fromEntries就是这种趋势的一个体现，它让开发者能用更声明式的方式来表达意图。

所以，虽然reduce是一个瑞士军刀，能解决很多问题，但当你的任务就是“把键值对列表变回对象”时，Object.fromEntries无疑是更专业、更清晰、更简洁的选择。选择合适的工具解决特定的问题，往往能让你的代码质量更上一层楼。

以上就是《JS用Object.fromEntries转换键值对》的详细内容，更多关于的资料请关注golang学习网公众号！