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

【前端ES】ECMAScript 2023 (ES14) 引入了多个新特性,简单介绍几个不为人知但却好用的方法

  1. Array.prototype.toSorted()

返回一个新的已排序数组副本,不改变原数组。

let arr = [5, 4, 2, 3, 1];
console.log(arr.toSorted()); // [1, 2, 3, 4, 5]
  1. Array.prototype.with()

允许根据索引修改数组中的单个元素,并返回新数组。

const arr = ["I", "am", "rex"];
const newArr = arr.with(2, "Ape Man");
console.log(newArr); // ["I", "am", "Ape Man"]
  1. Array.prototype.toReversed()

类似于 reverse(),但返回一个新的数组而不是原地操作。

console.log(["1", "2", "3", "4", "5"].toReversed()); // ['5', '4', '3', '2', '1']
  1. Array.prototype.findLast

从数组中获取最后一个匹配元素的实例。

const arr = [24, 34, 55, 75, 10, 77];
console.log(arr.findLast(element => element % 2 === 0)); // 10
  1. Array.prototype.findLastIndex()

与 findLast() 类似,但返回匹配元素的索引。

const arr = [24, 34, 55, 75, 10, 77];
console.log(arr.findLastIndex(element => element % 2 === 0)); // 4
  1. Array.prototype.toSpliced()

类似于数组的 splice 方法,但返回一个新数组。

const arr = [1, 2, 3, 4];
console.log(arr.toSpliced(2, 0, 'a', 'b')); // [1, 2, 'a', 'b', 3, 4]
  1. Hashbang 支持

允许在脚本文件的第一行使用 #! 开头来指定解释器路径。这对于运行时环境(如 Node.js)特别有用。

#!/usr/bin/env node
console.log("This is a script with hashbang support.");
  1. 使用 Symbol 作为 WeakMap 键

扩展了 WeakMap 和 WeakSet 的功能,允许使用 Symbol 作为键。

const weakMap = new WeakMap();
const key = Symbol('key');
const obj = {};
weakMap.set(key, obj);
console.log(weakMap.get(key)); // 输出: {}
  1. Intl.NumberFormat.prototype.formatRangeToParts

提供了一种方法来格式化数字范围,并返回格式化的部分数组。

const numberFormat = new Intl.NumberFormat('en', { style: 'currency', currency: 'USD' });
console.log(numberFormat.formatRangeToParts(5, 10));
  1. Intl.NumberFormat.prototype.formatRangeToParts

提供了一种方法来格式化数字范围,并返回格式化的部分数组。

const numberFormat = new Intl.NumberFormat('en', { style: 'currency', currency: 'USD' });
console.log(numberFormat.formatRangeToParts(5, 10));
  1. Error Cause

在创建错误对象时可以传递一个原因对象,帮助追踪错误来源。

try {throw new Error("An error occurred", { cause: "Some additional context" });
} catch (e) {console.error(e.message, e.cause); // 输出: An error occurred Some additional context
}
  1. FinalizationRegistry Cleanup Callbacks

提供了一个机制来注册回调函数,当垃圾回收器清除注册表中的条目时调用。

const registry = new FinalizationRegistry((heldValue) => {console.log(`Cleaned up ${heldValue}`);
});
let obj = {};
registry.register(obj, "some value");
obj = null; // 假设此时 obj 被垃圾回收
  1. Promise.withResolvers()

返回一个新的 Promise 对象和对应的 resolve/reject 函数。

const { promise, resolve, reject } = Promise.withResolvers();
promise.then(value => console.log(value)); // 当 resolve 被调用时输出值
resolve("resolved value");
  1. Top-Level Await in Modules

允许在模块顶层使用 await,而不仅仅是在异步函数内部。

await someAsyncFunction(); // 直接在模块顶层使用 await
  1. Logical Assignment Operators

引入了逻辑赋值操作符:&&=||=??=,这些操作符结合了逻辑运算与赋值。

