当前位置：首页 > news >正文

【前端】ES12：ES12新特性

news 2025/11/16 16:52:26

文章目录

1 逻辑赋值操作符
2 数字分隔符
3 replaceAll
4 Promise.any
5 WeakRef
6 FinalizationRegistry

1 逻辑赋值操作符

逻辑赋值操作符 ??=、&&=、 ||=。

let a = true
let b = false
//a &&= b //false
a ||= b ; //true
console.log(a)let obj = {name:"kerwin",           
}obj.introduction = obj.introduction ?? "很懒"
obj.introduction ??= "很懒"

2 数字分隔符

这个新特性是为了方便程序员看代码而出现的，如果数字比较大，那么看起来就不是那么一目了然。

const num = 123456789

分隔符不仅可以分割十进制，也可以分割二净值或者十六净值的数据，非常好用。

const number = 1_000_000_000_000;
const binary = 0b1010_0101_1111_1101;
const hex = 0xA1_B2_C3;

3 replaceAll

所有匹配都会被替代项替换。模式可以是字符串或正则表达式，而替换项可以是字符串或针对每次匹配执行的函数。并返回一个全新的字符串

const str = "I wish to wish the wish you wish to wish, but if you wish the wish the witch wishes, I won't wish the wish you wish to wish. ";
const newStr = str.replaceAll("wish", "kerwin");
console.log(newStr);

4 Promise.any

只要参数实例有一个变成fulfilled状态，包装实例就会变成fulfilled状态；如果所有参数实例都变成rejected状态，包装实例就会变成rejected状态。

Promise.any()跟Promise.race()方法很像，只有一点不同，就是Promise.any()不会因为某个Promise变成rejected状态而结束，必须等到所有参数Promise变成rejected状态才会结束。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// Promise.all 都成功了就走.then，只要有一个失败了就走.catch// Promise.race 部署两个接口，超时处理// Promise.allSettled 成功失败都走.then，能显示就显示，不能显示就过滤掉，页面也能成功展示出数据// Promise.any // some//登录-会员联盟系统（沃尔玛，华润万家，盒马）如果三家都没有账号就走catch注册let ajax1 = function(){return new Promise((resolve,reject)=>{//resolve("沃尔玛")reject("沃尔玛")})}let ajax2 = function(){return new Promise((resolve,reject)=>{reject("华润万家")})}let ajax3 = function(){return new Promise((resolve,reject)=>{reject("盒马")})}Promise.any([ajax1(), ajax2(), ajax3()]).then(res=>{console.log(res)}).catch(err=>{console.log("err", err) // All promises were rejected})</script>
</body>
</html>

5 WeakRef

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>//ES6 Set Map//ES6 WeakSet WeakMap ES12 WeakRef //weak系列：帮助垃圾回收机制回收这些不可访问的对象let obj = {name:"kerwin"}let obj1 = obj // 判断引用计数是否大于0，如果等于0就回收obj = null // 垃圾回收机制常用算法：引用计数法、标记清除法     let s1= new Set()s1.add(obj) // 插入到s1中也引用计数 + 1，没有办法回收s1.add("aaaaa")obj = null // obj依然存在//   for(let i of s1){//       console.log(i)//   }/*weakset:1. 只能复杂类型(对象、数组、函数)，不能是基本类型2. 不存在引用计数+13. size, for不能用了，里面的内容是不确定能访问到的*/let s2= new WeakSet()s2.add(obj) // 不会引用计数，不会 + 1//   s2.add("aaaaa")obj = null // obj删除了//   for(let i of s1){ // 不可迭代，weakset的内容是不确定的//       console.log(i)//   }</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="like">like</button><script>//WeakMap()// let wmap = new WeakMap()// let like = document.getElementById("like")// wmap.set(like, {click: 0})// like.onclick = function(){//     let times = wmap.get(like)//     times.click++// }// setTimeout(()=>{//     document.body.removeChild(like) // like依然存在//     //like = null // like不存在了//     console.log(like)// }, 2000)let wmap = new WeakMap()wmap.set(document.getElementById("like"),{click:0}) // 不赋值第三方变量了document.getElementById("like").addEventListener("click", function(){let times = wmap.get(document.getElementById("like"))times.click++},false)setTimeout(()=>{document.body.removeChild(document.getElementById("like")) // 引用依赖dom页面上的节点},2000)</script>
</body>
</html>

在一般情况下，对象的引用是强引用的，这意味着只要持有对象的引用，它就不会被垃圾回收。只有当该对象没有任何的强引用时，垃圾回收才会销毁该对象并且回收该对象所占的内存空间。

而 WeakRef 允许您保留对另一个对象的弱引用，而不会阻止被弱引用对象被垃圾回收。

