详解 ES10 中 Object.fromEntries() 的缘起

 我们知道 Object.entries() 是将对象转成一个自身可枚举属性的键值对数组。同样，我们也可以把键值对数组转成了对象。

 
 
 
 
      
  
  
  
  1. const keyValuePair = [ 
    2.   
  
  
  
  2.   ['cow', ''], 
    3.   
  
  
  
  3.   ['pig', ''], 
    4.   
  
  
  
  4. ] 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. Object.fromEntries(keyValuePair); 
    7.   
  
  
  
  7. // { cow: '', pig: '' } 
    8.

Object.fromEntries

我们知道，对象结构是一个是有键和值组合体，如下所示：

 
 
 
 
      
  
  
  
  1. const object = { 
    2.   
  
  
  
  2.   key: 'value', 
    3.   
  
  
  
  3. }; 
    4.

基于这个逻辑，如果我们想将某个东西转成对象，就必须要传递键和值。

有两种类型的参数可以满足这些要求：

  • 具有嵌套键值对的数组
  • Map 对象

使用 Object.fromEntries 将数组转成对象

下面是个键-值对嵌套数组

 
 
 
 
      
  
  
  
  1. const nestedArray = [ 
    2.   
  
  
  
  2.   ['key 1', 'value 1'], 
    3.   
  
  
  
  3.   ['key 2', 'value 2'] 
    4.   
  
  
  
  4. ] 
    5.

使用Object.fromEntries可以将该数组转成对象:

 
 
 
 
      
  
  
  
  1. Object.fromEntries(nestedArray); 
    2.   
  
  
  
  2. // { key 1: "value 1", key 2: "value 2"} 
    3.

使用 Object.fromEntries 将 Map 转成对象

ES6 为我们带来了一个名为 map 的新对象，它与对象非常相似。

TC39：映射对象是键/值对的集合，其中键和值都可以是任意 ECMAScript 语言值。

我们来创建一个 Map 对象：

 
 
 
 
      
  
  
  
  1. // 使用构造函数 
    2.   
  
  
  
  2. const map = new Map([ 
    3.   
  
  
  
  3.   ['key 1', 'value 1'], 
    4.   
  
  
  
  4.   ['key 2', 'value 2'] 
    5.   
  
  
  
  5. ]) 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. // 或者我们可以使用实例方法“set” 
    8.   
  
  
  
  8. const map = new Map() 
    9.   
  
  
  
  9. map.set('key 1', 'value 1') 
    10.   
  
  
  
  10. map.set('key 2', 'value 2') 
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12. // 结果 
    13.   
  
  
  
  13. Map(2) {"key 1" => "value 1", "key 2" => "value 2"} 
    14.

让我们使用Object.fromentries将 map 转换为一个对象

 
 
 
 
      
  
  
  
  1. Object.fromEntries(map); 
    2.   
  
  
  
  2. // { key 1: "value 1", key 2: "value 2"} 
    3.

对象的类型错误：试图使用 Object.fromEntries 将 其它类型 转成对象

将下面的类型传入 Object.fromEntries 都会导致报错 caught TypeError。

确保传递值要有键-值对。

Object.fromEntries vs Object.entries

Object.fromEntries 是 Object.entries 反向。 Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，而Object.fromEntries() 方法把键值对列表转换为一个对象。

 
 
 
 
      
  
  
  
  1. const object = { key1: 'value1', key2: 'value2' } 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. const array = Object.entries(object) 
    4.   
  
  
  
  4. // [ ["key1", "value1"], ["key2", "value2"] ] 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. Object.fromEntries(array) 
    8.   
  
  
  
  8. // { key1: 'value1', key2: 'value2' } 
    9.

对象到对象的转换

如果你阅读了 TC39 提案，这就是引入此新方法的原因。随着Object.entries的引入之前，要将一些非对象结构转成对象是比较麻烦的。