let a; a &&= 5; // 等价于 a = a && 5;

  1. Numeric Separators

允许在数字字面量中使用下划线 _ 作为千位分隔符以提高可读性。

const budget = 1_000_000_000_000; // 一千亿
  1. Class Fields and Static Class Features

支持类字段声明和静态类特性,简化类定义。

class MyClass {field = "a field";static staticField = "a static field";
}

相关文章:

【前端ES】ECMAScript 2023 (ES14) 引入了多个新特性,简单介绍几个不为人知但却好用的方法

Array.prototype.toSorted() 返回一个新的已排序数组副本,不改变原数组。 let arr [5, 4, 2, 3, 1]; console.log(arr.toSorted()); // [1, 2, 3, 4, 5]Array.prototype.with() 允许根据索引修改数组中的单个元素,并返回新数组。 const arr ["…...

【EndNote】WPS 导入EndNote 21

写在前面:有没有人有激活码,跪求! EndNote,在文献管理和文献引用方面很好用。写文章的时候,使用EndNote引入需要的文献会很方便。我目前用的WPS,想把EndNote的CWYW(Cite While You Write&#…...

网上购物|基于SprinBoot+vue的网上购物系统(源码+数据库+文档)

网上购物系统目录 基于SprinBootvue的网上购物 一、前言 二、系统设计 三、系统功能设计 5.1 管理员功能实现 5.1.1 论坛管理 5.1.2 商品管理 5.1.3 商品评价管理 5.1.4 商品订单管理 5.2 用户功能实现 5.2.1 商品信息 5.2.2 确认下单 5.2.3 商品订单 5.2.4 购物…...

AI 语言模型发展史:统计方法、RNN 与 Transformer 的技术演进

引言 自然语言处理(NLP)是 AI 领域的重要分支,而语言模型(Language Model, LM)是 NLP 的核心技术。语言模型经历了从 统计方法 到 RNN(循环神经网络),再到 Transformer 的演进&…...

Pycharm中查找与替换

1、Edit -> Find -> Find 在当前文件中查找 2、Edit -> Find -> Find in Files 在所有文件中查找 3、Edit -> Find -> Replace 在当前文件中执行替换 4、Edit -> Find -> Replace in Files 在所有文件中执行替换...

有向图的强连通分量: Kosaraju算法和Tarjan算法详解

在上一篇文章中, 我们了解了图的最小生成树算法. 本节我们来学习 图的强连通分量(Strongly Connected Component, SCC) 算法. 什么是强连通分量? 在 有向图 中, 若一组节点内的任意两个节点都能通过路径互相到达(例如 A → B A \rightarrow B A→B 且 B → A B \rightarro…...

mac相关命令

显示和隐藏usr等隐藏文件文件 terminal输入: defaults write com.apple.Finder AppleShowAllFiles YESdefaults write com.apple.Finder AppleShowAllFiles NO让.bashrc每次启动shell自动生效 编辑vim ~/.bash_profile 文件, 加上 if [ -f ~/.bashrc ]; then. ~/.bashrc fi注…...

代码随想录算法训练营第六天| 242.有效的字母异位词 、349. 两个数组的交集、202. 快乐数 、1. 两数之和

242.有效的字母异位词 题目链接:242.有效的字母异位词 文档讲解:代码随想录有效的字母异位词 视频讲解:LeetCode:有效的字母异位词 状态:学会了 思路: 数组其实是简单哈希表。 哈希表用来快速判断元素是否在…...

dify实现分析-rag-关键词索引的实现

概述 在dify中有两种构建索引的方式,一种是经济型,另一种是高质量索引(通过向量数据库来实现)。其中经济型就是关键词索引,通过构建关键词索引来定位查询的文本块,而关键词索引的构建是通过Jieba这个库来完…...

【小白学HTML5】一文讲清常用单位(px、em、rem、%、vw、vh)

html5中,常用的单位有px、em、rem、%、vw、vh(不常用)、cm、m等,这里主要讲解px、em、rem、%、vw。 学习了解:主流浏览器默认的字号:font-size:16px,无论用什么单位,浏览器最终计算…...

Fastgpt学习(5)- FastGPT 私有化部署问题解决

1.☺ 问题描述: Windows系统,本地私有化部署,postgresql数据库镜像日志持续报错" data directory “/var/lib/postgresql/data” has invalid permissions ",“ DETAIL: Permissions should be urwx (0700) or urwx,gr…...

ubuntu下安装TFTP服务器

在 Ubuntu 系统下安装和配置 TFTP(Trivial File Transfer Protocol)服务器可以按照以下步骤进行: 1. 安装 TFTP 服务器软件包 TFTP 服务器通常使用 tftpd-hpa 软件包,你可以使用以下命令进行安装: sudo apt update …...

深入解析 iText 7:从 PDF 文档中提取文本和图像

在现代开发中,PDF 文件的操作是不可避免的一部分。无论是生成报告、解析文档,还是从文件中提取信息,我们常常需要处理 PDF 文件。iText 是一个非常强大的库,广泛应用于 PDF 文件的创建、修改和解析。自 iText 7 发布以来&#xff…...

Rust编程语言入门教程 (六)变量与可变性

Rust 系列 🎀Rust编程语言入门教程(一)安装Rust🚪 🎀Rust编程语言入门教程(二)hello_world🚪 🎀Rust编程语言入门教程(三) Hello Cargo&#x1f…...

事务--实操演示

目录 一、准备工作 二、在MySQL中操作事务(重点) 第一种方式:使用命令的方式 第二种方式:设置MySQL事务不默认提交的方式 结 三、在JDBC中操作事务(掌握) 第一种方式:使用命令的方式 第…...

PHP是如何并行异步处理HTTP请求的?

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons:JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram,自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 ? 5 IDEA必装的插件&…...

【Spring详解一】Spring整体架构和环境搭建

一、Spring整体架构和环境搭建 1.1 Spring的整体架构 Spring框架是一个分层架构,包含一系列功能要素,被分为大约20个模块 Spring核心容器:包含Core、Bean、Context、Expression Language模块 Core :其他组件的基本核心&#xff…...

在 Vue 3 中使用 Lottie 动画:实现一个加载动画

在现代前端开发中,动画是提升用户体验的重要元素之一。Lottie 是一个流行的动画库,它允许我们使用 JSON 文件来渲染高质量的动画。本文将介绍如何在 Vue 3 项目中集成 Lottie 动画,并实现一个加载动画效果。 如果对你有帮助请帮忙点个&#x…...

深度解析:使用 Headless 模式 ChromeDriver 进行无界面浏览器操作

一、问题背景(传统爬虫的痛点) 数据采集是现代网络爬虫技术的核心任务之一。然而,传统爬虫面临多重挑战,主要包括: 反爬机制:许多网站通过检测请求头、IP地址、Cookie等信息识别爬虫,进而限制…...

MySQL 主从复制原理及其工作过程

一、MySQL主从复制原理 MySQL 主从复制是一种将数据从一个 MySQL 数据库服务器(主服务器,Master)复制到一个或多个 MySQL 数据库服务器(从服务器,Slave)的技术。以下简述其原理,主要包含三个核…...

7.4.分块查找

一.分块查找的算法思想: 1.实例: 以上述图片的顺序表为例, 该顺序表的数据元素从整体来看是乱序的,但如果把这些数据元素分成一块一块的小区间, 第一个区间[0,1]索引上的数据元素都是小于等于10的, 第二…...

微信小程序之bind和catch

这两个呢,都是绑定事件用的,具体使用有些小区别。 官方文档: 事件冒泡处理不同 bind:绑定的事件会向上冒泡,即触发当前组件的事件后,还会继续触发父组件的相同事件。例如,有一个子视图绑定了b…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...