微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势,学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。
咱们晓得 Object.entries()
是将对象转成一个本身可枚举属性的键值对数组。同样,咱们也能够把键值对数组转成了对象。
const keyValuePair = [ ['cow', '?'], ['pig', '?'],]Object.fromEntries(keyValuePair);// { cow: '?', pig: '?' }
Object.fromEntries
咱们晓得,对象构造是一个是有键和值组合体,如下所示:
const object = { key: 'value',};
基于这个逻辑,如果咱们想将某个货色转成对象,就必须要传递键和值。
有两种类型的参数能够满足这些要求:
- 具备嵌套键值对的数组
- Map 对象
应用 Object.fromEntries
将数组转成对象
上面是个键-值对嵌套数组
const nestedArray = [ ['key 1', 'value 1'], ['key 2', 'value 2']]
应用Object.fromEntries
能够将该数组转成对象:
Object.fromEntries(nestedArray);// { key 1: "value 1", key 2: "value 2"}
应用 Object.fromEntries
将 Map 转成对象
ES6 为咱们带来了一个名为 map 的新对象,它与对象十分类似。
TC39:映射对象是键/值对的汇合,其中键和值都能够是任意 ECMAScript 语言值。
咱们来创立一个 Map 对象:
// 应用构造函数const map = new Map([ ['key 1', 'value 1'], ['key 2', 'value 2']])// 或者咱们能够应用实例办法“set”const map = new Map()map.set('key 1', 'value 1')map.set('key 2', 'value 2')// 后果Map(2) {"key 1" => "value 1", "key 2" => "value 2"}
让咱们应用Object.fromentries
将 map 转换为一个对象
Object.fromEntries(map);// { key 1: "value 1", key 2: "value 2"}
对象的类型谬误:试图应用 Object.fromEntries
将 其它类型 转成对象
将上面的类型传入 Object.fromEntries
都会导致报错 caught TypeError
。
确保传递值要有键-值对。
大家都说简历没我的项目写,我就帮大家找了一个我的项目,还附赠【搭建教程】。
Object.fromEntries vs Object.entries
Object.fromEntries
是 Object.entries
反向。 Object.entries()
办法返回一个给定对象本身可枚举属性的键值对数组,而Object.fromEntries()
办法把键值对列表转换为一个对象。
const object = { key1: 'value1', key2: 'value2' }const array = Object.entries(object)// [ ["key1", "value1"], ["key2", "value2"] ]Object.fromEntries(array)// { key1: 'value1', key2: 'value2' }
对象到对象的转换
如果你浏览了 TC39 提案,这就是引入此新办法的起因。 随着Object.entries
的引入之前,要将一些非对象构造转成对象是比拟麻烦的。
通常,当咱们抉择应用Object.entries
,是因为它使咱们可能拜访许多丑陋的数组办法,例如filter
。 然而在实现转换之后,咱们有点被该数组所困扰。
const food = { meat: '?', broccoli: '?', carrot: '?' }// ? 卡在这后果上...const vegetarian = Object.entries(food).filter( ([key, value]) => key !== 'meat',)// [ ["broccoli", "?"], ["carrot", "?"] ]
好吧! 咱们能够利用所有这些有用的数组办法,但依然能够返回对象。 最初,从对象到对象的转换?
const food = { meat: '?', broccoli: '?', carrot: '?' }const vegetarian = Object.fromEntries( Object.entries(food).filter(([key, value]) => key !== 'meat'),)// { broccoli: '?', carrot: '?' }
数组转成对象的代替计划
Object.fromEntries
是 ES10 推出来,很新,可能浏览器反对度还够敌对。 因而,让咱们看一下如果将具备键值对构造的数组转成对象。
应用 reduce 办法将数组转成对象
将数组转换为对象的一种风行办法是应用reduce
。
const array = [ ['key1', 'value1'], ['key2', 'value2']]const map = new Map([ ['key1', 'value1'], ['key2', 'value2']])function toObject(pairs) { return Array.from(pairs).reduce( (acc, [key, value]) => Object.assign(acc, { [key]: value}), {} )}// 后果// { key1: 'value1', key2: 'value2' }
应用 库 将数组转成对象
Lodash 也提供了将键值对转换为对象的办法。
_.object
将数组转换为对象。 传递[key, value]
对的单个列表,或键的列表和值的列表。
const array = [ ['key1', 'value1'], ['key2', 'value2']]_.object(array)// { key1: 'value1', key2: 'value2' }
_.fromPairs
_.fromPairs
是 _.toPairs
的反向,它的办法返回一个由键值对组成的对象。
const array = [ ['key1', 'value1'], ['key2', 'value2'],]_.fromPairs(array)// { key1: 'value1', key2: 'value2' }
浏览器反对状况
代码部署后可能存在的BUG没法实时晓得,预先为了解决这些BUG,花了大量的工夫进行log 调试,这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。
原文:https://medium.com/@samantham...
编辑中可能存在的bug没法实时晓得,预先为了解决这些bug,花了大量的工夫进行log 调试,这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。
交换
有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588... 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。