ECMAScript2023你学习了吗?

一、ES2023 Features

  • 【Array find from last】 从头到尾搜索数组:findLast() 、findLastIndex()
  • 【Hashbang Grammar】Hashbang 语法
  • 【Symbols as WeakMap keys】Symbol 作为 WeakMap 的键
  • 【Change array by copy】通过副本更改数组:toReversed()、toSorted()、toSpliced()、with()

二、数组倒序查找

Array.prototype.findLast 和 Array.prototype.findLastIndex
let nums = [5,4,3,2,1];
let lastEven = nums.findLast((num) => num % 2 === 0); // 2
let lastEvenIndex = nums.findLastIndex((num) => num % 2 === 0); // 3

三、Hashbang 语法

#! for JS
此脚本的第一行以 #!开头,表示可在注释中包含任意文本。
Hashbang 就是想为 JavaScript 脚本引入了#!命令,这个命令写在脚本文件或者模块文件的第一行

#!/usr/bin/env node
// in the Script Goal
'use strict';
console.log(1);

在这里插入图片描述

四、将符号作为 WeakMap 键

在弱集合和注册表中使用符号
注意:注册的符号不可作为 weakmap 键。

学过ES6就知道,只能使用一个对象作为 WeakMapkey

const w = new WeakMap()
const user = { name: 'zz' }w.set(user, 'boy')
console.log(w.get(user))  // 'boy'

现在我们使用Symbol作为WeakMapkey

const w = new WeakMap()
const user = Symbol('zz')w.set(user, 'boy')
console.log(w.get(user))  // 'boy'

五、通过副本更改数组

此次公布的新方法正是toSorted、toReversed、toSpliced 和 with 都能复制原始数组、变更副本再返回结果。

· reverse() 的非破坏性版本:toReversed()
· sort() 非破坏性版本:toSorted(compareFn)
· splice() 非破坏性版本:toSpliced(start, deleteCount, …items)

1、Array.prototype.toSorted

const languages = ["JavaScript", "TypeScript", "CoffeeScript"];
const sorted = languages.toSorted();
console.log(sorted); //  [ 'CoffeeScript', 'JavaScript', 'TypeScript' ]
console.log(languages); // [ 'JavaScript', 'TypeScript', 'CoffeeScript' ]

除了复制之外,sort 函数还会引发一些意想不到的行为,toSorted 也继承了这种特点。
所以在对带有重音字符的数字或字符串进行排序时,大家仍然要小心。比如准备一个 comparator 比较器函数(例如 String’s localeCompare)来生成当前查找的结果。


const numbers = [5, 3, 10, 7, 1];
const sorted = numbers.toSorted();
console.log(sorted); // [ 1, 10, 3, 5, 7 ]const sortedCorrectly = numbers.toSorted((a, b) => a - b);
console.log(sortedCorrectly); // [ 1, 3, 5, 7, 10 ]

const strings = ["abc", "äbc", "def"];
const sorted = strings.toSorted();
console.log(sorted); //  [ 'abc', 'def', 'äbc' ]const sortedCorrectly = strings.toSorted((a, b) => a.localeCompare(b));
console.log(sortedCorrectly); //  [ 'abc', 'äbc', 'def' ]

2、Array.prototype.toReversed

const languages = ["JavaScript", "TypeScript", "CoffeeScript"];
const reversed = languages.toReversed();
console.log(reversed); //  [ 'CoffeeScript', 'TypeScript', 'JavaScript' ]

3、Array.prototype.toSpliced

const languages = ["JavaScript", "TypeScript", "CoffeeScript"];
const spliced = languages.toSpliced(2, 1, "Dart", "WebAssembly");
console.log(spliced);
// [ 'JavaScript', 'TypeScript', 'Dart', 'WebAssembly' ]

4、Array.prototype.with

with 函数所代表的复制方法,等同于使用方括号表示方来更改数组内的一个元素。因此,与其通过以下方式直接更改数组:

const languages = ["JavaScript", "TypeScript", "CoffeeScript"];
languages[2] = "WebAssembly";
console.log(languages);
// => [ 'JavaScript', 'TypeScript', 'WebAssembly' ]

可以复制该数组再执行更改:

const languages = ["JavaScript", "TypeScript", "CoffeeScript"];
const updated = languages.with(2, "WebAssembly");
console.log(updated);
// => [ 'JavaScript', 'TypeScript', 'WebAssembly' ]
console.log(languages);
// => [ 'JavaScript', 'TypeScript', CoffeeScript' ]

