js版本之ES12(2021)、ES13(2022)新特性(九)

目录

ES12(2021)特性

replaceAll() 

Promise.any 

WeakRef

WeakRef 的使用场景

逻辑运算符和赋值表达式 、数字分隔符

ES13(2022)新特性 

class的扩展

await在顶层使用

Object.hasOwn()

Array.prototype.at() 

d修饰符 


ES12(2021)特性

replaceAll() 

replaceAll() 方法用于将字符串中所有匹配的子字符串替换为指定的替换字符串。

语法str.replaceAll(searchValue, replaceValue)

参数】searchValue:要被替换的子字符串或正则表达式。replaceValue:用于替换的字符串。

let str = "Hello, world! Hello, universe!";
let newStr = str.replaceAll("Hello", "Hi");
console.log(newStr); // 输出:Hi, world! Hi, universe!

Promise.any 

Promise.any() 接收一个Promise可迭代对象,只要其中的一个 promise 成功,就返回那个已经成功的 promise 。如果可迭代对象中没有一个 promise 成功(即所有的 promises 都失败/拒绝),就返回一个失败的 promise。

语法Promise.any(iterable)

参数】iterable:一个可迭代对象(如数组),其中包含多个 Promise。

返回值

  • 返回一个新的 Promise。
  • 如果至少有一个 Promise 成功解决(fulfilled),则返回该 Promise 的解决值。
  • 如果所有的 Promise 都被拒绝(rejected),则返回一个拒绝的 Promise,并带有一个 AggregateError,其中包含所有被拒绝的错误。

在这个例子中,promise2 是第一个成功解决的 Promise,所以 Promise.any() 返回 promise2 的解决值 “Success 2”。 

const promise1 = Promise.reject('Error 1');
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'Success 2'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 200, 'Success 3'));Promise.any([promise1, promise2, promise3]).then((value) => {console.log(value); // "Success 2"
}).catch((error) => {console.log(error);
});

如果所有的 Promise 都被拒绝,Promise.any() 将返回一个包含所有拒绝原因的AggregateError。 

const promise1 = Promise.reject('Error 1');
const promise2 = Promise.reject('Error 2');
const promise3 = Promise.reject('Error 3');Promise.any([promise1, promise2, promise3]).then((value) => {console.log(value);
}).catch((error) => {console.log(error); // AggregateError: All promises were rejected
});

使用场景简要说明

从最快的服务器检索资源、容错处理、超时与重试机制、并行任务处理

WeakRef

WeakRef是 ES12 引入的一个新特性,用于创建对对象的弱引用。弱引用不会阻止垃圾回收器回收对象,即使该对象仍然被弱引用持有。WeakRef通常与 FinalizationRegistry 结合使用,用于在对象被垃圾回收时执行清理操作。

语法const weakRef = new WeakRef(targetObject);

其他】deref():返回弱引用指向的目标对象。如果目标对象已被垃圾回收,则返回 undefined

创建弱引用 

const obj = { name: "liming" };
const weakRef = new WeakRef(obj);// 访问目标对象
const target = weakRef.deref();
console.log(target); // { name: "liming" }

检查对象是否被回收 

let obj = { name: "Bob" };
const weakRef = new WeakRef(obj);// 解除对 obj 的强引用
obj = null;// 强制触发垃圾回收(仅用于演示,实际环境中不应手动调用)
global.gc();// 检查对象是否被回收
setTimeout(() => {const target = weakRef.deref();console.log(target); // undefined(对象已被回收)
}, 1000);

WeakRef 的使用场景

缓存系统

在缓存系统中,可以使用 WeakRef 来缓存对象。当内存不足时,垃圾回收器会自动回收这些对象,从而避免内存泄漏。

const cache = new Map();function getCachedData(key) {let cachedRef = cache.get(key);if (cachedRef) {const cachedData = cachedRef.deref();if (cachedData) {return cachedData;}}// 重新获取数据并缓存const newData = fetchData(key);cache.set(key, new WeakRef(newData));return newData;
}

避免内存泄漏

在需要持有对象引用但又不想阻止垃圾回收的场景中,WeakRef 是一个理想的选择。

