Array.prototype.flat() / flatMap()

  1. # Array.prototype.flat() / flatMap()
  3. flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
  5. flatMap()与 map() 方法和深度为1的 flat() 几乎相同.，不过它会首先使用映射函数映射每个元素，然后将结果压缩成一个新数组，这样效率会更高。
  7. 例子如下：
  9. var arr1 = [1, 2, 3, 4]
  11. arr1.map(x => [x * 2]) // [[2], [4], [6], [8]]
  13. arr1.flatMap(x => [x * 2]) // [2, 4, 6, 8]
  15. // 深度为1
  16. arr1.flatMap(x => [[x * 2]]) // [[2], [4], [6], [8]]
  17. flatMap()可以代替reduce() 与 concat()，例子如下：
  19. var arr = [1, 2, 3, 4]
  20. arr.flatMap(x => [x, x * 2]) // [1, 2, 2, 4, 3, 6, 4, 8]
  21. // 等价于
  22. arr.reduce((acc, x) => acc.concat([x, x * 2]), []) // [1, 2, 2, 4, 3, 6, 4, 8]
  23. 但这是非常低效的，在每次迭代中，它创建一个必须被垃圾收集的新临时数组，并且它将元素从当前的累加器数组复制到一个新的数组中，而不是将新的元素添加到现有的数组中。

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

  1. # String.prototype.trimStart() / trimLeft() / trimEnd() / trimRight()
  3. 在ES5中，我们可以通过trim()来去掉字符首尾的空格，但是却无法只去掉单边的，但是在ES10之后，我们可以实现这个功能。
  5. 如果我们要去掉开头的空格，可以使用trimStart()或者它的别名trimLeft()，
  7. 同样的，如果我们要去掉结尾的空格，我们可以使用trimEnd()或者它的别名trimRight()。
  9. 例子如下：
  11. const Str = '   Hello world!  '
  12. console.log(Str) // '   Hello world!  '
  13. console.log(Str.trimStart()) // 'Hello world!  '
  14. console.log(Str.trimLeft()) // 'Hello world!  '
  15. console.log(Str.trimEnd()) // '   Hello world!'
  16. console.log(Str.trimRight()) // '   Hello world!'
  17. 不过这里有一点要注意的是，trimStart()跟trimEnd()才是标准方法，trimLeft()跟trimRight()只是别名。
  19. 在某些引擎里（例如Chrome），有以下的等式：
  22. String.prototype.trimLeft.name === "trimStart"
  24. String.prototype.trimRight.name === "trimEnd"

Object.fromEntries()

  1. # Object.fromEntries()
  3. Object.fromEntries() 方法把键值对列表转换为一个对象，它是Object.entries()的反函数。
  5. 例子如下：
  8. const entries = new Map([
  9.   ['foo', 'bar'],
  10.   ['baz', 42]
  11. ])
  13. const obj = Object.fromEntries(entries)
  15. console.log(obj) // Object { foo: "bar", baz: 42 }

Symbol.prototype.description

  1. # Symbol.prototype.description
  3. description 是一个只读属性，它会返回Symbol对象的可选描述的字符串。与 Symbol.prototype.toString() 不同的是它不会包含Symbol()的字符串。例子如下：
  6. Symbol('desc').toString();   // "Symbol(desc)"
  7. Symbol('desc').description;  // "desc"
  8. Symbol('').description;      // ""
  9. Symbol().description;        // undefined
  11. // 具名 symbols
  12. Symbol.iterator.toString();  // "Symbol(Symbol.iterator)"
  13. Symbol.iterator.description; // "Symbol.iterator"
  15. //全局 symbols
  16. Symbol.for('foo').toString();  // "Symbol(foo)"
  17. Symbol.for('foo').description; // "foo"

String.prototype.matchAll

  1. # String.prototype.matchAll
  3. matchAll() 方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。并且返回一个不可重启的迭代器。例子如下：
  5. var regexp = /t(e)(st(\d?))/g
  6. var str = 'test1test2'
  8. str.match(regexp) // ['test1', 'test2']
  9. str.matchAll(regexp) // RegExpStringIterator {}
  10. [...str.matchAll(regexp)] // [['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', l

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

  1. # Function.prototype.toString() 返回注释与空格
  3. 在以往的版本中，Function.prototype.toString()得到的字符串是去掉空白符号的，但是从ES10开始会保留这些空格，如果是原生函数则返回你控制台看到的效果，例子如下：
  5. function sum(a, b) {
  6.       return a + b;
  7. }
  9. console.log(sum.toString())
  10. // "function sum(a, b) {
  11. //         return a + b;
  12. //  }"
  14. console.log(Math.abs.toString()) // "function abs() { [native code] }"