通常，当我们选择使用Object.entries，是因为它使我们能够访问许多漂亮的数组方法，例如filter。但是在完成转换之后，我们有点被该数组所困扰。

 
 
 
 
      
  
  
  
  1. const food = { meat: '????', broccoli: '????', carrot: '????' } 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. //  卡在这结果上... 
    4.   
  
  
  
  4. const vegetarian = Object.entries(food).filter( 
    5.   
  
  
  
  5.   ([key, value]) => key !== 'meat', 
    6.   
  
  
  
  6. ) 
    7.   
  
  
  
  7. // [ ["broccoli", "????"], ["carrot", "????"] ] 
    8.

好吧!我们可以利用所有这些有用的数组方法，但仍然可以返回对象。最后，从对象到对象的转换??

 
 
 
 
      
  
  
  
  1. const food = { meat: '????', broccoli: '????', carrot: '????' } 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. const vegetarian = Object.fromEntries( 
    4.   
  
  
  
  4.   Object.entries(food).filter(([key, value]) => key !== 'meat'), 
    5.   
  
  
  
  5. ) 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. // { broccoli: '????', carrot: '????' } 
    8.

数组转成对象的替代方案

Object.fromEntries是 ES10 推出来，很新，可能浏览器支持度还够友好。因此，让我们看一下如果将具有键值对结构的数组转成对象。

使用 reduce 方法将数组转成对象

将数组转换为对象的一种流行方法是使用reduce。

 
 
 
 
      
  
  
  
  1. const array = [ 
    2.   
  
  
  
  2.   ['key1', 'value1'], 
    3.   
  
  
  
  3.   ['key2', 'value2'] 
    4.   
  
  
  
  4. ] 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. const map = new Map([ 
    7.   
  
  
  
  7.   ['key1', 'value1'], 
    8.   
  
  
  
  8.   ['key2', 'value2'] 
    9.   
  
  
  
  9. ]) 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. function toObject(pairs) { 
    12.   
  
  
  
  12.   return Array.from(pairs).reduce( 
    13.   
  
  
  
  13.     (acc, [key, value]) => Object.assign(acc, { [key]: value}), 
    14.   
  
  
  
  14.     {} 
    15.   
  
  
  
  15.   ) 
    16.   
  
  
  
  16. } 
    17.   
  
  
  
  17.  
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19. // 结果 
    20.   
  
  
  
  20. // { key1: 'value1', key2: 'value2' } 
    21.

使用 库 将数组转成对象

Lodash 也提供了将键值对转换为对象的方法。

_.object

将数组转换为对象。传递[key, value]对的单个列表，或键的列表和值的列表。

 
 
 
 
      
  
  
  
  1. const array = [ 
    2.   
  
  
  
  2.   ['key1', 'value1'], 
    3.   
  
  
  
  3.   ['key2', 'value2'] 
    4.   
  
  
  
  4. ] 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. _.object(array) 
    7.   
  
  
  
  7. // { key1: 'value1', key2: 'value2' } 
    8.

_.fromPairs

_.fromPairs 是 _.toPairs 的反向，它的方法返回一个由键值对组成的对象。

 
 
 
 
      
  
  
  
  1. const array = [ 
    2.   
  
  
  
  2.   ['key1', 'value1'], 
    3.   
  
  
  
  3.   ['key2', 'value2'], 
    4.   
  
  
  
  4. ] 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. _.fromPairs(array) 
    7.   
  
  
  
  7. // { key1: 'value1', key2: 'value2' } 
    8.

浏览器支持情况

作者：Samantha Ming 译者：前端小智 来源：medium

原文：https://medium.com/@samanthaming/javascript-object-fromentries-4395660334d1

本文转载自微信公众号「 大迁世界」，可以通过以下二维码关注。转载本文请联系 大迁世界公众号。

分享标题：详解 ES10 中 Object.fromEntries() 的缘起
文章起源：http://www.shufengxianlan.com/qtweb/news41/478941.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

外贸建站知识

行业网站建设

IDC机房托管　　 　手机网站版本　　 　梦港之夜　　 　广汉锦华建材　　 　交互设计　　 　LED网站设计方案　　 　服务器托管　　 　黔盛装饰　　 　成都小程序开发公司　　 　营山网站建设　　 　国泰民安消防　　 　温江服务器租用　　 　网站制作价格　　 　成都网站优化　　 　证企宝　　 　梓潼网站建设　　 　成都枢纽中心　　 　玄科环保　　 　成都定制网站建设　　 　网站开发