ES7～ES13の新機能(2)

1 ES7の新機能の分析

2 ES8の新機能の分析

3 ES10 の新機能の分析

4 ES11 の新機能の分析

5 ES12 の新機能の分析

6 ES13 の新機能の分析

ES8 オブジェクト関連のプロパティ --- エントリの使用法

const obj = {
      name: "why",
      age: 18,
      height: 1.88,
      address: "广州市"
    }

    // 1.获取所有的key
    const keys = Object.keys(obj)
    console.log(keys)

    // 2.ES8 Object.values
    const values = Object.values(obj)
    console.log(values)

    // 3.ES8 Object.entries
    // 3.1. 对对象操作
    const entries = Object.entries(obj)
    console.log(entries)
    for (const entry of entries) {
      const [key, value] = entry
      console.log(key, value)
    }

    // 3.2. 对数组/字符串操作(了解)
    console.log(Object.entries(["abc", "cba"]))
    console.log(Object.entries("Hello"))

ES8-文字列充填方法---padStartとpadEndの使用法

単一の値の前に 0 を追加する場合、または文字列をいくつかの記号で置き換える場合に使用します。

// padStart和padEnd
    // 1.应用场景一: 对时间进行格式化
    // const minute = "15".padStart(2, "0")
    // const second = "6".padStart(2, "0")

    // console.log(`${minute}:${second}`)

    // 2.应用场景二: 对一些敏感数据格式化
    let cardNumber = "132666200001018899"
    const sliceNumber = cardNumber.slice(-4)
    cardNumber = sliceNumber.padStart(cardNumber.length, "*")
    const cardEl = document.querySelector(".card")
    cardEl.textContent = cardNumber

ES8 - 末尾のカンマの追加

 function foo(num1, num2, ) {
      console.log(num1, num2)
    }

    foo(10, 20, )

ES10-フラットとフラットマップ

配列を平坦化するメソッドでは、文字列パラメータを平坦化できます。

 // 1.flat的使用: 
    // 将一个数组, 按照制定的深度遍历, 将遍历到的元素和子数组中的元素组成一个新的数组, 进行返回
    // const nums = [10, 20, [111, 222], [333, 444], [[123, 321], [231, 312]]]
    // const newNums1 = nums.flat(1)
    // console.log(newNums1)
    // const newNums2 = nums.flat(2)
    // console.log(newNums2)

    // 2.flatMap的使用:
    // 1> 对数组中每一个元素应用一次传入的map对应的函数
    const messages = [
      "Hello World aaaaa",
      "Hello Coderwhy",
      "你好啊 李银河"
    ]

    // 1.for循环的方式:
    // const newInfos = []
    // for (const item of messages) {
    //   const infos = item.split(" ")
    //   for (const info of infos) {
    //     newInfos.push(info)
    //   }
    // }
    // console.log(newInfos)

    // 2.先进行map, 再进行flat操作
    // const newMessages = messages.map(item => item.split(" "))
    // const finalMessages = newMessages.flat(1)
    // console.log(finalMessages)

    // 3.flatMap
    const finalMessages = messages.flatMap(item => item.split(" "))
    console.log(finalMessages)

ES10-Object.fromEntries

 // 1.对象
    // const obj = {
    //   name: "why",
    //   age: 18,
    //   height: 1.88
    // }

    // const entries = Object.entries(obj)
    // const info = Object.fromEntries(entries)
    // console.log(info)

    // 2.应用
    const searchString = "?name=why&age=18&height=1.88"
    const params = new URLSearchParams(searchString)
    console.log(params.get("name"))
    console.log(params.get("age"))
    console.log(params.entries())

    // for (const item of params.entries()) {
    //   console.log(item)
    // }

    const paramObj = Object.fromEntries(params)
    console.log(paramObj)

ES10-トリム開始-トリム終了

文字列の前後のスペースを削除する

  const message = "   Hello World    "
    console.log(message.trim())
    console.log(message.trimStart())
    console.log(message.trimEnd())

ES11-BigInt は大きな数を表します

nを付けないと9007199254740992より大きい数値は表示できません。

 console.log(Number.MAX_SAFE_INTEGER)
    const num1 = 9007199254740992n
    const num2 = 9007199254740993n
    console.log(num1, num2)

ES11 - null 値合体演算子

  let info = undefined
    // info = info || "默认值"
    // console.log(info)

    // ??: 空值合并运算符
    info = info ?? "默认值"
    console.log(info)

ES11 - オプションのチェーン使用プロセス

オプションのチェーンでは、最初に次のコードが実行されているかどうかを判断できます。jsのセキュリティを強化しました。

  const obj = {
      name: "why",
      friend: {
        name: "kobe",
        // running: function() {
        //   console.log("running~")
        // }
      }
    }

    // 1.直接调用: 非常危险
    // obj.friend.running()

    // 2.if判断: 麻烦/不够简洁
    // if (obj.friend && obj.friend.running) {
    //   obj.friend.running()
    // }

    // 3.可选链的用法: ?.
    obj?.friend?.running?.()

