迅速了解一下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 CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
微信小程序人脸识别功能代码实例
May 07 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 Javascript
vue视频播放暂停代码
Nov 08 Javascript
Ant Design的Table组件去除
Oct 24 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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
基于PHP生成简单的验证码
2016/06/01 PHP
php实现记事本案例
2020/10/20 PHP
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
spyder常用快捷键(分享)
2017/07/19 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
Python中如何定义一个函数
2016/09/06 面试题
新闻编辑自荐书范文
2014/02/12 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
物业保安辞职信
2015/05/12 职场文书
理解深度学习之深度学习简介
2021/04/14 Python