Es10

为了保证可读性，本文采用意译而非直译。 ECMAScript 2015，也称为ES6，是一个花了6年时间完成的主要版本。从那时起，负责ECMAScript标准开发的技术委员会39 (TC39)每年都会发布该标准的新版本。这个年度发布周期简化了这个过程，并使新特性快速可用，JavaScript社区对此表示欢迎。 今年，ECMAScript 2019（简称ES2019）将会发布。 新功能包括Object.fromEntries()，trimStart()，trimEnd()，flat()，flatMap()，symbol对象的description属性，可选的catch绑定等。 好消息是这些功能已经在最新版本的Firefox和Chrome中实现，并且它们也可以被转换，以便旧版浏览器能够处理它们。 1. Object.fromEntries()在JavaScript中，将数据从一种格式转换为另一种格式非常常见。 为了便于将对象转换为数组，ES2017引入了Object.entrie()方法。 此方法将对象作为参数，并以[key，value]的形式返回对象自己的可枚举字符串键控属性对的数组。 例如： const obj = {one: 1, two: 2, three: 3};console.log(Object.entries(obj)); // => [["one", 1], ["two", 2], ["three", 3]]但是如果我们想要做相反的事情并将键值对列表转换为对象呢？ 某些编程语言（如Python）为此提供了dict()函数。 在Underscore.js和Lodash中还有_.fromPairs函数。 ES2019引入Object.fromEntries()方法为JavaScript带来类似的功能, 此静态方法允许你轻松地将键值对列表转换为对象： const myArray = [['one', 1], ['two', 2], ['three', 3]];const obj = Object.fromEntries(myArray);console.log(obj); // => {one: 1, two: 2, three: 3}如你所见，Object.fromEntries()与Object.entries()所做的事情正好相反。 虽然以前可以实现Object.fromEntries()相同的功能，但它实现方式有些复杂： const myArray = [['one', 1], ['two', 2], ['three', 3]];const Array.from(myArray).reduce((acc, [key, val]) => Object.assign(acc, {[key]: val}), {})console.log(obj); // => {one: 1, two: 2, three: 3}请记住，传递给Object.fromEntries()的参数可以是实现可迭代协议的任何对象，只要它返回一个两元素，类似于数组的对象即可。 ...

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.fromEntriesfromEntries 方法则刚好相反，将数组转为对象：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…更多内容关注： ...