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

【前端】ES12：ES12新特性

news 2025/7/10 4:44:25

文章目录

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

conda相比python好处

Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理&#xff1a…...

编程新知 2025/6/15 5:36:36

Cursor实现用excel数据填充word模版的方法

cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中文章目录注意事项逐步生成程序1. 确定格式2. 调试程序注意事项直接给一个excel文件和最终呈现的word文件的示例，…...

编程新知 2025/6/18 2:20:36

基于服务器使用 apt 安装、配置 Nginx

🧾 一、查看可安装的 Nginx 版本首先，你可以运行以下命令查看可用版本： apt-cache madison nginx-core输出示例： nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/7/8 20:09:11

【机器视觉】单目测距——运动结构恢复

ps：图是随便找的，为了凑个封面前言在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛&#xf…...

编程新知 2025/7/6 23:48:10

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求，由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面： 🏛️ 一、组织架构与职责质量体系明确组织内各部门、岗位的职责与权限，形成层级清晰的管理网络&#xf…...

编程新知 2025/7/9 12:29:39

基于Docker Compose部署Java微服务项目

一. 创建根项目根项目（父项目）主要用于依赖管理一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/7/8 15:04:37

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年，截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。从今天开始，将英文题库免费公布出来，并进行解析，帮助大家在一个月之内轻松通过OCP认证。本期公布试题111~120 试题1…...

编程新知 2025/7/5 5:01:20

图表类系列各种样式PPT模版分享

图标图表系列PPT模版，柱状图PPT模版，线状图PPT模版，折线图PPT模版，饼状图PPT模版，雷达图PPT模版，树状图PPT模版图表类系列各种样式PPT模版分享：图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/7/10 2:40:56

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”（简单设计）是软件开发中的一个重要理念，倡导以最简单的方式实现软件功能，以确保代码清晰易懂、易维护，并在项目需求变化时能够快速适应。其核心目标是避免复杂和过度设计，遵循“让事情保…...

编程新知 2025/7/8 22:35:04

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值，用于设置元素的宽度根据其内容自动调整，确保宽度刚好容纳内容而不会超出。效果对比默认情况（width: auto）： 块级元素（如 <div>）会占满父容器…...

编程新知 2025/6/20 15:09:15