ES10新特性指南

原文：The Complete Guide to ES10 Features 链接：https://medium.com/@js_tut/the-complete-guide-to-es10-features-f09a8c7be1bd 翻译：印象卡卡

ES10仍然只是一个草案， 但是除了Object.fromEntries大多数功能已经在Chrome中实现，为什么不尽早开始探索一番呢？ 当浏览器支持它的时候，你将走在技术前沿。 等待浏览器支持只是时间问题。 对于有兴趣探索ES10的人来说，这是一份简要的指南。
ES10没有ES6那样巨大的特性变化但是也添加了很多有趣的特性：
**
⬬ String .matchAll()
⬬ Dynamic import()
⬬ Array .flat() .flatMap()
⬬ Object .fromEntries()
⬬ String .trimStart() .trimEnd()
⬬ well-formed JSON.stringify()
⬬ stable Array .sort()
⬬ new Function .toString()
⬬ Standardized globalThis object

BigInt — 任意精度的整数

BigInt是第7种原始数据类型

BigInt是一个任意精度的整数，意味着变量可以定义2⁵³的数字了，不再有9007199254740992的最大限制。

const b = 1n; // 定义一个bigint

之前大于9007199254740992的整数是不支持的，超过限制之后值会锁定为MAX_SAFE_INTEGER + 1

const limit = Number.MAX_SAFE_INTEGER;
⇨ 9007199254740991
limit + 1;
⇨ 9007199254740992
limit + 2;
⇨ 9007199254740992 <--- MAX_SAFE_INTEGER + 1 exceeded
const larger = 9007199254740991n;
⇨ 9007199254740991n
const integer = BigInt(9007199254740991); // 使用数字初定义
⇨ 9007199254740991n
const same = BigInt("9007199254740991"); // 使用字符串定义
⇨ 9007199254740991n

typeof

typeof 10;
⇨ 'number'
typeof 10n;
⇨ 'bigint'

两种类型可以使用等于号比较

10n === BigInt(10);
⇨ true
10n == 10;
⇨ true

两种类型不可以使用数学运算符

200n / 10n
⇨ 20n
200n / 20
⇨ Uncaught TypeError:
   Cannot mix BigInt and other types, use explicit conversions <

前边可以加“-”号，不可以加“+”号

-100n
⇨ -100n
+100n
⇨ Uncaught TypeError:
  Cannot convert a BigInt value to a number

String.prototype.matchAll()

String.match只返回第一个匹配的元素

let string = 'Helle';
let matches = string.match('l');
console.log(matches[0]); // "l"

使用.matchAll()

// Match all occurrences of the letters: "e" or "l" 
let iterator = "hello".matchAll(/[el]/);
for (const match of iterator)
    console.log(match);
// result
[ 'e', index: 1, input: 'hello' ] // Iteration 1
[ 'l', index: 2, input: 'hello' ] // Iteration 2
[ 'l', index: 3, input: 'hello' ] // Iteration 3

Dynamic import

现在经常用的动态引入js

element.addEventListener('click', async () => {
    const module = await import(`./api-scripts/button-click.js`);
    module.clickEvent();
});

Array.prototype.flat()

扁平化数组

let multi = [1,2,3,[4,5,6,[7,8,9,[10,11,12]]]];
multi.flat();               // [1,2,3,4,5,6,Array(4)]
multi.flat().flat();        // [1,2,3,4,5,6,7,8,9,Array(3)]
multi.flat().flat().flat(); // [1,2,3,4,5,6,7,8,9,10,11,12]
multi.flat(Infinity);       // [1,2,3,4,5,6,7,8,9,10,11,12]

Array.prototype.flatMap()

相当于array.map(x => [x, x 2, x x]).flat()

let array = [1, 2, 3, 4, 5];
array.map(x => [x, x * 2]);
// result
[Array(2), Array(2), Array(2)]
0: (2)[1, 2]
1: (2)[2, 4]
2: (2)[3, 6]
3: (2)[4, 8]
4: (2)[5, 10]
array.flatMap(v => [v, v * 2]);
// result
[1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

Object.fromEntries()

相当于Object.entries()的逆运算

let obj = { apple : 10, orange : 20, banana : 30 };
let entries = Object.entries(obj);
entries;
(3) [Array(2), Array(2), Array(2)]
 0: (2) ["apple", 10]
 1: (2) ["orange", 20]
 2: (2) ["banana", 30]
let fromEntries = Object.fromEntries(entries);
{ apple: 10, orange: 20, banana: 30 }

String.prototype.trimStart() & String.prototype.trimEnd()

trim可以指定开头还是结尾了。

let greeting = "     Space around     ";
greeting.trimEnd();   // "     Space around";
greeting.trimStart(); // "Space around     ";

稳定的Array.prototype.sort()

之前的V8使用的不稳定的快排算法对于超过10个元素的数组。

新的Function.toString()

方法也是对象，对象都有toString()方法因为Object.prototype.toString()，所有对象都继承这个方法。
ES10标准化了所有对象和内置方法的字符串表示。

可选的catch参数

之前的catch()需要error参数，ES10里是可选的。

try {
    JSON.parse(text);
    return true;
}
catch
{
    return false;
}

标准化的globalThis对象

之前的全局对象不是标准化的，为了兼容需要写这样的代码:

if (typeof self !== 'undefined') { return self; }
    if (typeof window !== 'undefined') { return window; }
    if (typeof global !== 'undefined') { return global; }
    throw new Error('unable to locate global object');
};

ES10添加了 globalThis 对象来访问全局在所有平台上

// Access global array constructor
globalThis.Array(0, 1, 2);
⇨ [0, 1, 2]
// Similar to window.v = { flag: true } in <= ES5
globalThis.v = { flag: true };
console.log(globalThis.v);
⇨ { flag: true }

Symbol.description

description 是一个只读的属性返回Symbol对象的描述信息

let mySymbol = 'My Symbol';
let symObj = Symbol(mySymbol);
symObj; // Symbol(My Symbol)
String(symObj) === `Symbol(${mySymbol})`); // true
symObj.description; // "My Symbol"

ES10 Classes: private, static & public members

新的语法字符# octothorpe（hash tag）现在用于直接在类里定义变量，函数，getter和setter ……以及构造函数和类方法。

class Raven extends Bird {
    #state = { eggs: 10};
    // getter
    get #eggs() { 
        return state.eggs;
    }
    // setter
    set #eggs(value) {
        this.#state.eggs = value;
    }
    #lay() {
        this.#eggs++;
    }
    constructor() {
        super();
        this.#lay.bind(this);
    }
    #render() {
        /* paint UI */
    }
}