欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript高級(jí)?ES7-ES13?新特性詳解

 更新時(shí)間：2023年02月06日 14:40:47   作者：ximingx  
這篇文章主要介紹了JavaScript高級(jí)?ES7-ES13?新特性詳解,本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1. ES7

1. Array Includes

在ES7之前，如果我們想判斷一個(gè)數(shù)組中是否包含某個(gè)元素，需要通過 indexOf 獲取結(jié)果，并且判斷是否為 -1

在ES7中，我們可以通過includes來判斷一個(gè)數(shù)組中是否包含一個(gè)指定的元素，根據(jù)情況，如果包含則返回 true，否則返回false

var arr = [1, 23, 4, 4524, 5]
console.log(arr.includes(3)); //false
console.log(arr.includes(1)); // true

2. 指數(shù)exponentiation運(yùn)算符

在ES7之前，計(jì)算數(shù)字的乘方需要通過 Math.pow 方法來完成

在ES7中，增加了 ** 運(yùn)算符，可以對(duì)數(shù)字來計(jì)算乘方

console.log(3 ** 2); // 9	
console.log(Math.pow(3, 2)); // 9

2. ES8

1. Object values entries

通過 Object.entries 可以獲取到一個(gè)數(shù)組，數(shù)組中會(huì)存放可枚舉屬性的鍵值對(duì)數(shù)組

    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. 對(duì)對(duì)象操作
    const entries = Object.entries(obj)
    console.log(entries)
    for (const entry of entries) {
      const [key, value] = entry
      console.log(key, value)
    }

    // 3.2. 對(duì)數(shù)組/字符串操作(了解)
    console.log(Object.entries(["abc", "cba"]))
    console.log(Object.entries("Hello"))

2. String Padding

某些字符串我們需要對(duì)其進(jìn)行前后的填充，來實(shí)現(xiàn)某種格式化效果，ES8中增加了 padStart 和 padEnd 方法，分別是對(duì)字符串的首尾進(jìn)行填充的

    // padStart和padEnd
    // 1.應(yīng)用場景一: 對(duì)時(shí)間進(jìn)行格式化
    // const minute = "15".padStart(2, "0")
    // const second = "6".padStart(2, "0")

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

    // 2.應(yīng)用場景二: 對(duì)一些敏感數(shù)據(jù)格式化
    let cardNumber = "132666200001018899"
    const sliceNumber = cardNumber.slice(-4)
    cardNumber = sliceNumber.padStart(cardNumber.length, "*")
    const cardEl = document.querySelector(".card")
    cardEl.textContent = cardNumber

3. Trailing Commas

在ES8中，我們?cè)试S在函數(shù)定義和調(diào)用時(shí)多加一個(gè)逗號(hào)

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

    foo(10, 20, )

4. Object Descriptors

Object.getOwnPropertyDescriptors

5. async、await

3. ES9

1. Async iterators

2. Object spread operators

3. Promise finally

4. ES10

1. flat flatMap

flat() 方法會(huì)按照一個(gè)可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個(gè)新數(shù)組返回

flatMap是先進(jìn)行map操作，再做flat的操作, flatMap中的flat相當(dāng)于深度為1

    // 1.flat的使用: 
    // 將一個(gè)數(shù)組, 按照制定的深度遍歷, 將遍歷到的元素和子數(shù)組中的元素組成一個(gè)新的數(shù)組, 進(jìn)行返回
    // 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> 對(duì)數(shù)組中每一個(gè)元素應(yīng)用一次傳入的map對(duì)應(yīng)的函數(shù)
    const messages = [
      "Hello World aaaaa",
      "Hello ximingx"
    ]

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

    // 2.先進(jìn)行map, 再進(jìn)行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)

2. Object fromEntries

ES10提供了 Object.formEntries來完成 entries將其轉(zhuǎn)換成對(duì)象的操作

    // 1.對(duì)象
    // const obj = {
    //   name: "why",
    //   age: 18,
    //   height: 1.88
    // }

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

    // 2.應(yīng)用
    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)

3. trimStart trimEnd

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

4. Symbol description

5. Optional catch binding

5. ES11

1. BigInt

大于MAX_SAFE_INTEGER的數(shù)值，表示的可能是不正確的

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

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

ES11中，引入了新的數(shù)據(jù)類型BigInt，用于表示大的整數(shù)

BitInt的表示方法是在數(shù)值的后面加上n

2. Nullish Coalescing Operator

    let info = undefined
    // info = info || "默認(rèn)值"
    // console.log(info)

    // ??: 空值合并運(yùn)算符
    info = info ?? "默認(rèn)值"
    console.log(info)

