当前位置: 首页 > 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)的技术。以下简述其原理,主要包含三个核…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

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

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

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

MySQL体系架构解析(三):MySQL目录与启动配置全解析

MySQL中的目录和文件 bin目录 在 MySQL 的安装目录下有一个特别重要的 bin 目录&#xff0c;这个目录下存放着许多可执行文件。与其他系统的可执行文件类似&#xff0c;这些可执行文件都是与服务器和客户端程序相关的。 启动MySQL服务器程序 在 UNIX 系统中&#xff0c;用…...

高端性能封装正在突破性能壁垒,其芯片集成技术助力人工智能革命。

2024 年&#xff0c;高端封装市场规模为 80 亿美元&#xff0c;预计到 2030 年将超过 280 亿美元&#xff0c;2024-2030 年复合年增长率为 23%。 细分到各个终端市场&#xff0c;最大的高端性能封装市场是“电信和基础设施”&#xff0c;2024 年该市场创造了超过 67% 的收入。…...

Python的__call__ 方法

在 Python 中&#xff0c;__call__ 是一个特殊的魔术方法&#xff08;magic method&#xff09;&#xff0c;它允许一个类的实例像函数一样被调用。当你在一个对象后面加上 () 并执行时&#xff08;例如 obj()&#xff09;&#xff0c;Python 会自动调用该对象的 __call__ 方法…...

Excel 怎么让透视表以正常Excel表格形式显示

目录 1、创建数据透视表 2、设计 》报表布局 》以表格形式显示 3、设计 》分类汇总 》不显示分类汇总 1、创建数据透视表 2、设计 》报表布局 》以表格形式显示 3、设计 》分类汇总 》不显示分类汇总...