JavaScript ES7(2016) - ES13(2022) 新特性

76433橘子
281 阅读6分钟

JavaScript ES7(2016) - ES13(2022) 新特性

水一篇文章💅 💅 💅

首先的话，关于数据结构方面的话，我们是可以拓展一下： Set | WeakSet | Map | WeakMap | WeakRef 的基本使用的

同时还是可以了解一些强引用类型和弱引用类型的

JavaScript ES7 新增

新增了一种方法 includes

就是用来实现的是判断数组中是否具有某个元素，存在的话就返回 true ，否则就是返回 false

指数运算符 exponentiation

在 ES7 之前的话，我们只能通过 Math.pow 来是新啊求取指数的运算

但是现在的话我们是可以使用 ** 来进行指数运算了

console.log(2 ** 3)  // 8
console.log(2 ** 4)  // 16

JavaScript ES8 新增

Object.keys() 实现获取的是我们的对象的键

Object.values() 实现获取的是我们对象的值

Object.ectries() 实现获取的是一个数组，数组中存放的是可枚举属性的键值对数组

对字符串添加了两类方法，一个是用来实现的是在字符串的前面扩充数据的 padStrat，一个是在背后添加数据的 padEnd

Object.getOwnPropertyDescriptors 获取一个对象中描述符

Async Function async | await 新增： promise

const obj = {
 name: "76433",
 age: 18
}
​
console.log(Object.keys(obj))  // [ 'name', 'age' ]
console.log(Object.values(obj))  // [ '76433', 18 ]
console.log(Object.entries(obj))  // [ [ 'name', '76433' ], [ 'age', 18 ] ]
​
​
// 实现字符串的格式化
let str = "helloWorld"
str = str.padStart(15, "*")
console.log(str)
str = str.padEnd(20, "*")
console.log(str)

JavaScript ES9 新增

Async iterators 迭代器

Object spread operators 展开运算符

Promise finally

JavaScript ES10 新增

  • flat() 实现数组的深度的平铺，同时返回一个新数组，在实现平铺的时候是可以指定平铺的深度的

    • Infinity 可以实现的是我们的无限的递归，这个时候，我们就不用手动的指定递归平铺深度了

  • flatMap() 方法首先使用的是映射每一个元素，然后将结果进行 flat 操作进行平铺

    • 但是flat 的深度是为 1
const arr = [
    "hello world",
    "hello Front_end",
    "hello JavaScript"
]
​
// 普通的遍历实现
const newArray = []
for (const item of arr) {
    const splitItems = item.split(" ")
    for (const splitItem of splitItems) {
        newArray.push(splitItem)
    }
}
console.log(newArray)  // [ 'hello', 'world', 'hello', 'Front_end', 'hello', 'JavaScript' ]
​
​
// 使用映射和平铺实现
const newArr = arr.map(item => item.split(" "))
const newArray01 = newArr.flat(1)
console.log(newArray01)  // [ 'hello', 'world', 'hello', 'Front_end', 'hello', 'JavaScript' ]
​
​
const newArray02 = arr.flatMap(item => item.split(" "))
console.log(newArray02)  // [ 'hello', 'world', 'hello', 'Front_end', 'hello', 'JavaScript' ]

我们还是可以使用我们的一些其他方法的

trim 实现的是去除字符串的空格

trimStart | trimEnd 去除的是开头或者结尾的空格

Symbol description 符号描述

JavaScript ES11 新增

BigInt 数据类型的出现： 就是我们表示数字的时候直接在数字后面添加一个字母 n 即可

const num01 = Number.MAX_SAFE_INTEGER + 1
const num02 = Number.MAX_SAFE_INTEGER + 2
​
console.log(num01, num02)
​
// 开始定义 BigInt 数据类型
console.log(11n)

空值合并运算符： 就是我们实现传入函数的值为 null 或者 undefined 的时候，就可以使用 ??

function foo(param01, param02) {
    param01 = param01 ?? "default value"
    param02 = param02 ?? "default value"
    console.log(param01, param02)
}
foo()

optional chaining —— ?.

可选链的调用模式： 就是JS 新提供的一种选择执行的模式，其进行值的判断的话，是可以直接实现判断 null 和 undefined 的

如果不是 null 和 undefined ，那就直接下一步引用操作，否则就停止查找

const obj = {
    name: "76433",
    friend: {
        running: function() {
            console.log("running~~~")
        }
    }
}
​
// 直接调用，但是无法避免玩意没有running函数呐
obj.friend.running()  // running~~~
​
​
// 判断后在调用，但是代码冗余
if (obj.friend && obj.friend.running) {
    obj.friend.running()  // running~~~
}
​
​
// 可选链的用法 就是通过 ?. 来实现的
obj?.friend?.running()  // running~~~

