ES2024即将发布!5个可能大火的JS新方法

文章目录

    • 01:Promise.withResolvers
    • 02:Object.groupBy()
    • 03:Temporal
    • 04:Records 和 Tuples
    • 05:装饰器(Decorators)
    • 其他

在这里插入图片描述

ECMAScript 2024(ES15) 即将发布(2024年6月),新的版本带来了非常多全新的特性。其中有 5 个全新的 JS 方法,可以大幅度提升我们的工作效率,从而让我们得到更多的摸鱼时间。咱们一起来看看吧!

01:Promise.withResolvers

这个功能引入了一个新方法来创建一个 promise,直接返回 resolve 和 reject 的回调。使用 Promise.withResolvers ,我们可以创建直接在其执行函数之外 resolve 和 reject

const [promise, resolve, reject] = Promise.withResolvers();setTimeout(() => resolve('Resolved after 2 seconds'), 2000);promise.then(value => console.log(value));

02:Object.groupBy()

Object.groupBy() 方法是一项新添加的功能,允许我们按照特定属性将数组中的 对象分组,从而使数据处理变得更加容易。

const pets = [{ gender: '男', name: '张三' },{ gender: '女', name: '李四' },{ gender: '男', name: '王五' }
];const res = Object.groupBy(pets, pet => pet.gender);
console.log(res);
// 输出:
// {
//   女: [{ gender: '女', name: '李四' }]
//   男: [{ gender: '男', name: '张三' }, { gender: '男', name: '王五' }],
// }

03:Temporal

Temporal提案引入了一个新的API,以更直观和高效的方式 处理日期和时间。例如,Temporal API提供了新的日期、时间和持续时间的数据类型,以及用于创建、操作和格式化这些值的函数。

const today = Temporal.PlainDate.from({ year: 2023, month: 11, day: 19 });
console.log(today.toString()); // 输出: 2023-11-19const duration = Temporal.Duration.from({ hours: 3, minutes: 30 });
const tomorrow = today.add(duration);
console.log(tomorrow.toString()); // 输出: 2023-11-20

04:Records 和 Tuples

Records 和 Tuples 是全新的数据结构,提供了一种更简洁和类型安全的方式来创建对象和数组。

  • Records 类似于对象,但具有具体类型的固定属性集。
  • Tuples 类似于数组,但具有固定长度,每个元素可以具有不同类型。
let record = #{id: 1,name: "JavaScript",year: 2024
};
console.log(record.name); // 输出: JavaScript

05:装饰器(Decorators)

装饰器(Decorators)是一种提议的语法,用于添加元数据或修改类、函数或属性的行为。装饰器可用于实现各种功能,如日志记录、缓存和依赖注入。

function logged(target, key, descriptor) {const original = descriptor.value;descriptor.value = function(...args) {console.log(`Calling ${key} with`, args);return original.apply(this, args);};return descriptor;
}class Example {@loggedsum(a, b) {return a + b;}
}const e = new Example();
e.sum(1, 2); // 输出:[1, 2]

其他

ES15 还提供了很多其他的新提案,比如:新的正则v、管道符|>String.prototype.isWellFormed()ArrayBuffer.prototype.resize 等等。大家有兴趣的同学可以额外到 mdn 网站上进行了解~~

前端训练营:1v1私教,终身辅导计划,帮你拿到满意的 offer 已帮助数百位同学拿到了中大厂 offer。欢迎来撩~~~~~~~~

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数字IC/FPGA】手撕代码:模3检测器(判断输入序列能否被3整除)

今天我们来手撕一个常见的笔试题,使用的方法是三段式Moore状态机。 题目描述: 输入端口是串行的1bit数据,每个时钟周期进来一位新数据后,实时检查当前序列是否能整除3,若能则输出1,否则输出0。 例如&#…

【Redis 二】Redis客户端(Jedis、SpringDataRedis、RedisTemplate)

1. Redis客户端 Jedis 以redis命令作为方法名称,学习成本低,但是Jedis实例是线程不安全的,多线程环境下需要基于连接池来使用(必须为每个线程分配独立的Jedis连接) lettuce 基于Netty实现,支持同步、异步和…

“花小钱”解决竞赛训练“大问题”,赛宁首发竞赛专项练习本AdBook

想在网络安全竞赛上取得好成绩的你,还在为下面这些问题犯难吗? 1-专业竞赛平台价格过高,没有充足预算购买! 2-现有练习平台和竞赛比赛平台不一样,没法提前去现场训练! 3-题海战术费事费力,没法…

Java 面试宝典:请说下你对 Netty 中Reactor 模式的理解

大家好,我是大明哥,一个专注「死磕 Java」系列创作的硬核程序员。 本文已收录到我的技术网站:https://skjava.com。有全网最优质的系列文章、Java 全栈技术文档以及大厂完整面经 回答 Reactor 模式是一种高效处理并发网络事件的设计模式&…

【IntelliJ IDEA】运行测试报错解决方案(附图)

IntelliJ IDEA 版本 2023.3.4 (Ultimate Edition) 测试报错信息 命令行过长。 通过 JAR 清单或通过类路径文件缩短命令行,然后重新运行 解决方案 修改运行配置,里面如果没有缩短命令行,需要再修改选项里面勾选缩短命令行让其显示&#x…

