迅速了解一下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 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
简单了解vue 插值表达式Mustache
Jul 22 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设计模式 Composite (组合模式)
2011/06/26 PHP
如何在php中正确的使用json
2013/08/06 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
jsTree使用记录实例
2016/12/01 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
vue中created和mounted的区别浅析
2019/08/13 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
英语师范专业毕业生自荐信
2013/09/21 职场文书
计算机操作自荐信
2013/12/07 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
办理居住证介绍信
2014/01/15 职场文书
个人汇报材料范文
2014/12/30 职场文书
周一给客户的问候语
2015/11/10 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技