你不知道的 ES2023

这篇具有很好参考价值的文章主要介绍了你不知道的 ES2023。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

6 月 27 日 ECMA 大会批准了 ECMAScript 2023 (es14)规范,意味着新的一些语法将正式成为标准。下面来看看 ECMAScript 2023 有哪些值得我们关注的新特性。

总览:

具体相关提案原文详情可以跳转:已完成提案

•从后往前查找数组

•Hashbang 语法

•Symbol 类型作为 WeakMap 类型的键

•不改变原数组的新的原型方法

从后往前查找数组

在 JavaScript 中,已有的 Array.prototype.find() 和 Array.prototype.findIndex() 两个方法是数组遍历中最常使用的两个方法,通常用来遍历查找数组中符合要求的项,但是目前这两种方法都是从前往后遍历的

const arr = [10, 20, 30, 40, 50];
arr.find(item => item > 30); // 40
arr.findIndex(item => item > 30); // 3

如果想要从后往前遍历,在以前必须先将数组进行反转,然后在对反转后的数组进行遍历查找,这无疑是非常违反直觉的事情,今年的标准就新增了两个数组遍历方法 Array.prototype.findLast() 和 Array.prototype.findLastIndex() ,通过名字也可以看出来他们的作用,用法和 find 和 findIndex 完全一致,唯一的区别就是它是从后往前遍历的,适用于数组和类数组

findLast(): 返回第一个查找到的元素,如果没有找到,返回 undefined

findLastIndex(): 返回第一个查找到的元素的索引,如果没有找到,返回 -1

const arr = [10, 20, 30, 40, 50];
arr.findLast(item => item > 30); // 50
arr.findLastIndex(item => item > 30); // 4
arr.findLast(item => item > 50); // undefined
arr.findLastIndex(item => item > 50); // -1

Hashbang 语法

Hashbang 注释是一种特殊的注释语法,其行为与单行注释 (//) 完全一样,只是它以 #! 开头,并且只在脚本或模块的最开始处有效。注意,#! 标志之前不能有任何空白字符。注释由 #! 之后的所有字符组成直到第一行的末尾;只允许有一条这样的注释。JavaScript 中的 hashbang 注释类似于 Unix 中的 shebang,它提供了一个特定的 JavaScript 解释器的路径,用它来执行这个脚本。

// 写在脚本文件第一行
#!/usr/bin/env node
'use strict';
console.log(1);


// 写在模块文件第一行
#!/usr/bin/env node
export {};
console.log(1);

这样就可以直接运行脚本代码了

# 以前执行脚本
node demo.js


# 有了 hashbang 之后执行脚本
./demo.js

只有当脚本直接在 shell 中运行时,Hashbang 语法才有语意意义,其他环境下 JavaScript 解释器会把它视为普通注释。

Symbol 类型作为 WeakMap类型的键

在之前,WeakMap 类型只允许使用对象作为键,这是 WeakMap 的一个限制,新的标准扩展了 WeakMap API,允许使用唯一的 Symbol 类型作为键。这样更容易创建和共享 key。

const weakMap = new WeakMap();


// 更具象征意义的key
const key = Symbol('my ref');
const someObject = { /* data */ };


weakMap.set(key, someObject)

除此之外,该标准还解决了另一个在 Stage2 阶段的提案 元组与记录 中引入的问题:如何在原始数据类型中,引用和访问非原始值?由元组和记录的提案中,元组和记录类型中不能包含对象、函数和方法,当这样做时会抛出 TypeError 异常。

const server = #{
  port: 8080,
  handler: function (req) { /* ... */ } // TypeError
}

这种限制存在是因为元组和记录提案的关键目标之一是默认保证数据的深度不可变性和结构相等性。接受 Symbol 值作为 WeakMap 键将允许 JavaScript 库实现自己的类似的 RefConllection 的东西,它可以重用的同时不会随着时间的推移泄漏内存。

