迅速了解一下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 相关文章推荐
ejs v9 javascript模板系统
Mar 21 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
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相关资料
2006/10/09 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
Python中使用动态变量名的方法
2014/05/06 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
python2.7的flask框架之引用js&css等静态文件的实现方法
2019/08/22 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
Java基础知识面试要点
2016/07/29 面试题
员工合理化建议书
2014/05/19 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
特种设备安全管理制度
2015/08/06 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js