2024年 JavaScript 最新功能一览

前言

随着 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)

goupBy-1.png

上面的代码按产品的属性值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)

groupBy-2.png

扩展

注意: 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-oneoperand-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外部访问resolvereject,在这之前我们都是通过以下形式解决的

let resolve, reject;
const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

现在我们可以使用Promise.withResolvers来优雅的解决这个问题,并且resolvereject函数现在与 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)

group-3.png

可用性: 适用于所有主要的 JavaScript 运行时和浏览器中。

技术前沿拓展

前端开发,你的认知不能仅局限于技术内,需要发散思维了解技术圈的前沿知识。细心的人会发现,开发内部工具的过程中,大量的页面、场景、组件等在不断重复,这种重复造轮子的工作,浪费工程师的大量时间。

介绍一款程序员都应该知道的软件JNPF快速开发平台,很多人都尝试用过它,它是功能的集大成者,任何信息化系统都可以基于它开发出来。

这是一个基于 Java Boot/.Net Core 构建的简单、跨平台快速开发框架。前后端封装了上千个常用类,方便扩展;集成了代码生成器,支持前后端业务代码生成,实现快速开发,提升工作效率;框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用;后端框架支持 Vue2、Vue3。如果你有闲暇时间,可以做个知识拓展。

看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/453595.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

无缝集成 MongoDB Relational Migrator,Tapdata 提供关系型到 MongoDB 实时迁移优化方案

在去年的 MongoDB 用户大会纽约站上,MongoDB 正式宣布全面推出新工具 MongoDB Relational Migrator(MongoDB RM),用以简化应用程序迁移和转换——即从传统关系型数据模型到现代的文档数据模型,助力组织快速提升运营效率…

Seata源码流程图

1.第一阶段分支事务的注册 流程图地址:https://www.processon.com/view/link/6108de4be401fd6714ba761d 2.第一阶段开启全局事务 流程图地址:https://www.processon.com/view/link/6108de13e0b34d3e35b8e4ef 3.第二阶段全局事务的提交 流程图地址…

考研失败, 学点Java打小工——Day2

1 关键字 标识符 基本数据类型 感觉和C没啥区别  1.1 关键字    public、static、void…  1.2 标识符    ①不能用关键字    ②由字母、数字、下划线、$组成,但是不能以数字开头    ③给变量起名字的时候要起有意义的名字:“见名知意” 1.…

常青内容与病毒式内容——哪个更适合 SEO?

常青内容是经得起时间考验的内容,而病毒式内容则是利用特定时代潮流的内容。 如果你曾经考虑过为网站添加内容,你可能听说过常青内容和病毒式内容这两个词。这两个词涵盖了网站所需的基本内容类型。 那么,这两者之间有什么区别?…

综合实验---Web环境搭建

题目: 服务器IP地址规划:client:12.0.0.12/24,网关服务器:ens36:12.0.0.1/24、ens33:192.168.10.1/24,Web1:192.168.10.10/24,Web2:192.168.10.20/24&#xf…

【网络安全】漏洞挖掘入门教程(非常详细)

温馨提示: 初学者最好不要上手就去搞漏洞挖掘,因为漏洞挖掘需要很多的系统基础知识和一些理论知识做铺垫,而且难度较大…… 较合理的途径应该从漏洞利用入手,不妨分析一些公开的CVE漏洞。很多漏洞都有比较好的资料,分…

(学习日记)2024.03.09:UCOSIII第十一节:就绪列表

写在前面: 由于时间的不足与学习的碎片化,写博客变得有些奢侈。 但是对于记录学习(忘了以后能快速复习)的渴望一天天变得强烈。 既然如此 不如以天为单位,以时间为顺序,仅仅将博客当做一个知识学习的目录&a…

mqtt mosquitto 资料

MQTT 3.1.1 协议中文版 | MQTT中文网mqtt中文网http://mqtt.p2hp.com/mqtt311MQTT Version 3.1.1http://docs.oasis-open.org/mqtt/mqtt/v3.1.1/os/mqtt-v3.1.1-os.html#_Toc398718009 mqttclient: 一个基于socket API之上的跨平台MQTT客户端,拥有非常简洁的API接口…

CVE-2023-38836 BoidCMSv.2.0.0 后台文件上传漏洞