class EventListener {constructor(target) {this.targetRef = new WeakRef(target);this.handleEvent = this.handleEvent.bind(this);target.addEventListener("click", this.handleEvent);}handleEvent(event) {const target = this.targetRef.deref();if (target) {console.log("Event triggered on:", target);} else {// 目标对象已被回收,清理事件监听器event.currentTarget.removeEventListener("click", this.handleEvent);}}
}

监听对象生命周期 

结合 FinalizationRegistry,可以在对象被垃圾回收时执行清理操作。

const registry = new FinalizationRegistry((heldValue) => {console.log(`Object with value ${heldValue} has been garbage collected.`);
});let obj = { name: "Charlie" };
const weakRef = new WeakRef(obj);// 注册清理回调
registry.register(obj, "some metadata");// 解除对 obj 的强引用
obj = null;// 当 obj 被垃圾回收时,会触发清理回调

逻辑运算符和赋值表达式 、数字分隔符

逻辑运算符和赋值表达式,新特性结合了逻辑运算符(&&,||,??)和赋值表达式而JavaScript已存在的 复合赋值运算符有:

  • all= b    //等价于    a=a(a= b)
  • &&= b     //等价于    a=a&&(a= b)
  • ??= b     //等价于    a=a??(a= b)

数字分隔符,可以在数字之间创建可视化分隔符,通过_下划线来分割数字,使数字更具可读性

const money =1 000 000 000;
//等价于
const money = 1000000000:1 000 000 000=== 1000000000;    //true

ES13(2022)新特性 

class的扩展

在ES2022中允许我们并不在constructor中定义类的成员,示例代码如下:

class user {name = '李明'
}
、*两者是一致的 */
class user {constructor(){name = '李明'}
}

在ES2022中允许我们使用#开头命名的变量作为类的私有成员 

在ES2022(即ECMAScript 2022)中,引入了#符号,允许开发者使用私有字段(私有成员变量)来封装类的内部状态,防止外部直接访问。这是通过在属性名前加上#符号来实现的。这种方式增强了封装性,有助于维护代码的清晰和安全。 

定义私有字段:在类的字段名前加上#符号。

class MyClass {#myPrivateField = '这是一个私有字段';showPrivateField() {console.log(this.#myPrivateField);}
}const instance = new MyClass();
instance.showPrivateField(); // 输出: 这是一个私有字段

注:只能在类的内部通过this关键字来访问私有字段。从类的外部或类的其他方法中直接访问会导致错误。

await在顶层使用

‌在ES2022中,JavaScript引入了顶层await的功能,允许在模块的顶层直接使用await关键字,而不需要将其包裹在async函数中‌。这种写法可以简化代码,使得异步操作更加直观和简洁‌。

const res = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await res.json();
console.log(data);

这段代码会在模块的顶层直接执行await操作,等待fetch请求完成并获取数据,然后继续执行后续的代码‌ 。

顶层await的特点和限制

