ES2019新特性预览

2019-08-12  本文已影响0人  SCQ000

阅读javascript语言标准规范应该是每一个前端开发者都要进行的一项工作，那么了解标准化的过程也可以使我们在阅读文档工程中更加有的放矢。我们平常使用的javascript标准是由ecma international这个组织来发布的，它是javascript这个语言的标准化组织，成立于1960年，所以我们也把javascript叫做ecmascript。这里，简单介绍一下，ecmascript的文档中提到的几个阶段:

从2009年ES5发布后，历经6年tc39委员会于2015发布了es6。自从es6推出后，tc39委员会每年都会发布新的语言标准，采用的是频繁更新，小迭代的方式进行。而对于今年新的语言特性，我也是最近才开始学习的。语言标准这种东西，个人感觉不必过分追求时效性，毕竟一个api出来后能用好多年，早学晚学都可以。而且作为编程语言的使用者，个人还是喜欢等稳定后再进行深入学习。接下来这篇文章就是个人学习的一些小的总结：

主要特性

Array.prototype flat, flatMap

将数组打平这个功能在实际开发当中一直有着比较高的出场率，但是可惜之前官方并没有为我们提供这个API，所以我们一般都是通过lodash等工具库或者自己手动实现这个方法函数。
我们先来回顾一下，之前如果要用原生的es5或es6，我们应该如何快速简单地实现这个方法呢？
大家可以参考以下这段代码：

function flatten(a) {
    return Array.isArray(a) ? [].concat(...a.map(flatten)) : [a];
}

在es2019当中，官方为我们提供了这样一个类似的API：flat。原理大体上和上面的代码一样，内部实现都是采用了递归的concat方法。
不过在默认的情况下，es2019中这个flat方法只会打平第1层数据。所以如果我们想要支持多层递归的话，就需要显式给它传入参数。

[1,2,3,[1,2,[3, [4]]]].flat(2)

// 显示结果为：[1, 2, 3, 1, 2, 3, [4]]

另一个和它一起提供的是flatMap方法，其实就相当于flat和map一起组合操作。

[1,3,5].map(x => [x * x]); // [[1],[9],[25]]

[1,3,5].flatMap(x => [x * x]); // [1,9,25]

Object.fromEntries

之前es6当中为我们提供了Object.entries方法，主要用来实现从一个对象当中获取他们的key、value键值对的功能。

那么在es2019中，又出现了一个与之相对应的方法——Object.fromEntries。使用它可以将键值对数组还原成对象结构。例子如下：

var obj = {a: 1, b: 2, c: 3, d: 4};
var entries = Object.entries(obj);
var newObj = Object.fromEntries(entries);
console.log(newObj); // {a: 1, b: 2, c: 3, d: 4}

小特性

String.protope.{trimstart, trimEnd}

在对用户输入进行先行处理过程中，要去除字符串中多余的空格是比较常见的操作。之前已经有了trim方法可以同时去除头尾的空格。为了进一步方便我们实际的开发，官方又提供了另外两个API： trimStart和trimEnd，可以分别去除头和尾上的空格、换行符等。

var str = "    hello, scq000   ";
str.trimStart(); // "hello, scq000    ";
str.trimEnd(); // "    hello, scq000"

Symbol.protoype.description

从es6开始，javascript中引入了Symbol这个基本数据类型，可以实现一些数据内省等高级功能。在es2019中在Symbol类型上增加了description属性用来获取Symbol类型数据的描述信息。

let testSymbol = Symbol('test symbol');
testSymbol.description // test symbol

可选的catch参数

在进行try catch错误处理过程中，你如果没有给catch传参数的话，代码就会报错。在es2019中，你可以选择性地不给它传入参数。一个比较常见的使用场景是: 在使用JSON.parse解析字符串的时候，虽然你知道可能会报错，但是你并不关心这个错误，这时候你就可以把错误参数吞掉。

// 原先的代码可能长这样：
try {
    // do  something
} catch(e) {
    console.log(e);
}
// 新的代码
try {
    // do something
} catch {
   // do other thing without error parameter
}

虽然新的语言规范提供了吞掉错误参数的机制，不过个人建议在实际代码中还是要看情况选择性地使用。

Array.porotype.sort

在之前JavaScript中内置的数组排序算法使用的是不稳定的排序算法，也就是说在每一次执行后，对于相同数据来说，它们的相对位置是不一致的。
比如以下这段代码：

var arr1 = [{a: 1, b: 2}, {a: 2, b: 2}, {a: 1, b: 3}, {a: 2, b: 4}, {a: 5, b: 3}];
arr1.sort((a, b) => a.a - b.a);

返回的结果第一次可能是这样的: [{a: 1, b: 2}, {a: 1, b: 3}...]
但是第二次就变成: [{a:1,b:3}, {a:1, b: 2}....]
这就是不稳定排序算法的一些弊端。那么在es2019中，JavaScript内部放弃了不稳定的快排算法，而选择使用Tim Sort这种稳定的排序算法。这个排序算法，使用二分插入排序并优化了归并算法。如果想深入了解原理的话，可以参考Tim Sort。

其它特性

JSON.stringify

修复了一些unicode字符显示的问题，以下例子来自官方文档https://github.com/tc39/proposal-well-formed-stringify

// Non-BMP characters still serialize to surrogate pairs.
JSON.stringify('?')
// → '"?"'
JSON.stringify('\uD834\uDF06')
// → '"?"'

// Unpaired surrogate code units will serialize to escape sequences.
JSON.stringify('\uDF06\uD834')
// → '"\\udf06\\ud834"'
JSON.stringify('\uDEAD')
// → '"\\udead"'

JSON.superset 超集

之前如果JSON字符串中包含有行分隔符 (\u2028) 和段落分隔符 (\u2029)，那么在解析过程中会报错:SyntaxError: Invalid or unexpected token。es2019中新增了对它们的支持。

Function.prototype.toString

之前对于函数对象调用toString方法，会将它定义过程中的注释等信息去掉，现在会原样进行输出:

var sayHello = function() {
    // do something
    console.log('hello world')
}
sayHello.toString();
// "function() {
    // do something
    console.log('hello world')
}"

参考资料

https://github.com/tc39/proposals/blob/master/finished-proposals.md

上一篇下一篇

猜你喜欢

热点阅读