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

【前端】ES12：ES12新特性

news 2026/3/30 1:02:37

文章目录

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

Java毕业设计基于springboot+vue的智慧旅游系统

前言 SpringBoot智慧旅游系统通常采用B/S（Browser/Server）架构，这种架构使得用户可以通过任何支持Web浏览器的设备访问系统，无需安装额外的客户端软件，降低了用户的使用门槛。一、项目介绍开发语言：Java …...

编程新知 2026/3/29 23:49:20

OpenClaw+GLM-4.7-Flash：自动化代码审查工具

OpenClawGLM-4.7-Flash：自动化代码审查工具 1. 为什么需要自动化代码审查作为一个长期与代码打交道的开发者，我深知代码审查的重要性。但现实情况是，团队中的代码审查往往成为瓶颈——要么因为人力不足导致积压，要么因为审查者…...

编程新知 2026/3/29 23:43:19

如何为Windows任务栏添加现代圆角设计：RoundedTB完全配置指南

如何为Windows任务栏添加现代圆角设计：RoundedTB完全配置指南【免费下载链接】RoundedTB Add margins, rounded corners and segments to your taskbars! 项目地址: https://gitcode.com/gh_mirrors/ro/RoundedTB 厌倦了Windows系统任务栏千篇一律的方正外观…...

编程新知 2026/3/29 23:19:09

FPGA新手别怕！Vivado 2023.1里用DDS IP核生成1MHz正弦波，保姆级图文配置+仿真

FPGA实战：从零开始用Vivado配置DDS IP核生成精准波形第一次打开Vivado的IP Catalog界面时，满屏的参数选项确实容易让人望而生畏。但别担心，DDS（直接数字频率合成）IP核其实比你想象的要友好得多。作为FPGA数字信号处理…...

编程新知 2026/3/29 22:40:53

Docker 部署 Ollama 实战指南：从镜像拉取到 API 调用的全流程解析

1. 为什么选择 Docker 部署 Ollama？ 在开始之前，我们先聊聊为什么要把 Ollama 装进 Docker。我刚开始接触大语言模型时，最头疼的就是环境配置问题。不同模型需要不同版本的依赖库，系统里各种 Python 环境经常打架。直到用了 Docke…...

编程新知 2026/3/29 22:22:42

5分钟解决PDF转Markdown痛点：Marker工具全场景应用指南

5分钟解决PDF转Markdown痛点：Marker工具全场景应用指南【免费下载链接】marker 一个高效、准确的工具，能够将 PDF 和图像快速转换为 Markdown、JSON 和 HTML 格式，支持多语言和复杂布局处理，可选集成 LLM 提升精度，适…...

编程新知 2026/3/29 22:18:42

为什么Stable Diffusion选择VQ-GAN？深入解析LDM背后的图像压缩技术

为什么Stable Diffusion选择VQ-GAN？深入解析LDM背后的图像压缩技术在生成式AI领域，Stable Diffusion凭借其出色的图像生成质量和开源特性迅速成为行业标杆。但很少有人注意到，这个强大模型的核心竞争力之一，其实隐藏在它的第一阶…...

编程新知 2026/3/29 22:00:39

5步构建适合你的Yuzu版本管理系统：写给模拟器玩家的效率指南

5步构建适合你的Yuzu版本管理系统：写给模拟器玩家的效率指南【免费下载链接】yuzu-downloads 项目地址: https://gitcode.com/GitHub_Trending/yu/yuzu-downloads 还在为Yuzu模拟器版本选择而困惑？为什么新游戏在最新版模拟器上反而卡顿&#x…...

编程新知 2026/3/29 21:26:22

如何快速实现分布式定时任务？Disque完整指南详解

如何快速实现分布式定时任务？Disque完整指南详解【免费下载链接】disque Disque is a distributed message broker 项目地址: https://gitcode.com/gh_mirrors/di/disque 分布式定时任务在现代应用中至关重要，而Disque作为Redis作者antirez开发的…...

编程新知 2026/3/29 20:48:10

终极游戏画质优化指南：3步让所有显卡享受DLSS级性能提升【免费下载链接】OptiScaler DLSS replacement for AMD/Intel/Nvidia cards with multiple upscalers (XeSS/FSR2/DLSS) 项目地址: https://gitcode.com/GitHub_Trending/op/OptiScaler 还在为显卡性能…...

编程新知 2026/3/29 19:43:43