3. Optional Chaining

可選鏈也是ES11中新增一個(gè)特性，主要作用是讓我們的代碼在進(jìn)行null和undefined判斷時(shí)更加清晰和簡潔

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

    // 1.直接調(diào)用: 非常危險(xiǎn)
    // obj.friend.running()

    // 2.if判斷: 麻煩/不夠簡潔
    // if (obj.friend && obj.friend.running) {
    //   obj.friend.running()
    // }

    // 3.可選鏈的用法: ?.
    obj?.friend?.running?.()

4. Global This

在ES11中對(duì)獲取全局對(duì)象進(jìn)行了統(tǒng)一的規(guī)范：globalThis

5. for…in標(biāo)準(zhǔn)化

在ES11之前，雖然很多瀏覽器支持for…in來遍歷對(duì)象類型，但是并沒有被ECMA標(biāo)準(zhǔn)化，在ES11中，對(duì)其進(jìn)行了標(biāo)準(zhǔn)化，for…in是用于遍歷對(duì)象的key的

6. Dynamic Import

7. Promise.allSettled

8. import meta

6. ES12

1. FinalizationRegistry

FinalizationRegistry 提供了這樣的一種方法：當(dāng)一個(gè)在注冊(cè)表中注冊(cè)的對(duì)象被回收時(shí)，請(qǐng)求在某個(gè)時(shí)間點(diǎn)上調(diào)用一個(gè)清理回調(diào)

你可以通過調(diào)用register方法，注冊(cè)任何你想要清理回調(diào)的對(duì)象，傳入該對(duì)象和所含的值

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

    const finalRegistry = new FinalizationRegistry((value) => {
      console.log("某一個(gè)對(duì)象被回收了:", value)
    })

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

    // obj = null
    info = null

2. WeakRefs

如果我們默認(rèn)將一個(gè)對(duì)象賦值給另外一個(gè)引用，那么這個(gè)引用是一個(gè)強(qiáng)引用

如果我們希望是一個(gè)弱引用的話，可以使用WeakRef

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

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

    finalRegistry.register(info, "info")

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

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

3. logical assignment operators

    // 賦值運(yùn)算符
    // const foo = "foo"
    let counter = 100
    counter = counter + 100
    counter += 50

    // 邏輯賦值運(yùn)算符
    function foo(message) {
      // 1.||邏輯賦值運(yùn)算符
      // message = message || "默認(rèn)值"
      // message ||= "默認(rèn)值"

      // 2.??邏輯賦值運(yùn)算符
      // message = message ?? "默認(rèn)值"
      message ??= "默認(rèn)值"

      console.log(message)
    }

    foo("abc")
    foo()

    // 3.&&邏輯賦值運(yùn)算符
    let obj = {
      name: "why",
      running: function() {
        console.log("running~")
      }
    }

    // 3.1.&&一般的應(yīng)用場景
    // obj && obj.running && obj.running()
    // obj = obj && obj.name
    obj &&= obj.name
    console.log(obj)

7. ES13

1. method .at()

    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)

2. Object.hasOwn(obj, propKey)

該方法用于判斷一個(gè)對(duì)象中是否有某個(gè)自己的屬性

    // const obj = {
    //   name: "why",
    //   age: 18,
    //   // 1.和hasOwnProperty的區(qū)別一: 防止對(duì)象中也有一個(gè)自己的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的區(qū)別二:
    const info = Object.create(null)
    info.name = "why"
    // console.log(info.hasOwnProperty("name"))
    console.log(Object.hasOwn(info, "name"))

3. New members of classes

在ES13中，新增了定義class類中成員字段（field）的其他方式

    class Person {
      // 1.實(shí)例屬性
      // 對(duì)象屬性: public 公共 -> public instance fields
      height = 1.88

      // 對(duì)象屬性: private 私有: 程序員之間的約定
      // _intro = "name is why"
      
      // ES13對(duì)象屬性: private 私有: 程序員之間的約定
      #intro = "name is why"


      // 2.類屬性(static)
      // 類屬性: public
      static totalCount = "70億"

      // 類屬性: private
      static #maleTotalCount = "20億"

      constructor(name, age) {
        // 對(duì)象中的屬性: 在constructor通過this設(shè)置
        this.name = name
        this.age = age
        this.address = "廣州市"
      }

      // 3.靜態(tài)代碼塊
      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)

到此這篇關(guān)于JavaScript高級(jí) ES7-ES13 新特性的文章就介紹到這了,更多相關(guān)js ES7-ES13 新特性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論