JavaScript高级 ES7-ES13 新特性详解

目录1.ES71.ArrayIncludes2.指数exponentiation运算符2.ES81.Objectvaluesentries2.StringPadding3.Tra...

目录

1. ES7
1. Array Includes
2. 指数exponentiation运算符
2. ES8
1. Object values entries
2. String Padding
3. Trailing Commas
4. Object Descriptors
5. async、await
3. ES9
4. ES10
1. flat flatMap
2. Object fromEntries
3. trimStart trimEnd
4. Symbol description
5. Optional catch binding
5. ES11
1. BigInt
2. Nullish Coalescing Operator
3. Optional Chaining
4. Global This
5. for…in标准化
6. ES12
1. FinalizationRegistry
2. WeakRefs
3. logical assignment operators
7. ES13
1. method .at()
2. Object.hasOwn(obj, propKey)
3. New members of classes

1. ES7

1. Array Includes

在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为 -1

在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false

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

2. 指数exponentiation运算符

在ES7之前，计算数字的乘方需要通过 Math.pow 方法来完成

在ES7中，增加了 ** 运算符，可以对数字来计算乘方

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

2. ES8

1. Object values entries

通过 Object.entries 可以获取到一个数组，数组中会存放可枚举属性的键值对数组

    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"))

2. String Padding

某些字符串我们需要对其进行前后的填充，来实现某种格式化效果，ES8中增加了 padStart 和 padEnd 方法，分别是对字符串的首尾进行填充的

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

3. Trailing Commas

在ES8中，我们允许在函数定义和调用时多加一个逗号

    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() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

flatMap是先进行map操作，再做flat的操作, flatMap中的flat相当于深度为1

    // 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 ximingx"
    ]

    // 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)

2. Object fromEntries

ES10提供了 Object.formEntries来完成 entries将其转换成对象的操作

    // 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)

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的数值，表示的可能是不正确的

    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中，引入了新的数据类型BigInt，用于表示大的整数

BitInt的表示方法是在数值的后面加上n

2. Nullish Coalescing Operator

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

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

3. Optional Chaining

可选链也是ES11中新增一个特性，主要作用是让我们的代码在进行null和undefined判断时更加清晰和简洁

    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?.()

4. Global This

在ES11中对获取全局对象进行了统一的规范：globalThis

5. for…in标准化

在ES11之前，虽然很多浏览器支持for…in来遍历对象类型，但是并没有被ECMA标准化，在ES11中，对其进行了标准化，for…in是用于遍历对象的key的

6. Dynamic Import

7. Promise.allSettled

8. import meta

6. ES12

1. FinalizationRegistry

FinalizationRegistry 提供了这www.cppcns.com样的一种方法：当一个在注册表中注册的对象被回收时，请求在某个时间点上调用一个清理回调

你可以通过调用register方法，注册任何你想要清理回调的对象，传入该对象和所含的值

    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

2. WeakRefs

如果我们默认将一个对象赋值给另外一个引用，那么这个引用是一个强引用

如果我们希望是一个弱引用的话，可以使用WeakRef

    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)

3. logical assignment operators

    // 赋值运算符
    // 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)

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)

该方法用于判断一个对象中是否有某个自己的属性

    // 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"))

3. New members of classes

在ES13中，新增了定义class类中成员字段（field）的其他方式

    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)

到此这篇关于JavaScript高级 ES7-ES13 新特性的文章就介绍到这了,更多相关js ES7-ES13 新特性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！