迅速了解一下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 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 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原型模式
2014/11/25 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
详谈PHP编码转换问题
2015/07/28 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
JS 面向对象的5钟写法
2009/07/31 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
什么是Web Service?
2012/07/25 面试题
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
护士先进个人总结
2015/02/13 职场文书
学校运动会感想
2015/08/10 职场文书
企业年会祝酒词
2015/08/11 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
MongoDB 常用的crud操作语句
2021/06/20 MongoDB