let target = {};
let wr = new WeakRef(target);

WeakRef实例对象有一个deref()方法，如果原始对象存在，该方法返回原始对象；如果原始对象已经被垃圾回收机制清除，该方法返回undefined。

let obj = {name:"kerwin"}let wobj = new WeakRef(obj) // 弱引用
//wobj.deref() 拿到原始对象obj = null // 弱引用不会阻止垃圾回收机制回收，销毁obj，wobj访问不到了
//wobj.deref() undefined

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="like">like</button><script>//WeakMap()let wmap = new WeakMap()let like = new WeakRef(document.getElementById("like")) // 弱引用，节点删掉了，访问不到了wmap.set(like.deref(), {click: 0})like.deref().onclick = function(){let times = wmap.get(like.deref())times.click++}setTimeout(()=>{document.body.removeChild(like.deref())         },2000)      </script>
</body>
</html>

6 FinalizationRegistry

清理器注册表功能FinalizationRegistry，用来指定目标对象被垃圾回收机制清除以后，所要执行的回调函数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let obj = {name:"kerwin"}// 新建一个注册表实例let registry = new FinalizationRegistry(data=>{ // "临终遗言"console.log("销毁了", data)})registry.register(obj, "11111111111111") // 只要obj指向的对象被销毁(obj = null)，"11111111111111"传给回调函数调用//registry.unregister(obj) // 取消注册</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="like">like</button><script>//WeakMap()let registry = new FinalizationRegistry(data=>{console.log("销毁了", data)})let wmap = new WeakMap()let like = new WeakRef(document.getElementById("like"))wmap.set(like.deref(), {click:0})like.deref().onclick = function(){let times = wmap.get(like.deref())times.click++}setTimeout(()=>{// 删除节点后，执行回调函数registry.register(like.deref(), wmap.get(like.deref()).click)document.body.removeChild(like.deref())},3000)</script>
</body>
</html>

【前端】ES12：ES12新特性

文章目录 1 逻辑赋值操作符2 数字分隔符3 replaceAll4 Promise.any5 WeakRef6 FinalizationRegistry 1 逻辑赋值操作符逻辑赋值操作符 ??、&&、 ||。 let a true let b false //a && b //false a || b ; //true console.log(a)let obj {name:"ker…...

编程日记 2024/9/28 2:12:11

语音识别(非实时)

1.环境 python ：3.10.14 2.完整代码 import whisper #whisper import wave # 使用wave库可读、写wav类型的音频文件 import pyaudio # 使用pyaudio库可以进行录音，播放，生成wav文件 def record(time): # 录音程序# 定义数据流块CHUNK …...

编程日记 2024/9/28 2:10:08

【计算机网络】--URL统一资源定位符

一个网站地址实例 scheme://host.domain:port/path/filename scheme——定义因特网服务的类型，常见的类型是http host——定义域主机（http的默认主机是www） domain———定义因特网的域名，例如，jinyun.fun &#xf…...

编程日记 2024/9/28 2:09:08

在成都建“圈”五年，鲲鹏让智能化新风吹遍巴蜀大地

科技圈里流行着“互联网四大中心”的说法，即南边的深圳、东边的杭州、北边的北京和西边的成都。深圳、杭州、北京几乎没有太大的争议，这里是国内著名的互联网公司聚集地，有着国内排行前三的互联网企业总部，单单一个北京西二旗就…...

编程日记 2024/9/28 2:08:07

Unity图形用户界面！★,°:.☆(￣▽￣)/$:.°★ 。（万字解析）

Unity 3D GUI 简介游戏开发过程中，开发人员往往会通过制作大量的图形用户界面（ Graphical User Interface，GUI ）来增强游戏与玩家的交互性。 Unity 3D 中的图形系统分为 OnGUI、NGUI、UGUI等，这些类型的图形系统内容…...

编程日记 2024/9/28 2:06:05

【JAVA报错已解决】Java.lang.NullPointerException

🎬 鸽芷咕：个人主页 🔥 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想，就是为了理想的生活! 专栏介绍在软件开发和日常使用中，BUG是不可避免的。本专栏致力于为广大开发者和技术爱好者提供一个关于BUG解决的经…...

编程日记 2024/9/28 2:05:04

JSON 教程

JSON 教程 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head> …...

编程日记 2024/9/28 2:04:03

HBase 的基本架构详解

HBase 是一个分布式的、面向列的数据库，构建在 HDFS（Hadoop Distributed File System）之上，提供高效的随机读写操作。为了全面理解 HBase 的基础架构，需要从逻辑架构、物理存储、组件之间的交互、数据管理和底层设计出…...

编程日记 2024/9/28 2:02:00

crypt.h：No such file or directory报错处理

