迅速了解一下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解决innerText浏览器兼容问题思路代码
May 17 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 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
Chrome Web App开发小结
2014/09/04 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
html5 canvas 详细使用教程
2017/01/20 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
python求crc32值的方法
2014/10/05 Python
Python map和reduce函数用法示例
2015/02/26 Python
Python出现segfault错误解决方法
2016/04/16 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
详解python UDP 编程
2020/08/24 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
应用艺术专业个人的自我评价
2014/01/03 职场文书
工作自我评价怎么写
2014/01/29 职场文书
《恐龙》教学反思
2014/04/27 职场文书
平面设计专业求职信
2014/08/09 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
合伙购房协议样本
2014/10/06 职场文书
辞职信怎么写
2015/02/27 职场文书
教师工作能力自我评价
2015/03/04 职场文书
女方离婚起诉书
2015/05/18 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
七个非常实用的Python工具包总结
2021/06/15 Python