globalThis

  • 在浏览器宿主环境中实现获取的全局对象是我们的 window
  • 在 nodejs 环境中获取的全局对象是 global
  • 但是后面为了统一这两个全局对象，可以直接使用 globalThis 来直接指代二者
  • Dynamic Import : ES Module 模块化
  • Promise.allSettled
  • Import mate : ES Moudle 模块化

JavaScript ES12 新增

  • FinalizationRegistry 对象可以让我们在对象被垃圾回收时请求的一个回调函数
let obj = {
    name: "76433",
    age: 18
}
​
let info = {
    ...obj,
    height: "172"
}
​
// 开始创建回调监听器
const registry = new FinalizationRegistry(value => {
    console.log(`对象被销毁了: ${value}`)
})
​
// 开始注册需要被监听的对象
registry.register(obj, "obj~~~")
registry.register(info, "info~~~")
​
obj = null
info = null

image-20241117234652232.png

  • WeakRef 弱引用

  • 我们对象的默认的引用赋值是我们的强引用，如果是我们的强引用的话，可能导致堆区内存不被回收

    • 现在一个强引用的代码:
    • let obj = {
    name: "76433"
}
​
let obj01 = obj
​
const registry = new FinalizationRegistry(() => {
    console.log("对象被回收了~~~")
})
​
registry.register(obj, "")
​
obj = null // 这个时候堆区中的对象并没有被回收
    • 首先我们的 JS 的垃圾回收机制是通过可达性来实现的的，如果是可达的，那就不能被回收，否则就会被回收
    • 所以说上面的代码中 obj01 = obj 实际上的话是一种强引用，我们只是把 obj 的指向指为了 null
    • 但是 obj01 还是指向的这一块内存，所以说就不能被回收

image-20241118000201570.png

为了解决上面的情况，这个时候就出现了我们的 弱引用了

弱引用实现的就是我们的只是获取得到了对象的的使用权，但是并没有真真的拥有

这个时候原本的对象被销毁了,那么堆区中的内容也随之消失

let obj = {
    name: "76433"
}
​
let obj01 = new WeakRef(obj)
​
const registry = new FinalizationRegistry(() => {
    console.log("对象被回收了~~~")
})
​
console.log(obj01.deref().name)  // 获取属性值
​
registry.register(obj, "")
​
obj = null // 这个时候堆区中的对象并没有被回收

image-20241118000738401.png

  • 逻辑赋值运算符 —— logical assignment operators

  • ||= 用于判断传入的内容是否为空

    • function foo(param) {
    param = param || "default value"
    // 等价于: param ||= "default value"
}

  • ??= 用于判断内容是否为 null 或者 undefined

    • function foo(param) {
    param = param ?? "default value"
    // 等价于: param ??= "default value"
}

replaceAll 就是实现的是将寻找到的字符串都实现替换

对应的是以前的 replace

let context = "hello world; hello front-end"
​
// 开始实现替换
const newContext01 = context.replace("hello", "")
console.log(newContext01)  //  world; hello front-end
​
const newContext02 = context.replaceAll("hello", "")
console.log(newContext02)  //  world;  front-end

JavaScript ES13 新增

method.at()

通过这种方式可以实现获取我们的列表或者对象中的元素对象

const arr = [1, 2, 3, 4, 5]
​
console.log(arr.at(-1))  // 5
console.log(arr.at(1))  // 2

Object.hasOwn(obj. propertyKey)

用来实现的替代以前的方法 hasOwnProperty() 方法

实现的是判断我们的一个对象本身具有某个属性没有

const obj = {
    name: "76433",
    age: 18,
​
    __proto__: {
        info: "水逆信封"
    }
}
​
console.log(obj.hasOwnProperty("info"))  // false
console.log(Object.hasOwn(obj, "age"))  // true

New menbers of class

这个就是我们的 class 中的新成员

使用 #属性名 就可以实现设置我们的私有成员，外部不可以访问

class Person {
    // 开始实现新的特性来实现设置我们的属性，这个属性值就是我们的类属性
    #height = "1.72"
    static total = "total"  // 设置类属性
    static #gender = "gender"  // 设置静态私有属性
​
    constructor(name, age) {
        // 静态属性设置
        this.name = name
        this.age = age
    }
​
    running() {}
​
    // 设置静态代码块，可以进行设置我们的最初的初始化的操作
    static {
        console.log("我只执行了一次哟")
    }
}
​
const per = new Person("76433", 18)
avatar
文章
阅读
粉丝