  • 阻塞模块加载‌:顶层await会阻塞模块的加载,直到所等待的Promise解决或拒绝。这意味着在使用顶层await的模块中,所有的导入操作都会被延迟,直到当前模块中所有的顶层await完成‌。
  • 错误处理‌:使用顶层await时,如果Promise被拒绝,模块将无法加载。因此,通常用于那些必须等待某些操作完成才能继续执行的场景‌。

Object.hasOwn()

Object.hasOwn()是ES2022中新增的一个静态方法,用于检测某个属性是否属于一个对象,并且该属性是对象自身的属性,而不是继承自原型链的属性。该方法返回一个布尔值,如果对象具有指定的自身属性,则返回true,否则返回false。

语法Object.hasOwn(obj, propName)

参数】obj:待检查的对象;propName:待检查的属性名(以字符串形式表示)。

const obj = {a: 1};
console.log(Object.hasOwn(obj, 'a')); // 输出:true
console.log(Object.hasOwn(obj, 'b')); // 输出:false

Array.prototype.at() 

ES2022中新增的at()方法,它的作用是获取数组中的某个成员,它的参数是数组的索引,与直接使用索引的方式不同,它允许我们传递负值,等同于从后面倒数。

语法arr.at(index)

参数】arr是一个数组,index是一个整数,表示要访问的元素的索引。如果index不在数组范围内,则返回undefined

支持类型String、Array、Typed Array

// 正数索引:从数组起始位置开始索引
let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.at(1)); // 'banana'// 负数索引:从数组末尾开始反向索引
let numbers = [1, 2, 3, 4, 5];
console.log(numbers.at(-1)); // 5

d修饰符 

ES2021(也称为ES12)引入了多个新特性,其中就包括d修饰符。d修饰符用于匹配字符串中的文字模式,忽略字符串的大小写‌。

d修饰符的用途和效果

d修饰符的主要作用是匹配字符串中的文字模式时忽略大小写。例如,使用d修饰符可以匹配“Hello”和“hello”,因为它们在大小写上有所不同,但使用d修饰符后,它们都会被视为相同的文字模式。这个修饰符可以让exec()match()的返回结果添加indices属性,在该属性上面可以拿到匹配的开始位置和结束位置。

const text = 'zabbcdef';
const re = /ab/d;
const result = re.exec(text);result.index   // 1
result.indices // [ [1, 3] ]

上一章:ES10(2019)、ES11(2020) 新增特性(八)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/34735.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

量化交易学习笔记02:双均线策略

双均线策略示例 个股:中国平安 回测日期:2022-5-1至2023-5-1 短均线:5天 长无线:10天 代码: def initialize(context):# 初始化此策略# 设置我们要操作的股票池, 这里我们只操作一支股票# """标的&qu…

利用余弦相似度在大量文章中找出抄袭的文章

我前面的2篇文章分别讲了如果利用余弦相似度来判断2篇文章的相似度,来确定文章是否存在抄袭,和余弦相似度的原理,即余弦相似度到底是怎么来判断文章的相似性高低的等等。这一篇再说下,对于文章字数多和大量文章时,如果…

在 Kaggle 中绘制中文乱码解决

在 Kaggle 中绘制中文时,需要设置 Matplotlib 的字体,否则中文会显示为乱码。可以使用 SimHei(黑体)或 Microsoft YaHei(微软雅黑)。 解决方案 使用 matplotlib 设置中文字体在 Kaggle 安装 SimHei 字体 …

在 Ubuntu 服务器上使用宝塔面板搭建博客

📌 介绍 在本教程中,我们将介绍如何在 Ubuntu 服务器 上安装 宝塔面板,并使用 Nginx PHP MySQL 搭建一个博客(如 WordPress)。 主要步骤包括: 安装宝塔面板配置 Nginx PHP MySQL绑定域名与 SSL 证书…

Linux线程

1.线程概念 在一个程序里的一个执行路线就叫做线程(thread),更准确定义:线程是一个进程内部的控制序列 进程至少有一个执行路线,线程在进程内部运行,本质是在进程地址空间内运行,在Linux系统中,CPU眼中&a…

【TI MSPM0】GPIO学习

一、文件样例查找 以GPIO软件轮询为例 下面的四个文件夹分别为不同开发环境提供支持 二、工程导入 1.点击file-点击import project 2.点击browse 3.找到对应的文件打开,选择 推荐使用ticlang,能够提供更加优化的效率 点击finish 三、工程学习 1.readme 文件 &a…

二叉树的基本操作与实现:C语言深度剖析

目录 代码整体框架 1. #define _CRT_SECURE_NO_WARNINGS 2. 头文件引入 3. typedef int BTtype; 4. 二叉树节点结构体定义 二叉树的创建 1. BuyNode 函数 2. CreatNode 函数 二叉树的遍历 前序遍历 中序遍历 后序遍历 二叉树属性的计算 节点个…

深入解析 Latent Diffusion Model(潜在扩散模型,LDMs)(代码实现)

深入解析 Latent Diffusion Model:从传统 Diffusion Model 到高效图像生成的进化 近年来,生成模型在图像合成领域取得了显著进展,其中 Diffusion Model(扩散模型,DMs)以其出色的生成质量和理论上的稳健性逐…

线性回归原理推导与应用(五):波士顿房价预测实战

波士顿房价是一个非常经典的多元线性回归入门案例数据集。波士顿房价预测数据集包含了可能会影响房价的十三个因素,并给出了实际的房价(单位为万美元) 波士顿房价数据集数据集下载地址:https://www.kaggle.com/datasets/altavish…

基于CATIA二次开发的低音炮腔体容积精准计算技术详解

一、功能概述 本工具通过PySide6与CATIA V5深度集成,实现了低音炮上下腔体内体积的自动化测量系统。系统采用三维实体建模法进行容积计算,相较于传统手工计算方式,精度提升可达0.5%。主要功能模块包括: 壳体特征自动识别动态草图…

向量数据库原理及选型

向量数据库 什么是向量什么是向量数据库原理应用场景 向量数据库的选型主流向量数据库介绍向量数据库对比主流向量数据库对比表 选型建议 什么是向量 向量是一组有序的数值,表示在多维空间中的位置或方向。向量通常用一个列或行的数字集合来表示,这些数…

IE代理切换器v1.2免费版

虽然IE浏览器已经过时了,但很多其他浏览器,比如谷歌浏览器的代理服务器设置,都还是基于IE浏览器来进行设置的,如果你的工作场景需要切换不同的代理服务器来访问网络,那这款工具适合你,目前该工具可以实现IE…

模运算的艺术:从基础到高阶的算法竞赛应用

在算法竞赛中,模运算(取模运算)是一个非常重要的概念,尤其在处理大数、防止溢出、以及解决与周期性相关的问题时。C 中的模运算使用 % 运算符,但它的行为和使用场景需要特别注意。 1. 模运算的基本概念 模运算是指求一…

SpringBoot前后端不分离,前端如何解析后端返回html所携带的参数

有一个SpringBoot实现的前后端不分离项目,当前端跳转某个界面时,比如下面的菜单树按钮,后端在返回页面menuTree.html时,还携带了一个参数角色roleId,以便打开菜单树,还要根据这个角色查询对应的分配授权的菜…

操作系统八股文整理(一)

操作系统八股文整理 一、进程和线程的区别二、进程与线程的切换过程一、进程切换进程切换的步骤: 二、线程切换线程切换的步骤: 三、进程切换与线程切换的对比四、上下文切换的优化 三、系统调用一、系统调用的触发二、从用户空间切换到内核空间三、执行…

卷积神经网络(CNN)之 EfficientNet

在深度学习领域,模型的计算效率与性能之间的平衡一直是一个核心挑战。随着卷积神经网络(CNN)在图像分类、目标检测等任务中取得显著成果,模型的复杂度和计算需求也急剧增加。2019年,Google Research 提出的 EfficientN…

leetcode0031 下一个排列-medium

1 题目: 下一个排列 官方标定难度:中等 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如,arr [1,2,3] ,以下这些都可以视作 arr 的排列:[1,2,3]、[1,3,2]、[3,1,2]、[2,3,1] 。 整数数组的 下一…

Suno的对手Luno:AI音乐开发「上传参考音频 - 方式二:通过URL的方式」 —— 「Luno Api系列|AI音乐API」第12篇

导读 今天来看下Luno Api的上传参考音频 - 方式一:通过二进制流的方式。 参考文件,主要是用于在创作的过程中,希望AI参考这个音乐的曲风和声音来进行创作, 这一节看看如何直接使用url的方式进行实现。 申请和使用 「已经有API…

【开源+代码解读】Search-R1:基于强化学习的检索增强大语言模型框架3小时即可打造个人AI-search

大语言模型(LLMs)在处理复杂推理和实时信息检索时面临两大挑战:知识局限性(无法获取最新外部知识)和检索灵活性不足(传统方法依赖固定检索流程)。现有方法如检索增强生成(RAG)和工具调用(Tool-Use)存在以下问题: RAG:单轮检索导致上下文不足,无法适应多轮交互场景…

Blender-MCP服务源码2-依赖分析

Blender-MCP服务源码2-依赖分析 有个大佬做了一个Blender-MCP源码,第一次提交代码是【2025年3月7号】今天是【2025年月15日】也就是刚过去一周的时间,所以想从0开始学习这个代码,了解一下大佬们的开发思路 1-核心知识点 from mcp.server.fas…