ES6-ES11新語法之ES11

類的私有屬性

    // # 聲明私有屬性，私有屬性只能出現在類里面，不能出現在類外面
    class Person {
      name // 公有屬性
      #age // 私有屬性
      #weight
      constructor(name, age, weight) {
        this.name = name
        this.#age = age
        this.#weight = weight
      }
      intro() {
        console.log(this.name)
        console.log(this.#age)
        console.log(this.#weight)
      }
    }

    const girl = new Person('小紅', 20, '45kg')

    console.log(girl) // Person {name: "小紅", #age: 20, #weight: "45kg"}
    console.log(girl.name) // 小紅
    // console.log(girl.#age) // Uncaught SyntaxError: Private field '#age' must be declared in an enclosing class

    girl.intro() // 小紅 20 45kg

Promise.allSettled()

　　如果想要得到每個異步任務的運行結果，用allSettled()

　　如果要求每個異步任務都成功才能繼續往下執行，用all()

    const p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('商品數據-1')
      }, 500);
    })

    const p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('商品數據-2')
        // reject('失敗了') // 這里的狀態只控制p2的狀態，不影響 allSettled() 的狀態
      }, 500);
    })

    // Promise.allSettled() 接收promise組成的數組，返回成功的promise對象，得到每個promise的status
    const result = Promise.allSettled([p1, p2])
    console.log(result) // [[PromiseState]]: "fulfilled" [[PromiseResult]]: [{status: "fulfilled", value: "商品數據-1"}, {status: "fulfilled", value: "商品數據-2"}]

    // 有一個失敗就返回失敗，都成功才會返回成功，不返回每個promise的status因為都是fulfilled
    const res = Promise.all([p1, p2])
    console.log(res) //  // [[PromiseState]]: "fulfilled" [[PromiseResult]]: ["商品數據-1", "商品數據-2"]

matchAll()

　　適用於做頁面內容提取，方便做爬蟲類項目

    // matchAll() 獲取正則批量匹配的結果
    let str = `
      <ul>
        <li>
          <a>肖生克的救贖</a>
          <p>2020-01-01</p>
        </li>
        <li>
          <a>阿甘正傳</a>
          <p>2021-01-01</p>
        </li>
      </ul>
    `
    const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg
    const result = str.matchAll(reg)
    console.log(result) // 返回結果是一個可迭代對象 具有next()

    // 1、使用for...of遍歷
    // for (let item of result) {
    //   console.log(item)
    // }

    // 2、使用擴展運算符展開
    const arr = [...result]
    console.log(arr)

可選鏈操作符： ?.

    // 接收對象類型的參數
    function main(config) {
      // const dbHost = config && config.db && config.db.host // 原來的做法，寫法比較麻煩
      const dbHost = config?.db?.host // 如果config為true，就去判斷db；如果db為true，就去判斷host
      console.log(dbHost)
    }

    main({
      db: {
        host: '1920.168.1.100',
        username: 'root'
      }
    })

動態 import 加載

　　定義 add.js：

    export function add(a, b) {
      return a + b
    }

　　在入口文件中導入：

    import { add } from './add.js' // 靜態導入，不管用不用，先導入進來，相對於動態導入效率較低
    console.log(add(3, 4)) // 靜態引入時調用 add.js 中的 add()

    // import() 方法動態導入，返回結果是一個promise，成功的值是所導入的模塊
    import('./add.js').then((module) => {
      console.log(module.add(3, 5))
    })

BigInt：進行大整數運算

    // 聲明BigInt：1、在數字后加上 n 2、用 BigInt() 將數字轉為大整型
    console.log(100n, typeof 100n) // 100n bigint
    console.log(BigInt(100), typeof BigInt(100)) // 100n bigint

    // BigInt和Number的區別
    console.log(Object.prototype.toString.call(100)) // [object Number]
    console.log(Object.prototype.toString.call(100n)) // [object BigInt]
    console.log(100 == 100n) // true
    console.log(100 === BigInt(100)) // false

    // 不能對小數進行大整數轉換
    console.log(1n)
    // console.log(1.3n) // 報錯

    // 運算結果帶小數會被自動取整
    console.log(4n / 2n) // 2n
    console.log(5n / 2n) // 2n

    // 一個正整數后面加上n就轉換成了大整型，在數組排序中認為4n大於4，但是在邏輯上4n==4
    let arr = [4, 4n, 2, 2n, -10, -10n, -1, -1n, 0, 0n]
    console.log(fnSort(arr)) // [-10, -10n, -1, -1n, 0, 0n, 2, 2n, 4, 4n]

    // BigInt和String的比較
    console.log(2n) // 2n
    console.log(2n + '') // '2'

    // 使用場景：進行大數字的運算，運算完了再使用Number()轉為數字
    let max = Number.MAX_SAFE_INTEGER // js中最大安全數值
    console.log(max) // 9007199254740991
    console.log(max.toString().length)
    console.log(max + 1) // 9007199254740992
    console.log(max + 2) // 9007199254740992 和 + 1 沒有區別

    console.log(BigInt(max)) // 9007199254740991n
    console.log(BigInt(max) + 1n) // 9007199254740992n
    console.log(BigInt(max) + 2n) // 9007199254740993n

    // 冒泡排序
    function fnSort(arr) {
      for (var i = 0; i < arr.length - 1; i++) {
        for (var j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
          }
        }
      }
      return arr;
    }

globalThis：指向全局對象

　　瀏覽器下指向window

    console.log(globalThis) // Window
    console.log(globalThis === window) // true

　　nodejs（12+）下指向global

　　

 

 

 

 

 

 

 

 

x