ES10 | fdd’Blog

ES2019

`Array.prototype.flat()/flatMap()`

flat()根据传入参数，深度递归遍历数组，并将所有元素与遍历的子数组中的元素合并为一个新数组返回。
flatMap()与map()方法的深度为 1 的flat()几乎相同。

var arr1 = [1, 2, 3, 4]
let arr2 = arr1.map(x => [x * 2]) // [[2], [4], [6], [8]]
let arr3 = arr2.flatMap(x => x) // [2, 4, 6, 8]
let arr4 = arr2.flatMap(x => [x]) // [[2], [4], [6], [8]]

`String.prototype.trimStart()/trimLeft()/trimEnd()/trimRight()`

在 ES5 中，可以通过 trim()来去掉字符首尾的空格。
ES10 之后可以使用trimStart()/trimLeft()去掉开头的空格。
trimEnd()/trimRight()去掉结尾的空格。
不过这里有一点要注意的是，trimStart()跟 trimEnd()才是标准方法，trimLeft()跟 trimRight()只是别名。

`Object.fromEntries()`

把键值对列表转换为一个对象，是Object.entries()的反函数

const entries = new Map([
    ['foo', 'bar'],
    ['baz', 42]
])
const obj = Object.fromEntries(entries)
console.log(obj) //{ foo: "bar", baz: 42 }

`Symbol.prototype.description`

只读属性，返回Symbol对象的可选描述的字符串。与Symbol.prototype.toString()不同的是，它不会包含Symbol的字符串。

console.log(Symbol('desc').toString()); // "Symbol(desc)"
console.log(Symbol('desc').description); // "desc"
console.log(Symbol('').description); // ""
console.log(Symbol().description); // undefined
console.log(Symbol.iterator.toString()); // "Symbol(Symbol.iterator)"
console.log(Symbol.iterator.description); // "Symbol.iterator"

`String.prototype.matchAll`

返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。并且返回一个不可重启的迭代器。

var regexp = /t(e)(st(\d?))/g
var str = 'test1test2';
console.log(str.match(regexp)); // ['test1', 'test2']
console.log(str.matchAll(regexp)); // RegExpStringIterator {}
console.log([...str.matchAll(regexp)])
// [['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4], ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4]]

`Function.prototype.toString()`返回注释与空格

在以往的版本中，Function.prototype.toString()得到的字符串是去掉空白符号的，但是从 ES10 开始会保留这些空格，如果是原生函数则返回你控制台看到的效果。

function sum(a, b) {
      return a + b;
}

console.log(sum.toString())
// "function sum(a, b) {
//         return a + b;
//  }"

`try-catch`

以往版本中，try-catch里的catch后面必须带异常参数

// ES10之前
try {
// tryCode
} catch (err) {
// catchCode
}

但是在 ES10 之后，这个参数却不是必须的，如果用不到，我们可以不用传。

try {
    console.log('Foobar')
} catch {
    console.error('Bar')
}

`BigInt`

内置对象，提供一种方法表示大于 2^53-1 的整数。BigInt可以表示任意大的整数。
定义BigInt：10n或BigInt()
以下操作符可以和BigInt一起使用：+,-,*,**,%。除>>>(无符号右移)之外的位操作符也可以支持。因为BigInt都是有符号的，>>>（无符号右移）不能用于BigInt。BigInt不支持单目 (+) 运算符。
/操作符对于整数的运算也没问题。可是因为这些变量是BigInt而不是BigDecimal，该操作符结果会向零取整，也就是说不会返回小数部分。
BigInt和Number不是严格相等的，但是宽松相等的。

所以在BigInt出来以后，JS 的原始类型便增加到了 7 个，如下：

Boolean
Null
Undefined
Number
String
Symbol (ES6)
BigInt (ES10)

`globalThis`

包含类似于全局对象this值，

1	globalThis === this // true

`import()`

静态的import语句用于导入由另一个模块导出的绑定。无论是否声明了严格模式，导入的模块都运行在严格模式下。
在浏览器中，import语句只能在声明了type='module'的script的标签中使用。
但是在 ES10 之后，我们有动态import()，它不需要依赖type="module"的script标签。

私有元素与方法


class Counter extends HTMLElement {
    #xValue = 0

    get #x() {
        return #xValue
    }
    set #x(value) {
        this.#xValue = value
        window.requestAnimationFrame(this.#render.bind(this))
    }

    #clicked() {
        this.#x++
    }

    constructor() {
        super();
        this.onclick = this.#clicked.bind(this)
    }

    connectedCallback() {
            this.#render()
    }

    #render() {
        this.textContent = this.#x.toString()
    }
}
window.customElements.define('num-counter', Counter)

Array.prototype.flat()/flatMap()

String.prototype.trimStart()/trimLeft()/trimEnd()/trimRight()

Object.fromEntries()

Symbol.prototype.description

String.prototype.matchAll

Function.prototype.toString()返回注释与空格

try-catch

BigInt

globalThis

import()