共计 3746 个字符，预计需要花费 10 分钟才能阅读完成。
简介
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:
- Hex escape:16 进制 escape。本义的是 2 位的 16 进制。
| > '\x7A' === 'z' | |
| true |
- Unicode escape：本义的是 4 位的 16 进制
| > '\u007A' === 'z' | |
| true |
- 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); // SyntaxError | |
| JSON.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 的博客
欢送关注我的公众号:「程序那些事」最艰深的解读，最粗浅的干货，最简洁的教程，泛滥你不晓得的小技巧等你来发现！
