简介

ES10是ECMA协会在2019年6月发行的一个版本，因为是ECMAScript的第十个版本，所以也称为ES10.

明天咱们解说一下ES10的新个性。

ES10引入了2大个性和4个小的个性，咱们接下来一一解说。

Array的新办法flat和flatMap

在ES10中，给Array引入了两个新的办法，别离是flat和flatMap。

先来看一下flat。

咱们看一下 Array<T>.prototype.flat() 的定义：

.flat(depth = 1): any[]

flat的作用是将Array中的Array中的内容取出来，放到最顶层Array中。咱们能够传入一个depth参数，示意的是须要flat的Array层级。

举个例子：

> [ 1,2, [3,4], [[5,6]] ].flat(0) // no change[ 1, 2, [ 3, 4 ], [ [ 5, 6 ] ] ]> [ 1,2, [3,4], [[5,6]] ].flat(1)[ 1, 2, 3, 4, [ 5, 6 ] ]> [ 1,2, [3,4], [[5,6]] ].flat(2)[ 1, 2, 3, 4, 5, 6 ]

当depth=0的时候，就示意不会对Array内置的Array进行flat操作。

咱们再看一下Array<T>.prototype.flatMap()的定义：

 .flatMap<U>(  callback: (value: T, index: number, array: T[]) => U|Array<U>,  thisValue?: any): U[]

flatMap是map和flat的联合，上面的两个操作是等价的：

arr.flatMap(func)arr.map(func).flat(1)

咱们看几个flatMap的例子：

> ['a', 'b', 'c'].flatMap(x => x)[ 'a', 'b', 'c' ]> ['a', 'b', 'c'].flatMap(x => [x])[ 'a', 'b', 'c' ]> ['a', 'b', 'c'].flatMap(x => [[x]])[ [ 'a' ], [ 'b' ], [ 'c' ] ]> ['a', 'b', 'c'].flatMap((x, i) => new Array(i+1).fill(x))[ 'a', 'b', 'b', 'c', 'c', 'c' ]

Object的新办法fromEntries

Object.fromEntries的次要作用就是通过给定的[key,value]，来创立新的Object对象。

var newObj =  Object.fromEntries([['foo',1], ['bar',2]]);console.log(newObj);{ foo: 1, bar: 2 }

下面例子中，咱们通过给定的两个key-value对，创立了新的object对象。

和fromEntries相同的办法，就是Object.entries,用来遍历对象属性。

还是刚刚的例子，咱们再调用一下Object.entries办法：

console.log(Object.entries(newObj));[ [ 'foo', 1 ], [ 'bar', 2 ] ]

String的新办法trimStart和trimEnd

JS中曾经有了trim的办法，能够打消String前后的空格。

> '  abc  '.trim()'abc'

但有时候可能须要打消后面或者前面的空格，ES10引入了trimStart和trimEnd办法：

> '  abc  '.trimStart()'abc  '> '  abc  '.trimEnd()'  abc'

留神，有些浏览器可能曾经有了trimLeft和trimRight办法，在EMCAScript标准中，他们和trimStart，trimEnd是等价的。

可拜访的Symbol的description属性

咱们在创立Symbol的时候，能够传入一个description作为参数来构建Symbol：

const sym = Symbol('www.flydean.com');

在ES10之前，咱们想要拜访Symbol的description是这样做的：

console.log(String(sym));//Symbol(www.flydean.com)

当初咱们能够间接通过description属性来拜访了：

console.log(sym.description);//www.flydean.com

可疏忽的catch参数

在传统的写法中，catch是要承受一个error参数的：

try {  // ···} catch (error) {  // ···}

但有时候咱们曾经晓得这个异样是不重要的，或者说，咱们想疏忽掉这个异样，那么在ES10中，咱们能够省略这个error参数：

try {  // ···} catch {  // ···}

Array的稳固排序

Array有个sort性能，能够依据元素内容进行排序。

ES10中引入了稳固排序的概念，也就是说如果排序的key是雷同的，那么这些雷同key的程序在排序中是不会发生变化的。

举个例子：

const arr = [  { key: 'b', value: 1 },  { key: 'a', value: 2 },  { key: 'b', value: 3 },];

arr.sort((x, y) => x.key.localeCompare(y.key, 'en-US'));

咱们依据key来进行排序，从而让a，排在b后面，然而两个key=b的元素地位是不会变动的。

console.log(arr);[  { key: 'a', value: 2 },  { key: 'b', value: 1 },  { key: 'b', value: 3 }]

JSON.stringify

JSON是一个很不便的数据传输格局，它不像XML那么简单，长处就是体积小，便于传输。

依据RFC3629的标准，在公共环境中传输JSON，必须应用UTF-8进行编码。

JSON text exchanged between systems that are not part of a closed
ecosystem MUST be encoded using UTF-8 [RFC3629].

在讲JSON.stringify之前，咱们先回顾一下ES6中的Escape sequences。

ES6中有三种escape:

1. Hex escape:16进制escape。本义的是2位的16进制。

  > '\x7A' === 'z'  true

1. Unicode escape：本义的是4位的16进制

 > '\u007A' === 'z'  true

1. Unicode code point escape：本义的是1位或者多位的16进制

  > '\u{7A}' === 'z'  true

最初一个本义是在ES6中引入的。

unicode字符集最初是要存储到文件或者内存外面的，间接存储的话，空间占用太大。那怎么存呢？应用固定的1个字节，2个字节还是用变长的字节呢？于是咱们依据编码方式的不同，分成了UTF-8，UTF-16，UTF-32等多种编码方式。

其中UTF-8是一种变长的编码方案，它应用1-4个字节来存储。UTF-16应用2个或者4个字节来存储。

而UTF-32是应用4个字节来存储。这三种编码方式中，只有UTF-8是兼容ASCII的，这也是为什么国内上UTF-8编码方式比拟通用的起因（毕竟计算机技术都是西方人搞进去的）。

咱们晓得在Unicode编码中，U+D800到U+DFFF的这些字符是预留给UTF-16应用，如果咱们输出的是这个范畴内的字符的话，是无奈被转换成为UTF-8格局的。

这就是原来的JSON.stringify可能呈现的问题。

在ES10中，JSON.stringify对于这些不可转换成UTF-8的字符，间接返回对应的code unit escape sequences。

console.log(JSON.stringify('\u{D800}'));"\ud800"

JSON 被归为ECMAScript的子集

在之前，JSON不是ECMAScript的子集，从而导致有些能够在JSON中蕴含的字符，不可能在ECMAScript的字面量中呈现，比方U+2028 和U+2029 ：

const sourceCode = '"\u2028"';eval(sourceCode); // SyntaxErrorJSON.parse(json); // OK

这次扭转之后，咱们在编码的时候就不须要再去辨别是JSON还是ECMAScript了。

Function的toString办法

在ES10中，如果Function能够通过以ECMAScript源代码的形式示意的话，则toString会间接返回这个函数的代码：

> class C { foo() { /*hello*/ } }> C.prototype.foo.toString()'foo() { /*hello*/ }'

如果是一些native的办法，比方底层c或者c++实现的代码，则间接返回[native code]:

> Math.pow.toString()'function pow() { [native code] }'

本文作者：flydean程序那些事

本文链接：http://www.flydean.com/ecmascript-10/

本文起源：flydean的博客

欢送关注我的公众号:「程序那些事」最艰深的解读，最粗浅的干货，最简洁的教程，泛滥你不晓得的小技巧等你来发现！