class RefBookkeeper {
  #references = new WeakMap();
  ref(obj) {
    const sym = Symbol();
    this.#references.set(sym, obj);
  }
  deref(sym) { return this.#references.get(sym); }
}
globalThis.refs = new RefBookkeeper();


const server = #{
  port: 8080,
  handler: refs.ref(function (req) { /* ... */ })
}
refs.deref(server.handler)({ /* ... */})

不改变原数组的新的原型方法

这次标准新增了 4 个不改变原数组的原型方法:

Array.prototype.toReversed() -> Array

Array.prototype.toSorted(compareFn) -> Array

Array.prototype.toSpliced(start, deleteCount, ...items) -> Array

Array.prototype.with(index, value) -> Array

在 JavaScript 中,数组中的大部分方法是非破坏性的,不会改变原数组,比如 filter() 方法

const arr = ['a', 'b', 'b', 'c'];
const result = arr.filter(x => x !== 'b');
console.log(result); // ['a', 'c']

当然,也存在一些方法,是改变原数组的,比如 **sort()** 方法

const arr = ['c', 'a', 'b'];
const result = arr.sort();
console.log(result); // ['a', 'b', 'c']

在数组方法中,下面的方法是具有破坏性的:

reverse()

sort()

splice()

如果想要使用这些数组方法但是又不改变原数组,我们需要先创建原数组的副本,然后对数组副本使用这些方法。因此就引入了这三个方法的非破坏性的版本,就不需要再创建数组副本进行操作了。

除此之外,还有一个新的非破坏性的方法: with(index, value)。该方法会以非破坏性的方式,替换给定参数 index 位置的数组元素,即 arr[index] = value 的非破坏性版本。

// toReversed()
const arr = ['a', 'b', 'c'];
const result = arr.toReversed();
console.log(result); // ['c', 'b', 'a']
console.log(arr);    // ['a', 'b', 'c']


// toSorted()
const arr = ['c', 'a', 'b'];
const result = arr.toSorted();
console.log(result);  // ['a', 'b', 'c']
console.log(arr);     // ['c', 'a', 'b']


// toSpliced()
const arr = ['a', 'b', 'c', 'd'];
const result = arr.toSpliced(1, 2, 'X');
console.log(result); // ['a', 'X', 'd']
console.log(arr);    // ['a', 'b', 'c', 'd'], 无法再得到已经删除的元素


// with()
const arr = ['a', 'b', 'c'];
const result = arr.with(1, 'X');
console.log(result);  // ['a', 'X', 'c']
console.log(arr);     // ['a', 'b', 'c

这些方法适用于所有数组,也适用于定型数组 TypedArray。在上面提到的元组提案,这些方法也是同样适用的,元组相当于不可变的数组,所以元组不支持破坏性的方法,将这些破坏性的方法引入非破坏性的版本对元组是非常有帮助的。

End

以上就是 ES2023 全部标准化的提案了,目前 Chrome 浏览器已经全部支持,可以在调试工具中尝试新的特性。

作者:京东零售 谢天

来源:京东云开发者社区文章来源地址https://www.toymoban.com/news/detail-618157.html