FinalizationRegistryla ガベージ コレクション チェック

このメソッドを使用すると、どのデータがガベージ コレクションされたかを確認できます。

  let obj = { name: "why", age: 18 }
    let info = { name: "kobe", age: 30 }

    const finalRegistry = new FinalizationRegistry((value) => {
      console.log("某一个对象被回收了:", value)
    })

    finalRegistry.register(obj, "why")
    finalRegistry.register(info, "kobe")

    // obj = null
    info = null

ES12-WeakRefs 弱参照

ガベージ コレクションが元のパラメーターと参照によって割り当てられた変数をリサイクルできるように、強参照割り当てのパラメーターを弱参照に変更します。具体的には、info パラメータは obj および obj2 への参照です。info=null の場合、info、obj、および obj2 がリサイクルされることが期待されます (強い参照はガベージ コレクションされないため、info=null の場合、obj=info、オブジェクトパラメータはリサイクルされません)。弱参照では、info=null の場合、obj と obj2 の両方がリサイクルされます。

  let info = { name: "why", age: 18 }
    let obj = new WeakRef(info)
    let obj2 = new WeakRef(info)

    const finalRegistry = new FinalizationRegistry(() => {
      console.log("对象被回收~")
    })

    finalRegistry.register(info, "info")

    setTimeout(() => {
      info = null
    }, 2000)

    setTimeout(() => {
      console.log(obj.deref().name, obj.deref().age)
    }, 8000)

ES12 - 論理代入演算子

通常の +、-、/、* と同様の略語も同じ意味を表します。

 // 赋值运算符
    // const foo = "foo"
    let counter = 100
    counter = counter + 100
    counter += 50

    // 逻辑赋值运算符
    function foo(message) {
      // 1.||逻辑赋值运算符
      // message = message || "默认值"
      // message ||= "默认值"

      // 2.??逻辑赋值运算符
      // message = message ?? "默认值"
      message ??= "默认值"

      console.log(message)
    }

    foo("abc")
    foo()

    // 3.&&逻辑赋值运算符
    let obj = {
      name: "why",
      running: function() {
        console.log("running~")
      }
    }

    // 3.1.&&一般的应用场景
    // obj && obj.running && obj.running()
    // obj = obj && obj.name
    obj &&= obj.name
    console.log(obj)

ES12-文字列をすべて置換

replace と比較して、replaceall は文字列内のすべての文字を置き換えることができます。

   const message = "my name is why, why age is 18"
    const newMessage = message.replace("why", "kobe")
    const newMessage2 = message.replaceAll("why", "kobe")
    console.log(newMessage)
    console.log(newMessage2)

ES13-オブジェクト プロパティ hasOwn

hasOwn は hasOwnproperty と同じ機能を持ち、オブジェクトのパラメータからこのパラメータを検索しますが、プロトタイプ上にある場合は見つからず false を返します。hasOwn は、多くのバグと hasOwnproperty の上書きに関するいくつかの問題、および js を通じてオブジェクト型変数を作成するときに hasOwnproperty が null の場合に呼び出すことができない問題を解決しました。

  // const obj = {
    //   name: "why",
    //   age: 18,
    //   // 1.和hasOwnProperty的区别一: 防止对象中也有一个自己的hasOwnProperty方法
    //   hasOwnProperty: function() {
    //     return "abc"
    //   },
    //   __proto__: {
    //     address: "广州市"
    //   }
    // }

    // console.log(obj.name, obj.age)
    // console.log(obj.address)

    // console.log(obj.hasOwnProperty("name"))
    // console.log(obj.hasOwnProperty("address"))

    // console.log(Object.hasOwn(obj, "name"))
    // console.log(Object.hasOwn(obj, "address"))


    // 2.和hasOwnProperty的区别二:
    const info = Object.create(null)
    info.name = "why"
    // console.log(info.hasOwnProperty("name"))
    console.log(Object.hasOwn(info, "name"))

ES13クラスの新メンバー

1

  class Person {
      // 1.实例属性
      // 对象属性: public 公共 -> public instance fields
      height = 1.88

      // 对象属性: private 私有: 程序员之间的约定
      // _intro = "name is why"
      
      // ES13对象属性: private 私有: 程序员之间的约定
      #intro = "name is why"


      // 2.类属性(static)
      // 类属性: public
      static totalCount = "70亿"

      // 类属性: private
      static #maleTotalCount = "20亿"

      constructor(name, age) {
        // 对象中的属性: 在constructor通过this设置
        this.name = name
        this.age = age
        this.address = "广州市"
      }

      // 3.静态代码块
      static {
        console.log("Hello World")
        console.log("Hello Person")
      }
    }

    const p = new Person("why", 18)
    console.log(p)
    // console.log(p.name, p.age, p.height, p.address, p.#intro)

    // console.log(Person.#maleTotalCount)