try-catch

  1. # 在以往的版本中，try-catch里catch后面必须带异常参数，例如：
  3. // ES10之前
  4. try {
  5. // tryCode
  6. } catch (err) {
  7. // catchCode
  8. }
  9. 但是在ES10之后，这个参数却不是必须的，如果用不到，我们可以不用传，例如：
  12. try {
  13.       console.log('Foobar')
  14. } catch {
  15.       console.error('Bar')
  16. }

BigInt

  1. # BigInt
  3. BigInt 是一种内置对象，它提供了一种方法来表示大于 253 - 1 的整数。这原本是 Javascript中可以用 Number 表示的最大数字。BigInt 可以表示任意大的整数。
  5. 可以用在一个整数字面量后面加 n 的方式定义一个 BigInt ，如：10n，或者调用函数BigInt()。
  7. 在以往的版本中，我们有以下的弊端：
  9. // 大于2的53次方的整数，无法保持精度
  10. 2 ** 53 === (2 ** 53 + 1)
  11. // 超过2的1024次方的数值，无法表示
  12. 2 ** 1024 // Infinity
  13. 但是在ES10引入BigInt之后，这个问题便得到了解决。
  15. 以下操作符可以和 BigInt 一起使用： +、*、-、**、% 。除 >>> （无符号右移）之外的位操作也可以支持。因为 BigInt 都是有符号的， >>> （无符号右移）不能用于 BigInt。BigInt 不支持单目 (+) 运算符。
  17. / 操作符对于整数的运算也没问题。可是因为这些变量是 BigInt 而不是 BigDecimal ，该操作符结果会向零取整，也就是说不会返回小数部分。
  19. BigInt 和 Number不是严格相等的，但是宽松相等的。
  21. 所以在BigInt出来以后，JS的原始类型便增加到了7个，如下：
  23. •Boolean•Null•Undefined•Number•String•Symbol (ES6)•BigInt (ES10)

globalThis

  1. # globalThis
  3. globalThis属性包含类似于全局对象 this值。所以在全局环境下，我们有：
  5. globalThis === this // true

import()

  1. # import()
  3. 静态的import 语句用于导入由另一个模块导出的绑定。无论是否声明了 严格模式，导入的模块都运行在严格模式下。在浏览器中，import 语句只能在声明了 type="module" 的 script 的标签中使用。
  5. 但是在ES10之后，我们有动态 import()，它不需要依赖 type="module" 的script标签。
  7. 所以我们有以下例子：
  10. const main = document.querySelector("main")
  11. for (const link of document.querySelectorAll("nav > a")) {
  12.       link.addEventListener("click", e => {
  13.             e.preventDefault()
  15.             import('/modules/my-module.js')
  16.               .then(module => {
  17.                     module.loadPageInto(main);
  18.               })
  19.               .catch(err => {
  20.                     main.textContent = err.message;
  21.               })
  22.       })
  23. }

私有元素与方法

  1. # 在ES10之前，如果我们要实现一个简单的计数器组件，我们可能会这么写：
  3. // web component 写法
  4. class Counter extends HTMLElement {
  5.       get x() { 
  6.               return this.xValue
  7.       }
  8.       set x(value) {
  9.               this.xValue = value
  10.               window.requestAnimationFrame(this.render.bind(this))
  11.       }
  13.       clicked() {
  14.             this.x++
  15.       }
  17.       constructor() {
  18.             super()
  19.             this.onclick = this.clicked.bind(this)
  20.             this.xValue = 0
  21.       }
  23.       connectedCallback() { 
  24.               this.render()
  25.       }
  27.       render() {
  28.             this.textContent = this.x.toString()
  29.       }
  30. }
  31. window.customElements.define('num-counter', Counter)
  32. 但是在ES10之后我们可以使用私有变量进行组件封装，如下：
  35. class Counter extends HTMLElement {
  36.       #xValue = 0
  38.       get #x() { 
  39.           return #xValue
  40.       }
  41.       set #x(value) {
  42.             this.#xValue = value
  43.             window.requestAnimationFrame(this.#render.bind(this))
  44.       }
  46.       #clicked() {
  47.             this.#x++
  48.       }
  50.       constructor() {
  51.             super();
  52.             this.onclick = this.#clicked.bind(this)
  53.       }
  55.       connectedCallback() { 
  56.               this.#render()
  57.       }
  59.       #render() {
  60.             this.textContent = this.#x.toString()
  61.       }
  62. }
  63. window.customElements.define('num-counter', Counter)