迅速了解一下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 版本自动生成文章摘要
Jul 23 Javascript
再谈ie和firefox下的document.all属性
Oct 21 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 Javascript
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
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
帝国cms常用标签汇总
2015/07/06 PHP
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
Python文件及目录操作实例详解
2015/06/04 Python
Python的pycurl包用法简介
2015/11/13 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
Tensorflow累加的实现案例
2020/02/05 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
Ajax的优点和缺点
2014/11/21 面试题
自考毕业自我鉴定范文
2013/10/27 职场文书
小组合作学习反思
2014/02/18 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
电气自动化求职信
2014/06/24 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
加强作风建设工作总结
2014/10/23 职场文书
离婚起诉书范本
2015/05/18 职场文书