JavaScript 最新动态:2024 年新功能
前言
随着 Web 技术的日新月异,JavaScript 也在不断地吸收新的特性和技术,以满足日益复杂和多样化的开发需求。在 2024 年,JavaScript 迎来了一系列令人瞩目的新功能,这些功能不仅提升了开发者的效率,也极大地丰富了 Web 应用的表现力和交互性。
在接下来的内容中,我们将逐一介绍这些新功能,并探讨它们如何在实际开发中发挥作用,以及它们如何继续引领前端开发的未来。
Object.groupBy
它是一个新的 JavaScript 方法,它可以根据提供的回调函数返回的字符串值对给定可迭代对象中的元素进行分组。返回的对象具有每个组的单独属性,其中包含组中的元素的数组。
当我们想要根据数组中对象的一个或多个属性的名称对数组元素进行分类时,此方法非常有用。
语法
Object.groupBy(items, callbackFn)
参数
items
:一个将进行元素分组的可迭代对象callbackFn
:对可迭代对象中的每个元素执行的函数。它应该返回一个值,可以被强制转换成属性键(字符串或 symbol),用于指示当前元素所属的分组。该函数被调用时将传入以下参数:- element:数组中当前正在处理的元素
- index:正在处理的元素在数组中的索引
返回值
一个带有所有分组属性的 null
原型对象,每个属性都分配了一个包含相关组元素的数组。
对数组中的元素进行分组
我们可能经常需要对数据库中的项目进行分组并通过 UI 将它们显示给用户。使用 Object.groupBy()
就可以简化此类项目的分组。
比如有这样一堆数据:
const arr = [
{ product: "iPhone X", quantity: 25, color: "black" },
{ product: "Huawei mate50", quantity: 6, color: "white" },
{ product: "xiaomi 13", quantity: 0, color: "black" },
{ product: "iPhone 13", quantity: 10, color: "white" },
{ product: "Huawei P50", quantity: 5, color: "black" },
]
然后我们希望将这些设备根据颜色进行分类
const newArr = Object.groupBy(arr, (item) => item.color)
console.log('【newArr】', newArr)
上面的代码按产品的属性值color
对产品进行分组,每次调用回调函数时,都会返回与每个对象的属性(“黑色”或“白色”)相对应的键。然后使用返回的键对数组的元素进行分组。
有条件地对数组中的元素进行分组
还是上面的数据,如果我们想要分成iphone和国产品牌两类,可以这么来实现:
const arr = [
{ product: "iPhone X", quantity: 25, color: "black" },
{ product: "Huawei mate50", quantity: 6, color: "white" },
{ product: "xiaomi 13", quantity: 0, color: "black" },
{ product: "iPhone 13", quantity: 10, color: "white" },
{ product: "Huawei P50", quantity: 5, color: "black" },
]
const list = Object.groupBy(arr, (item) => {
return item.product.includes('iPhone') ? 'iPhone' : '国产品牌'
})
console.log('【list】', list)
扩展
注意: Object.groupBy()
最初是作为典型的数组方法实现的。它最初的用途是这样的:
let myArray = [a, b, c]
myArray.groupBy(callbackFunction)
然而,由于ECMAScript技术委员会在实现该方法 时遇到了Web 兼容性问题,因此他们决定将其实现为静态方法 ( )。
Object.groupBy()
只需两个参数即可简化数组中对象分组的过程:数组本身和回调函数。
在过去,您必须编写一个自定义函数来对数组元素进行分组或从外部库导入分组方法。
可用性: Object.groupBy()
现在所有主要浏览器平台都支持
正则表达式v标志
大家可能熟悉正则表达式 Unicode 标志 ( u
),它允许启用对 Unicode 字符的支持。该v
标志是u
标志大部分功能的扩展。
它除了主要向后兼容该u
标志之外,还引入了以下新功能:
交集运算符
交集运算符可以匹配两个字符集中必须存在的字符。其语法为[operand-one&&operand-two]
,其中&&
表示交集运算符, operand-one
和operand-two
表示各自的字符集。
const str = 'My name is nanjiu'
const strReg = /[[a-z]&&[^aeiou]]/gv
const strArr = str.match(strReg)
console.log('【strArr】', strArr)
// 【strArr】 ['y', 'n', 'm', 's', 'n', 'n', 'j']
[a-z]
上面的代码定义了一个匹配小写字母和非元音字符的交集的正则表达式[^aeiuo]
。- 运算
&&
符确保仅匹配两个集合共有的字符。 - 这些
gv
标志启用全局搜索(查找所有匹配项)和正则表达式 v 模式。
差异运算符
差异运算符由两个连续的连字符 ( --
) 表示,提供了一种在正则表达式中指定排除项的便捷方法。正则表达式引擎将忽略--
后面的任何字符集
查找非 ASCII 表情符号字符:
let myEmojis = ",,,☉‿⊙,:O";
let myRegex = /[\p{Emoji}--\p{ASCII}]/gv;
console.log(myEmojis.match(myRegex));
// ["","",""]
可用性: 所有主要 JavaScript 环境都支持该v
标志。
Promise.withResolvers()
Promise.withResolvers()
是一个静态方法,它返回一个包含三个属性的对象:
- promise:一个新的peomise对象
- resolve:一个函数,用于解决该promise
- reject:一个函数,用于拒绝该promise
很多时候,我们希望能够在promise
外部访问resolve
和reject
,在这之前我们都是通过以下形式解决的
let resolve, reject;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
现在我们可以使用Promise.withResolvers
来优雅的解决这个问题,并且resolve
和reject
函数现在与 Promise 本身处于同一作用域,而不是在执行器中被创建和一次性使用。这可能使得一些更高级的用例成为可能,例如在重复事件中重用它们,特别是在处理流和队列时。这通常也意味着相比在执行器内包装大量逻辑,嵌套会更少。
const getList = () => {
const { resolve, reject, promise } = Promise.withResolvers()
setTimeout(() => {
const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
resolve(list)
}, 1000)
return promise
}
getList().then(res => {
console.log('【res】', res)
})
// 【res】 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
可用性: 适用于所有主要浏览器。
注意:Promise.withResolvers()
尚未包含在 Node.js 中。因此,提供的示例可能无法在 Node.js 中按预期运行
四种新的非改变数组方法
通过复制改变数组引入了四种新的非改变数组方法: toReversed()
、toSpliced()
、toSorted()
和with()
前三个在功能上等同于它们的相似方法: reverse()
、splice()
和sort()
。
它们与对应方法的功能相似,区别在于新增的三个方法不会改变原数组
with()
是第四个新的数组方法。它允许我们替换数组中特定位置的元素,同样不会改变原数组
const groupList = [1, 2, 3, 4, 5, 6]
const newGroupList = groupList.with(2, 'nanjiu')
console.log('【newGroupList】', newGroupList)
console.log('【groupList】', groupList)
可用性: 适用于所有主要的 JavaScript 运行时和浏览器中。
JavaScript 最新动态:2024 年新功能的更多相关文章
- JavaScript大杂烩13 - 总结ECMAScript 5新功能
虽说这个标准已经出来很久了,所有的主流浏览器的最新版本也都支持了这些特性,但是很多的教程中并没有包含这个部分,这一节我们专门来总结一下这个标准中的新功能. Object的新方法 在最新的JavaScr ...
- Sitecore 9 您应该了解的所有新功能和变化
信不信由你,当我谈论Sitecore时,我感到非常兴奋.这是一个充满潜力和机遇的伟大平台 如果你能想象一个刚刚进行过一次双重训练的人,一个特大号的星巴克,并且刚刚在创纪录的时间内完成了中国忍者勇士的障 ...
- .NET 6 预览版 7:新功能已完成 ,将专注于改进
.NET 团队的项目经理 Richard Lander在宣布 .NET 6 Preview 7 时说:"这是 .NET 预览的又一季的结束.", 中文翻译:.NET 6 预览版 7 ...
- MySQL 5.7 Replication 相关新功能说明
背景: MySQL5.7在主从复制上面相对之前版本多了一些新特性,包括多源复制.基于组提交的并行复制.在线修改Replication Filter.GTID增强.半同步复制增强等.因为都是和复制相关, ...
- unity5.0新功能
原作者 只待苍霞 章节1: 先来两个最关心的新功能, 第一章先讲PBS, 第二章讲光影GI.说到PBS, 首先应该想到的是Unity自带的两个新的Shader, 分别是Standard以及Standa ...
- JavaScript DOM动态创建(声明)Object元素
http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...
- JPA2.1 中三个提升应用性能的新功能
经常在网上看到开发者们抱怨 JPA 性能低下的帖子或文章,但如果仔细查看这些性能问题,常会发现导致问题的根本原因大致包括以下几个: 使用过多的 SQL 查询从数据库中获取所需的实体信息,即我们常说的n ...
- Red Hat Enterprise Linux 7的新功能
简介红帽最新版本的旗舰平台交付显著增强的可用性. 性能和可靠性. 丰富的新功能为架构. 系统管理员和开发人员提供所需的资源以更高效地进行创新和管理.架构师: 红帽® 企业 Linux® 7 适合 ...
- 理解Javascript的动态语言特性
原文:理解Javascript的动态语言特性 理解Javascript的动态语言特性 Javascript是一种解释性语言,而并非编译性,它不能编译成二进制文件. 理解动态执行与闭包的概念 动态执行: ...
- Windows 10新功能
Windows 10 中面向开发人员的新增功能 Windows 10 及新增的开发人员工具将提供新通用 Windows 平台支持的工具.功能和体验.在 Windows 10 上安装完工具和 SDK后, ...
随机推荐
- miniIO系列文章03---abpvext中集成
在Abp商业版本中已经提供了文件管理模块的,免费版本是没有的,本文将介绍如何使用Minio打造一个自己的文件管理模块. 在项目开始之前,需要先安装一个Minio服务,可以在本地pc或云主机中安装,具体 ...
- 安装Visual Studio的详细流程
本文介绍Visual Studio 2022软件Community(社区版)的下载.安装.运行与使用方法. 首先需要提一句,本文介绍的是Visual Studio 2022软件的下载:而其它版 ...
- springboot security 权限控制 -- @PreAuthorize 的使用
1. 说明 security 鉴权方式常用的有两种配置,1.配置文件中配置:2.使用注解标注:他们都是基于 acess 表达式,如果需要自定义逻辑的鉴权认证,只需要自定义 access 表达式即可.本 ...
- js下载附件(文件时候),文件名一直不出现乱码
if (lastUrl.name) { //我们后端很奇怪有时候是个对象属性,有时候是个string window.open(url + `?attname=${lastUrl.name}`); } ...
- 语言模型的预训练[6]:思维链(Chain-of-thought,CoT)定义原理详解、Zero-shot CoT、Few-shot CoT 以及在LLM上应用
大语言模型的预训练[6]:思维链(Chain-of-thought,CoT)定义原理详解.Zero-shot CoT.Few-shot CoT 以及在LLM上应用 1.思维链定义 背景 在 2017- ...
- C/C++ Qt 监控文件状态变化
实现对特定文件的监控,Qt中提供了QFileSystemWatcher调用这个接口可以快速实现监控功能,当有文件发生变化是自动触发并输出文件具体信息. filesystem.h #ifndef FIL ...
- MarkDown文件插入公式(常用格式)
1.插入公式 markdown支持插入公式,书写公式需要按照特定格式来写,涉及到希腊字母.符号.角标.基本语法等内容需要熟悉, 1.1 句中插入公式 表达式前后插入$即可 ,比如$\alpha$,显示 ...
- C#/.NET该如何自学入门?
前言 随着DotNetGuide技术社区交流群的不断壮大(目前4个群都已经满500人,已开5群现已有180多个小伙伴),越来越多应届生和其他领域的小伙伴加入了我们这个大家庭.在此期间我在个人微信.公众 ...
- 轻量级按键动作识别模块(C语言)
1.前言 继嵌入式(单片机)裸机 C 语言开发 + 按键扫描(模块分层/非阻塞式)文章后,原来的按键识别基本能满足大部分需求,但是对于双击和多击等多样化的功能需求并不能满足,因此对整个按键动作识别模块 ...
- P10033 题解
不喜欢特判?不喜欢分讨?不喜欢被卡 corner?不喜欢证明?不喜欢动脑子? 那就看这篇题解! 感性思路 首先感性地感受一下题目宽泛的限制条件题解区各种花式的构造方法就不难想出,符合条件的序列实在很多 ...