到了这里,关于你不知道的 ES2023的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 你不知道的几个JavaScript 高阶技巧

    基础: 高阶: 基础: 高阶: 基础: 高阶: 基础: 高阶: 基础: 高阶: 基础: 高阶: 基础: 高阶: 基础 高阶 更简单的方法: null 是一个  value ,然而 undefined 不是. null 像一个空盒子,但 undefined 不是. 传递 null 时, 不采用 默认值。然而,当未定义或未传递任何内容时,

    2024年02月08日
    浏览(53)
  • element - - - - - 你不知道的loading使用方式

    求人不如求己 关于页面交互,最害怕的就是接口等待时间太长,用户体验不好。 而如何提高用户体验呢? 接口返回速度 这个是后端同学去优化,前端同学也可通过 加载loading 来优化体验 Element 提供了两种调用 Loading 的方法:指令和服务 详情可查看官网 : Element Loading 加载

    2024年02月02日
    浏览(38)
  • 关于MySQL日期函数你不知道的用法

    MySQL提供了丰富的日期和时间函数,用于处理和操作日期时间数据。本篇博文将深入介绍一些常用的MySQL日期函数,通过详细的例子带你了解这些函数的用法和实际应用。 CURDATE() 函数返回当前日期,不包含时间信息。 结果可能类似于: NOW() 函数返回当前日期和时间。 结果可

    2024年01月18日
    浏览(43)
  • 【MySQL】不允许你不知道如何插入数据

    🎬 博客主页:博主链接 🎥 本文由 M malloc 原创,首发于 CSDN🙉 🎄 学习专栏推荐:LeetCode刷题集 🏅 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正! 📆 未来很长,值得我们全力奔赴更美好的生活✨ 😁大家好呀,今天是我第N次写MySQL,也是最近才学习MySQL,也想着记录一

    2024年02月15日
    浏览(31)
  • 下载加速小妙招,我不允许你不知道

    在你深夜刷剧刷得最激动的时候,屏幕突然打转转…… 在你打游戏打到最精彩的团战时刻,你的网络突然404…… 在你激情澎湃,好不容易抢到心爱之物要付款的时候,页面却突然加载不出来…… 如果真要碰到这些事情,光是想一想就会让人觉得非常崩溃。想要避免这些情况

    2024年02月02日
    浏览(45)
  • Java开发 - 你不知道的JVM优化详解

    代码上的优化达到一定程度,再想提高系统的性能就很难了,这时候,优秀的程序猿往往会从JVM入手来进行系统的优化。但话说回来,JVM方面的优化也是比较危险的,如果单单从测试服务器来优化JVM是没有太大的意义的,不同的服务器即使环境相同,访问流量方面也是不一样

    2024年02月07日
    浏览(42)
  • ECMAScript (ES)简介

    ECMAScript (ES) 是一种标准化的脚本语言规范,它是 JavaScript 语言的基础 基本语法结构: 变量声明 : 使用 var (ES5 及以前版本)、 let (ES6 起引入)或 const (ES6 起引入)声明变量。 数据类型 : 基本数据类型: number 、 string 、 boolean 、 null 、 undefined 、 symbol (ES6 新增

    2024年04月11日
    浏览(40)
  • 你不知道的 Git 技巧:如何实现核心代码保护

    大家好,我是 shixin。 前段时间完成了一个核心代码保护的功能,目标是在关键代码被修改及时同步给其他人,避免没经过 review 就上线导致问题,提示的效果图如下: 在实现的过程中,用到一些平时使用不多的 Git 技巧,这篇文章来总结一下。 这个比较简单,通过 git confi

    2023年04月15日
    浏览(42)
  • 那些你不知道的类和对象的知识

    🎈个人主页:🎈 :✨✨✨初阶牛✨✨✨ 🐻推荐专栏1: 🍔🍟🌯C语言初阶 🐻推荐专栏2: 🍔🍟🌯C语言进阶 🔑个人信条: 🌵知行合一 🍉本篇简介::深入理解构造函数,介绍友元函数,内部类等等 金句分享: ✨努力不一定是为了钱,还有骨子里的自信与淡定✨ 前面,我们已经学习过

    2024年02月13日
    浏览(30)
  • 不允许你不知道的 MySQL 优化实战(一)

    多余的话就不说了,直接上菜! 1、查询SQL尽量不要使用select *,而是select具体字段。 反例子: 正例子: 理由: 只取需要的字段,节省资源、减少网络开销。 select * 进行查询时,很可能就不会使用到覆盖索引了,就会造成回表查询。 2、如果知道查询结果只有一条或者只要

    2024年02月16日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包