CondaHTTPError: HTTP 429 TOO MANY REQUESTS for url

CondaHTTPError: HTTP 429 TOO MANY REQUESTS for url 安裝python 3.9時報錯: (base) [roothadoop103 software]# conda create --name superset python3.9具體報錯如下: Collecting package metadata (current_repodata.json): failed CondaHTTPError…

ROS2 学习(文章链接汇总)

参考引用 动手学 ROS2 持续更新中… ROS2 学习(一)ROS2 简介与基本使用 ROS2 学习(二)ROS2 节点通信详解 ROS2 学习(三)ROS2 机器人建模与仿真 ROS2 学习(四)Navigation2 机器人导航…

【深度学习】YOLO检测器的发展历程

YOLO检测器的发展历程 YOLO(You Only Look Once)检测器是一种流行的实时对象检测系统,以其速度和准确性而闻名。自2016年首次推出以来,YOLO已经成为计算机视觉领域的一个重要里程碑。在本博客中,我们将探讨YOLO检测器…

STM32八种I/O口模式

STM32八种I/O口模式 文章目录 STM32八种I/O口模式前言一、stm32八种I/O类型二、区别1.模拟输入2.浮空输入3.上拉输入4.下拉输入5.推挽输出6.开漏输出7.复用推挽输出8.复用推挽输出 总结 前言 作为两年嵌入式软件攻城狮,还没仔细去理解过STM32的GPIO的八种使用模式&…

5G无线接入网和接口协议

**部分笔记** 4.3无线协议架构 NR无线协议分为两个平面:用户面和控制面。 用户面(UP):协议栈及用户数据采用的协议 控制面(Control Plane,CP)协议栈即系统的控制信令传输采用的协议簇。 虚线标注的是信令数据的流向。一个UE在…

rust语言学习入门

rust语言简介 Rust是一门系统编程语言,最初由Mozilla研究院的Graydon Hoare设计创造,并在Dave Herman、Brendan Eich以及其他贡献者的协助下逐步完善。Rust的设计者在开发Servo浏览器布局引擎的过程中积累了经验,从而优化了Rust语…

宁波ISO22000认证:食品安全管理的国际标杆

🍎宁波ISO22000认证:🍉食品安全管理的国际标杆 随着全球化🌍的不断深入,食品安全问题👨‍👩‍👧越来越受到人们的👩‍👩‍👦‍👦关注…

Servlet Response的常用方法 缓存和乱码处理

前言 Servlet Response相关的信息,在service方法中使用的是HttpServletResponse,它继承自ServletResponse,扩展了Http协议相关的内容,下面简单记录一下它的基本用法。 一、response组成内容 以下是一个常见response响应的内容&…

Redis超好用可视化工具--RedisInsight工具安装

RedisInsight 保姆级安装 RedisInsight 是Redis官方出品的可视化redis管理工具,具有很强大的功能。接下来,让我们一起去完成这款炫酷工具的安装 1. RedisInsight 下载 RedisInsight 官方下载地址,https://redis.io/docs/connect/insight/ …

5.101 BCC工具之dirtop.py解读

一,工具简介 dirtop按目录显示读取和写入情况. 二,代码示例 #!/usr/bin/env pythonfrom __future__ import print_function from bcc import BPF from time import sleep, strftime import argparse import os import stat from subprocess import call# arguments exampl…

springboot在线学习做题答题统计系统-可视化分析系统

系统阐述的是使用可视化的学习系统的设计与实现,对于java、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计,描述,实现和分析与测试方面来表明开发的过程。开发中使用了 springboot框架和MySql数据库技术搭建系统的整体架构。…

Spring Boot 3跨域方案详解:告别CORS烦恼

在Spring Boot 3中,解决跨域请求(CORS,Cross-Origin Resource Sharing)的问题主要有以下几种方式: 1. 使用CrossOrigin注解 你可以直接在Controller类或者具体的请求处理方法上使用CrossOrigin注解来允许跨域请求。 …

Vue 中使用 Canvas 绘制二维码

在 Vue 中使用 Canvas 绘制二维码可分为以下几个步骤&#xff1a; 安装 qrcode 库&#xff1a;npm install qrcode --save 在 Vue 组件中导入 qrcode 库 import QRCode from qrcode;创建 Canvas 元素 <canvas ref"canvas"></canvas>在 Vue 组件的生…

CleanMyMac X2024专业免费的国产Mac笔记本清理软件

非常高兴有机会向大家介绍CleanMyMac X 2024这款专业的Mac清理软件。它以其强大的清理能力、系统优化效果、出色的用户体验以及高度的安全性&#xff0c;在Mac清理软件市场中独树一帜。 CleanMyMac X2024全新版下载如下: https://wm.makeding.com/iclk/?zoneid49983 一、主要…

挖一挖:PostgreSQL Java里的double类型存储到varchar精度丢失问题

前言 大概故事是这样的&#xff0c;PostgreSQL数据库&#xff0c;表结构&#xff1a; create table t1(a varchar);然后使用标准的Java jdbc去插入数据&#xff0c;其基本代码如下&#xff1a; import java.sql.*; public class PgDoubleTest {public static void main(Stri…