crypt.h：No such file or directory 报错处理前言：本文初编辑于2024年9月27日 CSDN主页：https://blog.csdn.net/rvdgdsva 博客园主页：https://www.cnblogs.com/hassle 博客园本文链接： 大！萌&#xff0…...

编程日记 2024/9/28 2:00:59

网络消费维权的9个常见法律问题

一、忘记付尾款，定金能否退还？ 不能。消费者在网络提交订单后，合同即成立。合同成立后，消费者的义务为按时付款。若消费者在支付定金后未能支付尾款，即未能履行付款义务，会导致合同无法履行，构…...

编程日记 2024/9/28 1:58:58

detectron2是怎么建立模型的？以SparseInst代码为例

看SparseInst论文发现论文里有些地方没讲清楚；遂找SparseInst源码来看模型结构我选择从推理代码来找模型结构： 经探索，在SparseInst代码里，推理需要执行代码 python demo.py --config-file configs/sparse_inst_r50_base.yaml …...

编程日记 2024/9/28 1:57:57

kafka监控平台Kafdrop：使用记录

背景 AI的发展真是太方便了，让它给我推荐一款轻量级，没有学习曲线的kafka监控平台，它就给我推荐这一款。用了一下果然没有一点学习曲线。目前已经满足了我的需求，可视化界面，topic、消息、消费者group信息以及消费情…...

编程日记 2024/9/28 1:56:56

的使用和内联函数

今天我们来了解一下C中的&和内联函数引用标识符& C觉得C语言部分的指针有些麻烦，容易混乱，所以C创造了一个标识符&，表示是谁的别名。跟指针对比一下：int* a1&b1;int &a2b2;这样看，显然a1存放的…...

编程日记 2024/9/28 1:55:55

征程6 上基于 DEB 工具实现包管理

1.引言在开发、调测过程中，开发人员需要将系统软件、应用软件部署到 Soc 板端，以用于运行调试。传统的部署方式是通过解压复制或者调用部署脚本。这样的部署方式需要有着方式不统一、维护投入大的缺点。在 linux 系统上，大多采用包管理的…...

编程日记 2024/9/28 1:54:54

【git】一文详解： git rebase到底有啥问题

引子我反复看到这样的评论：“git rebase 像屎一样”。人们似乎对此有很强烈的感受，我真的很惊讶，因为我没有遇到太多使用 rebase 的问题，而且我一直在使用它。使用 rebase 的成本有多大？在实际使用中它给你带来了什…...

编程日记 2024/9/28 1:53:54

高性能计算应用优化实践之WRF

WRF（Weather Research Forecast）模式是由美国国家大气研究中心（NCAR）、国家环境预报中心（NCEP）等机构自1997年起联合开发的新一代高分辨率中尺度天气研究预报模式，重点解决分辨率为1&#xff5e…...

编程日记 2024/9/28 1:52:53

nsight-compute使用教程

一安装有的时候在linux上安装上了nsight-compute，可以生成报告，但是却因为缺少qt组件而无法打开，我选择的方法是在linux上生成报告，在window上的nsight compute的图形界面打开，需要注意的是，nsight compute图形界面的版本一定要更高，不然无法打开二使用 2.1 生成…...

编程日记 2024/9/28 1:51:52

【深度学习】03-神经网络01-4 神经网络的pytorch搭建和参数计算

# 计算模型参数,查看模型结构,我们要查看有多少参数，需要先安装包 pip install torchsummary import torch import torch.nn as nn from torchsummary import summary # 导入 summary 函数，用于计算模型参数和查看模型结构# 创建神经网络模型类 class Mo…...

编程日记 2024/9/28 1:50:51

我与Linux的爱恋：命令行参数|环境变量

🔥个人主页：guoguoqiang. 🔥专栏：Linux的学习文章目录一.命令行参数二.环境变量1.环境变量的基本概念2.查看环境变量的方法3.环境变量相关命令4.环境变量的组织方式以及获取环境变量的三种方法环境变量具有全局属性一…...

编程日记 2024/9/28 1:47:48

django drf 统一Response格式

场景需要将响应体按照格式规范返回给前端。例如： 响应体中包含以下字段： {"result": true,"data": {},"code": 200,"message": "ok","request_id": "20cadfe4-51cd-42f6-af81-0…...

编程日记 2024/9/28 1:44:45

智慧医疗能源事业线深度画像分析（上）

引言医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/11/10 22:31:49

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎（Physics Engine） 物理引擎是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于游戏开发、动画制作、虚…...

编程新知 2025/11/9 9:09:52

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...

编程新知 2025/6/11 15:25:30

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template>  </template>…...

编程新知 2025/11/12 20:41:35

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/10/28 1:35:57