漏洞简介 BoidCMS是一个免费的开源平面文件 CMS,用于构建简单的网站和博客,使用 PHP 开发并使用 JSON 作为数据库。它的安装无需配置或安装任何关系数据库(如 MySQL)。您只需要一个支持PHP 的Web服务器。在 BoidCMS v.2.0.0 中存…

水库泄洪监测预警系统解决方案

一、方案概述 近年来由于危险河道管理措施不到位,调峰水库泄水风险长期存在,信息通报制度缺失以及民众安全警觉性不高等因素导致的水库泄洪时冲走下游河道游客以及人民财产的事故频发。水库安全度汛是全国各地防汛抗洪的重中之重,而水库泄洪监…

【PyTorch][chapter 22][李宏毅深度学习]【无监督学习][ WGAN]【理论二】

前言: 本篇主要参考《Wasserstein GAN and the Kantorovich-Rubinstein Duality》 重点介绍一下 WGAN 的损失函数 是如何通过 Wasserstein Distance 变换过来的。 分为5步: 我们首先建立Wasserstein Distance 极小值形式, 经过对…

Linly-Talker智能数字人实时对话系统如何部署体验

环境: Linly-Talker 问题描述: Linly-Talker智能数字人实时对话系统如何部署体验 Linly-Talker 是一个智能 AI 系统,它将大型语言模型 (LLMs) 与视觉模型相结合,创造出一种新颖的人机交互方式。它集成了…

【HTML】1px边框与1px分割线

对比图 箭头标注的是处理过的 1px分割线 使用transform的scaleY进行缩小 码 <div class"mini-heriz"></div><br><div style"border: solid 1px black; width: 300px;height: 1px;"></div> <style> .mini-heriz {wi…

Linux编程4.2 网络编程-协议

1、为什么要有协议&#xff1f; 计算机网络中实现通信必须有一些约定&#xff0c;如对速率、传输代码、代码结构、传输控制步骤和出错控制等约定&#xff0c;这些约定即被称为通信协议。在两个节点之间要成功地进得通信&#xff0c;两个节点之间必须约定使用共同的“语言”&am…

MySQL用法---MySQL Workbench创建数据库和表

1. 连接数据库 打开软件&#xff0c;点击左下角卡片&#xff0c;输入设置的数据库密码&#xff0c;勾选单选框 2. 了解主页面的组成部分 3. 创建数据库 先点击工具栏的创建按钮 再输入数据库名称 点击 Apply 创建 4. 创建数据表 展开数据库&#xff0c;在Tables上右键&…

如何在WordPress网站上设置多语言展示

在今天的全球化世界中&#xff0c;拥有多语言网站对于吸引更广泛的受众至关重要。前不就我们遇到Hostease的客户咨询我们的在线客服&#xff0c;他想要对他的wordpress网站支持多语言。我们提供给客户可以尝试以下的插件来支持多语言。 在本教程中&#xff0c;我们将逐步介绍如…

cpp qt 一个奇怪的bug

今天在用cpp qt的时候发现了一个奇怪的东西 这是我的源代码 #include "mywidget.h" #include <QPushButton>myWidget::myWidget(QWidget *parent): QWidget(parent) {QPushButton * btn1 new QPushButton;btn1->show();btn1->setParent(this);btn1-&g…

冥想与AI:打造定制的放松体验

如今&#xff0c;在浏览网页或社交网络时&#xff0c;您似乎很难对一条条心理健康信息无动于衷。遇到这种情况的可不只是您。当今不断变化的时代给人们平添压力&#xff0c;企业纷纷利用智能技术满足人们的减压需求&#xff0c;让人们的生活多一些平和从容。 冥想就是一种练习呼…

低代码开发能否降低程序员门槛?技能需求分析与优势评估揭秘!

一&#xff0e;什么是低代码开发平台 低代码开发平台和零代码开发平台是近几年时兴的一种新的程序开发方法。该模式的特征是可以使用用户界面、拖拽操作等方式快速构建应用软件软件&#xff0c;从而减少开发者的学习标准&#xff0c;使每个人都能变成开发者。 但它仍然是基于…

别再写传统简历了!AI简历5个超实用的功能,助你求职一臂之力(强烈建议收藏)

你们在制作简历时,是不是基本只关注两件事:简历模板,还有基本信息的填写。 当你再次坐下来更新你的简历时,可能会发现自己不自觉地选择了那个“看起来最好看的模板”,填写基本信息,却没有深入思考如何使简历更具吸引力。这其实是一个普遍现象:许多求职者仍停留在传统简历…