es10 新特性學習

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 */
    }
}
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 就目前來講,我不得不承認這件事,就是我對蘇東坡這位千古偶像的了解全部來自語文書和常識。 常識是:肥而不膩,色澤誘人...
    拾書叁年閱讀 353評論 1 1
  • 今早6:25叫兒子起床,我又睡了。兒子大概是7:10分走的,可憐這小子早點又沒忙上吃。感賞爸爸煮了兒子早點,又幫他...
    云慶親子教育閱讀 143評論 0 0
  • 聞如是。一時佛在舍衛國祇樹給孤獨園。大目犍連始得六通,欲度父母,報乳哺之恩。即以道眼觀視世間,見其亡母生餓鬼中,不...
    布衣秀士閱讀 5,391評論 0 0
  • A天天肝…頭發都少了一根 B我也是啊…任務好難( ?? ﹏ ?? ) A慢慢肝吧,式姐的卡池真的毒,出了一堆禮裝 ...
    子凜閱讀 147評論 5 1
  • 有些松懈,而窗外寒風凜冽,心里煩。。。。。。 真奇怪哦,記憶總是無法阻止住我們心的追逐,你知道嗎?他與我真的只能成...
    大白糖寶閱讀 450評論 2 26