迅速了解一下 ES10 中 Object.fromEntries 的用法

widuu 发布于2019-08-23 15:38 / 2529人阅读

摘要：方法就是的逆操作，作用是将一个键值对数组转化为一个对象同样的该方法也已经成为中提案在介绍之前，回顾一下的用法。

Object.fromEntries 方法就是 entries 的逆操作，作用是将一个键值对数组转化为一个对象

同样的该方法也已经成为 ES10 中 stage4 提案：

Object.entries

在介绍 fromEntries 之前，回顾一下 entries 的用法。这个方法返回的是对象自身的、可枚举的属性组成的数组：

const obj = { a: "1", b: 2 }
Object.entries(obj)

也可以通过 new Map 构造函数将对象转为 Map：

new Map(Object.entries(obj))
// Map(2) {"a" => "1", "b" => 2}

Object.fromEntries

fromEntries 方法则刚好相反，将数组转为对象：

Object.fromEntries([["a", "1"], ["b", 2]])

当然也可以传入一个 Map 将其转为对象：

const map = new Map().set("a", 1).set("b", 2)

Object.fromEntries(map)

几个注意事项

当传入的参数中有重复出现的 key：

传入给 fromEntries 的参数，如果有重复的 key 出现，后面的会被采用：

Object.fromEntries([["a", "1"], ["a", "2"]])

虽然 entries 不支持 symbol 作为 key，但 fromEntries 却可以：

Object.fromEntries([[s, 1]])
Object.entries({ s: 1 })

上述代码效果如下，entreis 接收的对象中如果有 symbol 作为 key 会直接被转换为字符串：

key 为字符串或 symbol 之外的类型会被强制转为字符串：

他可以接收任何类数组，如 Map 等，甚至是有自定义迭代器的对象：

obj = {}
obj[Symbol.iterator] = function* () {
    yield [1, 11]
    yield [2, 22]
    yield [3, 33]
}

console.dir(Object.fromEntries(obj))

最后还有只支持创建对象可遍历的属性

应用：过滤属性

定义一个函数，这个函数第一个参数为对象，另外接收其他几个参数作为需要保留的属性

function foo(obj, ...keys) {
    return Object.fromEntries(Object.entries(obj)
        .filter(([key]) => keys.includes(key))
    )
}

console.table(foo({ name: "oli", age: "12" }, "name"))

应用：处理表单

假设我们有这样一组数据：

[{
    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)

数据过滤完毕后就可以很轻松的粘贴到 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" }))

还有其他通过使用数组方法来实现的各种功能，这里就不一一展示了

应用：将 url 查询字符串转为对象

query = Object.fromEntries(new URLSearchParams("foo=bar&baz=qux"))
// {foo: "bar", baz: "qux"}

测试环境

想要尝试的童鞋，需要下载 chrome 测试版，保证 chrome 浏览器版本要大于 73:

参考：

https://www.chromestatus.com/...

https://github.com/tc39/propo...

http://2ality.com/2019/01/obj...

更多内容关注：

云服务器 GPU云服务器 java中枚举的用法 python中for的用法 python中input的用法 php中css的用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102360.html

目前可以使用ES10的5个新特性

摘要：可选的语句中的有时候并没有用，思考下面代码使用浏览器可能尚未实现的功能这里回调函数中已经帮我们处理好的错误此代码中的回调的信息并没有用处。为了保证可读性，本文采用意译而非直译。 showImg(https://segmentfault.com/img/bVbucuJ?w=1024&h=682); ECMAScript 2015，也称为ES6，是一个花了6年时间完成的主要版本。从那时起...

canopus4u 2019-08-23 18:16 评论0 收藏0
精读《What's new in javascript》

摘要：举例来说即便某个失败了，也不会导致的发生，这样在不在乎是否有项目失败，只要拿到都结束的信号的场景很有用。对于则稍有不同只要有子项，就会完成，哪怕第一个了，而第二个了，也会，而对于，这种场景会直接。 1. 引言本周精读的内容是：Google I/O 19。 2019 年 Google I/O 介绍了一些激动人心的 JS 新特性，这些特性有些已经被主流浏览器实现，并支持 polyfill...

dabai 2019-08-23 17:55 评论0 收藏0
ES6入门之对象的新增方法

showImg(https://user-gold-cdn.xitu.io/2019/5/22/16adcec448a45d82); 1. Object.is() 用来解决在ES5中两种相等运算符的缺点。用来比较两个值是否严格相等，行为和（===）基本一致。在ES5中判断两个值是否相等，只能用（==）相等运算符和（===）严格相等运算符，但是这两货都有缺点，前者两边的值都会转换数据类型，...

zhou_you 2019-05-22 19:25 评论0 收藏0
ES6入门之对象的新增方法

showImg(https://segmentfault.com/img/remote/1460000019258913?w=2933&h=1955); 1. Object.is() 用来解决在ES5中两种相等运算符的缺点。用来比较两个值是否严格相等，行为和（===）基本一致。在ES5中判断两个值是否相等，只能用（==）相等运算符和（===）严格相等运算符，但是这两货都有缺点，前者两边的值都...

Keven 2019-08-26 13:52 评论0 收藏0
ES2019(ES10)

摘要：一将语法扩展为超集动机声称是一个子集，但是因为已经有详细记录这是不正确的，因为字符串可以包含未转义的和字符，而字符串则不能二对进行了语法更改，允许中不写捕获动机此提议引入的语法更改允许省略绑定其周围的括号原写法尝试使用可能无法实现的功能支 showImg(https://segmentfault.com/img/bVbqWmL?w=1600&h=900); 一、JSON superse...

shiina 2019-08-23 16:46 评论0 收藏0