当前位置:

Object.entries(),但你还知道有Object.fromEntries()吗

访客 2024-04-24 882 0

object.entries()转换一个objec为array。但是,如果你想做相反的事情怎么办?不用再想了!使用Object.fromEntries()来把array转换为object?。

constkeyValuePair=[['cow','?'],['pig','?'],];Object.fromEntries(keyValuePair);//{cow:'?',pig:'?'}Object.fromEntries

我们先指出对象的解剖方法,对象是有一个键和一个值的东西。

constobject={key:'value',};

如果我们想将某物转换为对象,我们需要传递具有这两个要求的东西:keyvalue

满足这些要求的参数有两种:

  1. 具有嵌套键值对的数组
  2. Map对象
用Object.fromEntries将数组转为对象

这是带有键值对的嵌套数组

constnestedArray=[['key1','value1'],['key2','value2'],];

当我们将Object.fromEntries应用于它时,我们可以从中获取对象。

Object.fromEntries(nestedArray);//{key1:"value1",key2:"value2"}用Object.fromEntries将Map转为对象

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

让我们创建新的Map对象

//使用构造函数constmap=newMap([['key1','value1'],['key2','value2'],]);//或者我们可以使用实例方法,"set"constmap=newMap();map.set('key1','value1');map.set('key2','value2');//结果//Map(2){"key1"=>"value1","key2"=>"value2"}

现在,我们使用Object.fromEntries将Map转换为对象

Object.fromEntries(map);//{key1:"value1",key2:"value2"}Object.fromEntries与其他类型的类型错误

当你试图将其他数据类型传递到Object.fromEntries时,请小心,所有这些都会抛出一个错误?

未捕获的类型错误(UncaughtTypeError)

确保只传递键值对?

Object.fromEntriesvsObject.entries

Object.fromEntriesObject.entries的效果相反。所以Object.entries将转换我们的数组并返回一个新的嵌套的键值对数组。而Object.fromEntries将把这个数组转回一个对象。

constobject={key1:'value1',key2:'value2'};constarray=Object.entries(object);//[["key1","value1"],["key2","value2"]]Object.fromEntries(array);//{key1:'value1',key2:'value2'}Object到Object的转换

如果你阅读了原始的TC39提案,这就是引入此新方法的原因。随着Object.entries的引入,没有一种简单的方法可以将结果转换回对象。

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

constfood={meat:'?',broccoli:'?',carrot:'?'};//?StuckinArraylandconstvegetarian=Object.entries(food).filter(([key,value])=>key!=='meat',);//[["broccoli","?"],["carrot","?"]]

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

constfood={meat:'?',broccoli:'?',carrot:'?'};//?Yay,stillinObjectlandconstvegetarian=Object.fromEntries(Object.entries(food).filter(([key,value])=>key!=='meat'),);//{broccoli:'?',carrot:'?'}浏览器支持

除了InternetExplorer,大多数主流浏览器都支持此方法?。


本文首发于公众号《前端全栈开发者》ID:by-zhangbing-dev,第一时间阅读最新文章,会优先两天发表新文章。关注后私信回复:大礼包,送某网精品视频课程网盘资料,准能为你节省不少钱!

发表评论

  • 评论列表
还没有人评论,快来抢沙发吧~