迅速了解一下ES10中Object.fromEntries的用法使用


Posted in Javascript onMarch 05, 2019

Object.fromEntries 方法就是 entries 的逆操作,作用是将一个键值对数组转化为一个对象

同样的该方法也已经成为 ES10 中 stage4 提案:

迅速了解一下ES10中Object.fromEntries的用法使用

Object.entries

在介绍 fromEntries 之前,回顾一下 entries 的用法。这个方法返回的是对象自身的、可枚举的属性组成的数组:

const obj = { a: '1', b: 2 }
Object.entries(obj)

迅速了解一下ES10中Object.fromEntries的用法使用

也可以通过 new Map 构造函数将对象转为 Map:

new Map(Object.entries(obj))
// Map(2) {"a" => "1", "b" => 2}

迅速了解一下ES10中Object.fromEntries的用法使用

Object.fromEntries

fromEntries 方法则刚好相反,将数组转为对象:

Object.fromEntries([['a', '1'], ['b', 2]])

迅速了解一下ES10中Object.fromEntries的用法使用

当然也可以传入一个 Map 将其转为对象:

const map = new Map().set('a', 1).set('b', 2)

Object.fromEntries(map)

迅速了解一下ES10中Object.fromEntries的用法使用

几个注意事项

当传入的参数中有重复出现的 key:

传入给 fromEntries 的参数,如果有重复的 key 出现,后面的会被采用:

Object.fromEntries([['a', '1'], ['a', '2']])

迅速了解一下ES10中Object.fromEntries的用法使用

虽然 entries 不支持 symbol 作为 key,但 fromEntries 却可以:

Object.fromEntries([[s, 1]])
Object.entries({ s: 1 })

上述代码效果如下,entreis 接收的对象中如果有 symbol 作为 key 会直接被转换为字符串:

迅速了解一下ES10中Object.fromEntries的用法使用

key 为字符串或 symbol 之外的类型会被强制转为字符串:

迅速了解一下ES10中Object.fromEntries的用法使用

他可以接收任何类数组,如 Map 等,甚至是有自定义迭代器的对象:

obj = {}
obj[Symbol.iterator] = function* () {
  yield [1, 11]
  yield [2, 22]
  yield [3, 33]
}

console.dir(Object.fromEntries(obj))

迅速了解一下ES10中Object.fromEntries的用法使用

最后还有只支持创建对象可遍历的属性

应用:过滤属性

定义一个函数,这个函数第一个参数为对象,另外接收其他几个参数作为需要保留的属性

function foo(obj, ...keys) {
  return Object.fromEntries(Object.entries(obj)
    .filter(([key]) => keys.includes(key))
  )
}

console.table(foo({ name: 'oli', age: '12' }, 'name'))

迅速了解一下ES10中Object.fromEntries的用法使用

应用:处理表单

假设我们有这样一组数据:

[{
  name: 'oli',
  age: 12
}, {
  name: 'troy',
  age: 14
}]

如果需要将其填充到 csv、sql 数据库表中,那么只需要如下方法过滤数据:

arr = [{
  name: 'oli',
  age: 12
}, {
  name: 'troy',
  age: 14
}]

obj = Object.fromEntries(
  arr.map(({name, age}) => [name, age])
)

console.table(obj)

迅速了解一下ES10中Object.fromEntries的用法使用

数据过滤完毕后就可以很轻松的粘贴到 Excel 表格或方便的存储到数据库中

应用:交换属性和值

function foo(obj) {
  return Object.fromEntries(Object.entries(obj)
    .map(([key, value]) => [value, key])
  )
}

console.table({ name: 'oli', age: '12' })
console.table(foo({ name: 'oli', age: '12' }))

迅速了解一下ES10中Object.fromEntries的用法使用

还有其他通过使用数组方法来实现的各种功能,这里就不一一展示了

应用:将 url 查询字符串转为对象

query = Object.fromEntries(new URLSearchParams('foo=bar&baz=qux'))
// {foo: "bar", baz: "qux"}

迅速了解一下ES10中Object.fromEntries的用法使用

测试环境

想要尝试的童鞋,需要下载 chrome 测试版,保证 chrome 浏览器版本要大于 73:

迅速了解一下ES10中Object.fromEntries的用法使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript对象模型-执行模型
Apr 28 Javascript
javascript天然的迭代器
Oct 29 Javascript
jqgrid 简单学习笔记
May 03 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法
May 19 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
es6数据变更同步到视图层的方法
Mar 04 #Javascript
使用webpack构建应用的方法步骤
Mar 04 #Javascript
详解element-ui中form验证杂记
Mar 04 #Javascript
JS使用数组实现的队列功能示例
Mar 04 #Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 #Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 #Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 #Javascript
You might like
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
人大复印资料处理程序_查询篇
2006/10/09 PHP
smarty缓存用法分析
2014/12/16 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
澳大利亚百货公司:David Jones
2018/02/08 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
竞职演讲稿范文
2014/01/11 职场文书
无故旷工检讨书
2014/01/26 职场文书
农贸市场管理制度
2014/01/31 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
工伤事故证明
2014/10/20 职场文书
小学主题班会教案
2015/08/17 职场文书
竞聘书的秘诀
2019/04/02 职场文书
Python实现数据的序列化操作详解
2022/07/07 Python