此次发布的新方法不仅适用于常规的数组对象。您可以在任意 TypedArray 上使用 toSorted、toReversed 和 with 方法,包括 Int8Array 到 BigUint64Array 等各种类型。但因为 TypedArrays 没有 splice 方法,因此无法使用 toSpliced 方法。

六、浏览器支持 目前主流浏览器都以支持以上方法

七、ECMAScript2023你学习了吗?

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

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

相关文章

2016年五一杯数学建模C题二孩政策问题解题全过程文档及程序

2016年五一杯数学建模 C题 二孩政策问题 原题再现 多年来实施的严、紧计划生育政策对控制人口增长起到关键作用。在优生优育政策的指引下,我国人口质量显著提高,但也带来了不利影响,生育率偏低、男女比例失衡、人口老龄化情况严重等问题。2…

Go 基本语法

一、​​​​变量定义方法 var 定义变量 var 变量名 类型 表达式 var name string "Snail" var age int 21 var isOK bool bool 2.类型推导方式定义变量 a 在函数内部,可以使用更简略的: 方式声明并初始化变量**注意:**短变量只能用于声…

Java核心知识点整理大全20-笔记

目录 17. 设计模式 17.1.1. 设计原则 17.1.24. 解释器模式 18. 负载均衡 18.1.1.1. 四层负载均衡(目标地址和端口交换) 18.1.1.2. 七层负载均衡(内容交换) 18.1.2. 负载均衡算法/策略 18.1.2.1. 轮循均衡(Roun…

短视频账号矩阵系统开发--saas源头技术开发(手机版)

目前PC端网页版基本上已经很倦市场了,所以在这种情况下 ,我们已经专注开发短视频矩阵系统pc版3年了,目前我们这边核心技术优势就是都是自己一手搭建开发的并且我们的剪辑算法也是自己一手源头开发的,剪辑成本后期运营成本低&#…

上门预约互联网干洗店洗鞋店小程序开发

很多时候可能大家的衣服鞋子需要干洗,但又不想出门送去店里,大家就可以使用手机线上下单预约取货,会有专门的人上门来取衣服,让你能够轻松的进行洗护。 闪站侠洗衣洗鞋小程序,提供了足不出户就能预约人员上门去 衣送洗…

vue3+vite+ts项目打包时出错

项目中引入了element-plus国家化的配置,然后进行项目打包,报下面的错误 解决方法: 在main.ts中添加 // ts-ignore

Linux使用固定ip地址

设置静态ip,我们就需要修改 /etc/sysconfig/network-scripts/ifcfg-ens33 配置文件。 vim /etc/sysconfig/network-scripts/ifcfg-ens33 //进入网卡ens33的配置页面 (1) 将 BOOTPROTO dhcp 改成 BOOTPROTO static 也就是将动态ip,改成静态i…

损失函数总结(十六):NRMSELoss、RRMSELoss

损失函数总结(十六):MSLELoss、RMSLELoss 1 引言2 损失函数2.1 NRMSELoss2.2 RRMSELoss 3 总结 1 引言 在前面的文章中已经介绍了介绍了一系列损失函数 (L1Loss、MSELoss、BCELoss、CrossEntropyLoss、NLLLoss、CTCLoss、PoissonNLLLoss、Ga…

如何设置带有密码的excel只读模式?

Excel只读模式大家都不陌生,那大家知道带有密码的只读模式吗?今天给大家分享如何设置带有密码的只读模式。 打开excel文件,将文件进行【另存为】设置,然后停留在保存路径的界面中,我们点击下面的工具 – 常规选项 在常…

后台管理系统开源项目

最近项目没有什么事做,就自己整理,修改了一些vue2,react的后台管理系统项目,方便以后有需要可以直接提取,当然也方便了大家 vue2技术栈 lyl-vueProjectAdmin: vue2后台管理系统 react技术栈 lyl-reactAdminProject:…

Redis未授权访问-CNVD-2019-21763复现

Redis未授权访问-CNVD-2019-21763复现 利用项目: https://github.com/vulhub/redis-rogue-getshell 解压后先进入到 RedisModulesSDK目录里面的exp目录下,make编译一下才会产生exp.so文件,后面再利用这个exp.so文件进行远程代码执行 需要p…

mitmproxy安装以及模拟接口数据返回

使用pycharm直接安装,pip install mitmproxy 安装成功后直接使用命令mitmdump --version查看版本 然后自己本地下载https://mitmproxy.org/downloads/#10.1.1/ 之后一步步安装即可 安装成功后这里会出现一个.mitmproxy文件 双击这个文件进入开始安装证书 我…