迅速了解一下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 方法实现返回多个数据的代码
Apr 30 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
js中Object.create实例用法详解
Oct 05 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
javascript 跳转代码集合
2009/12/03 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
Python处理字符串之isspace()方法的使用
2015/05/19 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
物业保安主管岗位职责
2013/12/25 职场文书
本科应届生自荐信
2014/06/29 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
商务邀请函
2015/01/30 职场文书
六一活动主持词
2015/06/30 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python