ES2019 到来，5个简单feature了解下

ECMAScript 2015，通常我们称为ES6，六年时间以来很重要的更新，从这之后，负责开发ECMAScript标准的机构Technical Committee 39 （简称TC39）每年都发布新标准。这个年度发布周期简化了很多流程，并使得新特性快速可用，受到Javascript社区的欢迎。

今年即将发布的ECMAScript2019（简称ES2019），新版本包括了 Object.fromEntries(), trimStart(), trimEnd(), flat(), flatMap(),symbol 对象的描述属性、可选捕获绑定等。

好消息是这些features已经在最新版本的Firfox和Chrome实现了，并且在老的浏览器中能够通过转换(transpiled)实现，这篇文章中，我们将会看看这些新的Features以及如何提升Javascript语言能力。

1. Object.fromEntries() 在javascript中数据格式转换是很常见的操作，转换Objects到arrays，ES2017推荐使用 Object.entries() 方法。此方法入参object，返回object可enumerable的string-keyed属性匹配的 [key,value] ，例如：

const obj = {one: 1, two: 2, three: 3};

console.log(Object.entries(obj));    
// => [["one", 1], ["two", 2], ["three", 3]]
复制代码

但如果我们想要逆转操作，数组转换成key-value匹配的object？其他编程语言，如Python，提供了 dict() 函数实现，另外有Underscore.js和Lodash提供了 _.fromPairs 函数。

ES2019推荐 Object.fromEntries() 方法 实现相似的功能。此静态方法可以很容易的实现一列key-value数组转换成object：

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() 操作。在这之前是很不简单才可以达到同样的结果的：

const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = 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()**的入参Map对象，然后创建一个object，它的key-values来自Map：

const map = new Map();
map.set('one', 1);
map.set('two', 2);

const obj = Object.fromEntries(map);

console.log(obj);    // => {one: 1, two: 2}
复制代码

Object.fromEntries()方法转换objects同样很有用，如下面的代码：

const obj = {a: 4, b: 9, c: 16};

// convert the object into an array
const arr = Object.entries(obj);

// get the square root of the numbers
const map = arr.map(([key, val]) => [key, Math.sqrt(val)]);

// convert the array back to an object
const obj2 = Object.fromEntries(map);

console.log(obj2);  // => {a: 2, b: 3, c: 4}
复制代码

(译者：直接for...of不就好了，杀鸡用牛刀?)

还有一个方便用途是在我们需要处理url的query查询参数时候（npm中的qs药丸了）：

const paramsString = 'param1=foo&param2=baz';
const searchParams = new URLSearchParams(paramsString);

Object.fromEntries(searchParams);    // => {param1: "foo", param2: "baz"}
//就不翻译了，so easy
复制代码

Object.fromEntries()方法已经在stage 4（ ECMAScript stage是什么？参考知乎：精读 TC39 与 ECMAScript 提案 ）建议中，这意味着即将包含在ES2019 standard中.

2. trimStart() 和 trimEnd()

trimStart()和 trimEnd() 方法从技术角度与 trimLeft() 和 trimRight 相似，这些方法也已经在stage4建议中，并且将会与 padStart() 和 padEnd() 具有一致标准：

const str = "   string   ";

// es2019
console.log(str.trimStart());    // => "string   "
console.log(str.trimEnd());      // => "   string"

// the same as
console.log(str.trimLeft());     // => "string   "
console.log(str.trimRight());    // => "   string"
复制代码

考虑web兼容性问题， trimLeft() 和 trimRight() 将会保留为 trimStart() 和 trimEnd() 的别名。

3. flat() 和 flatMap()

flat()把多维数组转为一维数组

const arr = ['a', 'b', ['c', 'd']];
const flattened = arr.flat();

console.log(flattened);    // => ["a", "b", "c", "d"]
复制代码

在这之前，你可能需要使用 reduce() 和 concat() 获得一维数组效果：

const arr = ['a', 'b', ['c', 'd']];
const flattened = [].concat.apply([], arr);

// or
// const flattened =  [].concat(...arr);

console.log(flattened);    // => ["a", "b", "c", "d"]

复制代码

Note 如果有多个空值在转换的数组中，将会被丢弃：

const arr = ['a', , , 'b', ['c', 'd']];
const flattened = arr.flat();

console.log(flattened);    // => ["a", "b", "c", "d"]
复制代码

flat()接受一个可选的参数，用来指定解构嵌套层级数，默认值为1:

const arr = [10, [20, [30]]];

console.log(arr.flat());     // => [10, 20, [30]]
console.log(arr.flat(1));    // => [10, 20, [30]]
console.log(arr.flat(2));    // => [10, 20, 30]
复制代码

flatMap()方法组合了 map() 和 flat() 两个方法功能，看例子吧：

const arr = [4.25, 19.99, 25.5];

console.log(arr.map(value => [Math.round(value)]));    
// => [[4], [20], [26]]

console.log(arr.flatMap(value => [Math.round(value)]));    
// => [4, 20, 26]

复制代码

看出区别了吗，就是组合map和去除嵌套层级 flat() 功能。默认解构一层嵌套层级。

4. Description property for Symbol objects

当创建一个Symbol对象时候，为了方便调试，你可以为它增加一个描述。 ES2019提议中给Symbol Object增加了一个只读描述属性，举个例子：

let sym = Symbol('foo');
console.log(sym.description);    // => foo

sym = Symbol();
console.log(sym.description);    // => undefined

// create a global symbol
sym = Symbol.for('bar');
console.log(sym.description);    // => bar
复制代码

5. Optional catch binding

catch绑定 在 try...catch 方法块中将不会被使用：

try {
  // use a feature that the browser might not have implemented
} catch (unused) {
  // fall back to an already implemented feature 
}
复制代码

unused在这段代码中并没有被使用到（译者：我相信大部分开发者都会如此）.当然 我们仍旧需要规避 SyntaxError 这类错误。这个提案对ECMAScript标准做了一个很小的改动：让开发者忽略catch绑定和它的括号：

try {
  // use a feature that the browser might not have implemented
} catch {
  // do something that doesn’t care about the value thrown
}
复制代码

...未完待续

其他：

1、原文：5 ES2019 features you can use today

2、腾讯小姐姐的5分钟帮助

3、小程序开源请求框架wxRequest

4、库盒科技公司找前端开发