1.Array.flat() & Array.flatMap()

? Array.flat() 方法創建一個新數組，所有子數組元素都以遞歸方式合并到該數組中，直至達到指定深度,Array.flatMap() 相當于數組map后在調用 flat()。

    //flat()
    const array = [
      [1, 2, 3],
      [4, 5, 6],
      [7, 8, 9]
    ];
    const array2 = [
      [1, 2, 3],
      [
        [4, 5, 6],
        [7, 8, 9]
      ]
    ];
    const simpleArray = array.flat() // [1, 2, 3, 4, 5, 6,7,8,9]
    const simpleArray2 = array2.flat() //[1, 2, 3, Array(3), Array(3)]
    const simpleArray3 = simpleArray2.flat()
    console.log(simpleArray3) // [1, 2, 3, 4, 5, 6,7,8,9]

    const number = [1, 2, 3]
    const Num = ['one', 'two', 'three']

    // flatMap()
    const map = number.map((num, index) => [num, Num[index]])
    console.log(map)//[Array(2), Array(2), Array(2)]
    console.log(map.flat())//[1, "one", 2, "two", 3, "three"]
    const flatMap = number.flatMap((num, index) => [num, Num[index]])
    console.log(flatMap)//[1, "one", 2, "two", 3, "three"]

2.Object.fromEntries()

? 把鍵值對數組為元素的二維數組轉換為一個對象。

  const object = {
      3: 'wade',
      6: 'james',
      24: 'kobe'
    }
    
    const entries = Object.entries(object)
    console.log(entries)
    //   [["3", "wade"],
    //   ["6", "james"],
    //   ["24", "kobe"]]

    const fromEntries = Object.fromEntries(entries)
    console.log(fromEntries)
    // const object = {
    //   3: 'wade',
    //   6: 'james',
    //   24: 'kobe'
    // }

3.matchAll()

? matchAll() 方法返回所有與正則表達式匹配字符串的結果的迭代器，包括捕獲組。

  let iterator = "hello".matchAll(/l/);
    for (const match of iterator)
      console.log(match);


    const string = 'black*raven lime*parrot white*seagull';
    const regex = /(?<color>.*?)\*(?<bird>[a-z0-9]+)/;
    for (const match of string.matchAll(regex)) {
      let value = match[0];
      let index = match.index;
      let input = match.input;
      console.log(`${value} at ${index} with '${input}'`);
      console.log(match.groups.color);
      console.log(match.groups.bird);
    }

4.String.trimStart() & String.trimEnd()

? 有兩種新的String方法可從字符串中刪除空格

    // trimStart() 方法從字符串的開頭刪除空格。
    //   trimEnd() 方法從字符串末尾刪除空格。
    const str = '  123   '
    console.log(str.trimEnd()) //  123
    console.log(str.trimStart()) //123   

5.Symbol.Description

? 當創建symbol時，可以提供一個字符串作為描述。在ES10中，有一個獲取描述的訪問器

    const symbol = Symbol("wade")
    console.log(symbol.description)//wade

6.可選的 Catch 參數變量

? 使用try / catch不用創建未使用的error變量綁定。

  try {
    foo()
  }catch{
    console.log("error") 
  } 

7.穩定的 Array.prototype.sort()

? 穩定的排序算法是，當兩個具有相同鍵的對象在排序輸出中出現的順序，與未排序輸入中出現的順序相同。

  const obj = [{
        name: 'james',
        num: '6'
      },
      {
        name: 'james',
        num: '23'
      },
      {
        name: 'jordan',
        num: '23'
      },
      {
        name: 'wade',
        num: '3'
      }
    ]

    const sortCriteria = (obj1, obj2) => obj1.num - obj2.num

    const sorted = obj.sort(sortCriteria)

    console.log(sorted)
    // {name: "wade", num: "3"}
    // {name: "james", num: "6"}
    // {name: "james", num: "23"}
    // {name: "jordan", num: "23"}

    const obj1 = [{
        name: 'james',
        num: '6'
      },
      {
        name: 'jordan',
        num: '23'
      },
      {
        name: 'james',
        num: '23'
      },
      {
        name: 'wade',
        num: '3'
      }
    ]

    const sortCriteria1 = (obj1, obj2) => obj1.num - obj2.num

    const sorted1 = obj1.sort(sortCriteria1)

    console.log(sorted1)
    // {name: "wade", num: "3"}
    // {name: "james", num: "6"}
    // {name: "jordan", num: "23"}
    // {name: "james", num: "23"}

8 新版 Function.toString()

? 當在函數上調用toString時，它將返回該函數的字符串表示形式。

   this.player = []

    function MvpPlayer(player) {
      this.player = [...this.player, player]
    }

    console.log(MvpPlayer.toString())
    // function MvpPlayer(player) {
    //  this.player = [...this.player, player]
    // }

    console.log( Number.parseInt.toString())
    //function parseInt() { [native code] }

9 BigInt — 任意精度的整數

? BigInt是第7個原始類型，它是一個任意精度的整數。而不僅僅是在9007199254740992處的最大值。

  const MAX = Number.MAX_SAFE_INTEGER
    console.log(MAX + 1) //9007199254740992
    console.log(MAX + 2) //9007199254740992

    // bigInt
    const large = 90071992547409921n;
    const integer = BigInt(9007199254740991)
    const same = BigInt('9007199254740991')

    console.log(same)
    console.log(integer === same) //true
    console.log(typeof large) //bigInt 

10 動態引入

動態import()返回所請求模塊的Promise。使用async/await 將導入的模塊分配給變量。

const module1 = './modA.js'
    import(module1).then((module) => {
      module.sayHello()
    })

    (async function () {
      const module2 = './modB.js'
      const module = await import(module2)
      module.sayHello()
    })()

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

11.標準 globalThis 對象

? globalThis對象,從現在開始，該對象用于在任何平臺上訪問全局作用域:

    console.log(globalThis.Array(1, 2, 3))
    console.log(globalThis.v = {
      flag: true
    })

12.ES10 Class: private, static & public 成員變量，函數

? 個人認為這個特性沒啥用反而降低代碼可讀性而且代碼數量也沒怎么少。參考代碼示例：https://www.freecodecamp.org/news/the-complete-guide-to-es10-features-5fd0feb9513a/

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 */
    }
}