现代 JavaScript 功能:ES3 中的新增功能

现代 javascript 功能:es3 中的新增功能

javascript 不断发展,每年都会带来一组新功能,旨在让开发人员的生活更轻松。最新的更新 es2023 包含了一些新工具,可以增强我们编写、读取和维护代码的方式。让我们深入了解您希望在项目中开始使用的一些出色功能。

1. 数组 findlast 和 findlastindex

您是否曾经需要从数组末尾开始查找某个项目? es2023 引入了 findlast 和 findlastindex,它们就是这样做的。

findlast:该方法查找数组中满足指定条件的最后一个元素。

  const numbers = [1, 2, 3, 4, 5];  const lasteven = numbers.findlast(num => num % 2 === 0); // 4  // find last user who is 18 years old in large array  const users = [/* array with 10000 users */];   users.findlast(user => user.age === 18);

findlastindex:此方法返回最后一个元素的索引。

  const lastevenindex = numbers.findlastindex(num => num % 2 === 0); // 3

这些方法非常适合您需要反转搜索逻辑的情况,使您的代码更清晰并且可能更高效。

2. javascript 文件中的 hashbangs (#!)

如果您正在用 javascript 编写命令行工具,您将会欣赏对 hashbangs 的新支持。通过添加#!在文件顶部,您可以直接指定解释器,使您的脚本无需外部命令即可执行。

#!/usr/bin/env nodeconsole.log("hello, world!");

这是一个小但方便的功能,特别是对于那些在 node.js 中构建 cli 工具的人来说。

立即学习“Java免费学习笔记(深入)”;

3. 符号作为 weakmap 键

以前,只有对象可以用作 weakmap 中的键,但 es2023 通过允许符号也改变了这一点。

const wm = new weakmap();const sym = symbol('key');wm.set(sym, 'value');console.log(wm.get(sym)); // 'value'// storing hidden game data that players can't easily access, such as secret unlock codes:const secretcode = symbol('vc-cheat-code');const gamedata = new weakmap();gamedata.set(secretcode, 'panzer-aspirine-bigbang-preciousprotection'); 

此增强功能使 weakmap 更加通用,特别是当您需要符号提供的独特、无碰撞键时。

4. 数组按方法分组

使用新的分组方法对数组元素进行分组变得更加容易。

group:此方法将数组组织成一个对象,其中键由您提供的函数确定,值作为与每个键匹配的元素数组。

  const animals = [    { type: 'mammal', name: 'dog' },    { type: 'bird', name: 'sparrow' },    { type: 'mammal', name: 'cat' },  ];  const grouped = animals.group(({ type }) => type);  console.log(grouped);  // {  //   mammal: [{ type: 'mammal', name: 'dog' }, { type: 'mammal', name: 'cat' }],  //   bird: [{ type: 'bird', name: 'sparrow' }]  // }

此功能非常适合需要快速高效地对数据进行分类的场景。

5. array.prototype.tosorted 和 array.prototype.toreversed()

使用 tosorted 对数组进行排序变得更加清晰。与改变原始数组的 sort 不同,tosorted 返回一个新的排序数组,而 toreversed 返回一个新的反转数组,保持原始数组不变。

const arr = [3, 1, 4, 1, 5];const sortedarr = arr.tosorted();console.log(sortedarr); // [1, 1, 3, 4, 5]console.log(arr); // [3, 1, 4, 1, 5]let data = [/* important data that shouldn't be modified */];let reverseddata = data.toreversed(); // safely reverse

当您需要在使用排序版本时保留原始数组时,此方法非常适合。

6. array.prototype.with

with 方法提供了一种通过替换特定索引处的元素来创建新数组的简单方法。

const numbers = [10, 20, 30, 40];const newnumbers = numbers.with(2, 25); // [10, 20, 25, 40]

当您想要不可变地更新数组时,此方法非常完美,从而可以更轻松地在函数式编程模式中管理状态。

7. promise.withresolvers

借助 promise.withresolvers,管理 promise 从未如此简单。这种新方法可以让您一次性创建一个 promise 及其解析和拒绝函数。

const { promise, resolve, reject } = Promise.withResolvers();setTimeout(() => resolve("done"), 1000);promise.then(console.log); // "done"

这是一种处理异步操作的简洁方式,特别是当您需要从其构造函数外部控制 promise 的结果时。

es2023 的浏览器支持

es2023 是 javascript 的最新版本,自从 2023 年刚刚完成以来,它是相当新的。这意味着并非所有网络浏览器都可以使用其新功能,但它们已经开始:

firefox、chrome 和 edge 确实支持某些功能 array.prototype.findlast() 和 array.prototype.findlastindex()safari 尚不支持任何这些功能。

node.js

node.js 19.0 及更高版本可以使用:array.prototype.findlast()array.prototype.findlastindex()预计在未来的更新中添加更多 es2023 功能。

转译器:
现在要使用新的 es2023 功能,开发人员可以使用 babel 等称为转译器的工具将 es2023 代码转换为更多浏览器可以理解的旧版本。这样,即使浏览器尚未准备好,您也可以开始使用新内容。

目前,对 es2023 的支持仍在不断增长。 firefox 和 chrome 等大型浏览器开始包含它的一些功能。有关支持内容和位置的详细信息,您可以查看我可以使用吗。使用转译器有助于使这些新功能在今天可用,同时我们等待浏览器在未来几年迎头赶上。

结论

es2023 带来了一系列新功能,使 javascript 更强大且更易于使用。从增强的数组方法到更好的承诺处理,这些更新都是为了让您的代码更干净、更高效。随着 javascript 的不断发展和发展,及时了解这些变化可确保您始终充分利用该语言。

参考:

tc39 提案ecma-262 草案mdn

以上就是现代 JavaScript 功能:ES3 中的新增功能的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1491060.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 13:40:10
下一篇 2025年12月19日 13:40:21

相关推荐

  • 构建乐观更新的数据表

    介绍 今天,我将分享如何使用现代 react 模式构建一个精美的食品数据库管理系统。我们将专注于创建一个具有无缝乐观更新的响应式数据表,将 tanstack query(以前称为 react query)的强大功能与 mantine 的组件库相结合。 项目概况 要求 在数据表中显示食品添加新项目并立…

    2025年12月19日
    000
  • 本地使用 $.get() 打开 HTML 文件出现错误,如何解决?

    本地使用$.get()打开html文件 问题描述:在浏览器编译器中打开HTML文件正常,但在本地文件夹下打开时却出现错误,如下所示: 原因分析 出现该问题是由于跨域限制造成的。出于安全考虑,浏览器不允许JS直接访问本地文件。 立即学习“前端免费学习笔记(深入)”; 解决办法 有两种解决办法: 使用W…

    2025年12月19日
    000
  • 本地 HTML 文件打开时遇到跨域问题,如何解决?

    $.get() 本地打开 HTML 文件 在本地文件夹中打开 HTML 文件时遇到跨域问题,这是由于浏览器安全机制所致,禁止 JS 直接访问本地文件。 解决办法: 使用 Web 服务器或 HTTP 服务器:将代码放置在 Web 服务器上(例如 Apache、IIS)或使用 HTTP 服务器运行,即可…

    2025年12月19日
    000
  • Nextjs 身份验证

    从 next.js 15 开始,处理身份验证变得更加强大和灵活,特别是凭借其先进的服务器组件、actions api 和中间件功能。在本文中,我们将探讨在 next.js 15 应用程序中实现身份验证的最佳实践,涵盖服务器组件、中间件、操作和会话管理等基本主题。 目录 next.js 15 中的身份…

    2025年12月19日
    000
  • 令人震惊!这种跨组件技巧会让react-query用户大汗淋漓

    哇,我的前端开发者们!今天,我想与大家分享一个非常有用的功能 – 跨组件触发请求。您是否经常绞尽脑汁试图实现平滑的分页列表?别担心,我发现了一个超级方便的工具,它对我帮助很大!我兴奋得要跳起来! alovajs – 你听说过吗?它是下一代请求工具,而不仅仅是一个简单的 htt…

    2025年12月19日
    000
  • 如何在 JavaScript 中使用代理对象

    javascript 中的对象是有用的数据类型,让我们可以使用简单的键值对定义复杂的数据,例如字典。有时,您可能想要更改 javascript 对象的默认工作方式。这就是代理对象有用的地方。在本文中,我们将讨论什么是代理对象、它们为何有用以及如何使用它们。 什么是代理对象? 在了解什么是代理对象之前…

    2025年12月19日
    000
  • 面向未来的身份验证:从规则和挂钩转向行动

    auth0 是一个身份和访问管理 (iam) 平台,可简化应用程序中身份验证和授权的管理。我们开发人员依靠 auth0 规则和 hooks 来自定义身份验证过程。然而,随着 auth0 actions 的引入,现在有一个更灵活、可维护和现代的解决方案来实现自定义身份验证逻辑。 为什么要迁移?随着我们…

    2025年12月19日
    000
  • 使用不可构造类型的 TypeScript 中的丰富编译时异常

    typescript 的类型系统很强大,但它的错误消息有时可能很神秘且难以理解。在本文中,我们将探索一种使用不可构造类型来创建清晰的、描述性的编译时异常的模式。这种方法通过使无效状态无法用有用的错误消息来表示来帮助防止运行时错误。 模式:具有自定义消息的不可构造类型 首先,我们来分解一下核心模式: …

    2025年12月19日
    000
  • js如何调用硬件驱动

    在 JavaScript 中调用硬件驱动有两种方式:操作系统提供的 API(如 DirectX、IOCTL),允许 JavaScript 代码访问硬件设备。浏览器提供的 Web API(如 Web Audio API、Web MIDI API),提供特定的硬件功能访问权限。 怎样在 JavaScri…

    2025年12月19日
    000
  • 用于高效代码管理的 React 工具集

    简介 本文档概述了使用一组精选的工具和最佳实践来构建和管理 react 应用程序的综合方法。通过遵守这些准则,您可以创建可扩展、可维护且高效的应用程序。 状态管理 祖斯坦: 目的:提供一种简单且高性能的方法来管理全局应用程序状态。好处:清晰简洁的api。高效的更新和性能优化。与应用程序的其他部分轻松…

    好文分享 2025年12月19日
    000
  • 使用 AWS SES 发送电子邮件:综合指南

    aws simple email service (ses) 是一种功能强大、经济高效的解决方案,可以帮助您安全地发送电子邮件,无论是用于交易消息、营销活动还是自动通知。 在这篇博文中,我们将探讨如何使用 aws ses 发送电子邮件,涵盖各种用例,例如发送 html 模板、附件,甚至日历事件。我们…

    2025年12月19日
    000
  • 代理设计模式

    在我之前的博客中,我探索了各种处理对象创建机制的创作设计模式。现在,是时候深入研究结构设计模式,它重点关注如何组合对象和类以形成更大的结构,同时保持它们的灵活性和高效性。让我们从代理设计模式开始 javascript 中的代理设计模式 代理设计模式是一种结构设计模式,它提供一个对象代表另一个对象。它…

    2025年12月19日
    000
  • 理解 JavaScript 对象和函数中的“this”

    js 对象作用域中的 this 关键字 在 javascript 中,了解 this 关键字的内容、方式和位置可能是编写实际有效的代码和在编码时抓狂的区别。 这个关键字 在javascript中,这是一个关键字(保留字),也就是说,它不能用作变量名。 在 javascript 代码中,这用于表示范围…

    2025年12月19日
    000
  • 了解 JavaScript 中的提升:综合指南

    javascript 中的提升 提升是一种行为,其中变量和函数声明在之前被移动(或“提升”)到其包含范围(全局范围或函数范围)的顶部代码被执行。这意味着您可以在代码中实际声明变量和函数之前使用它们。 变量提升 变量 用 var 声明的变量被提升到其作用域的顶部,但它们的值直到代码中发生赋值的地方才会…

    2025年12月19日
    000
  • JavaScript 命名约定:变量和函数命名指南

    javascript 中的命名约定对于编写干净、可读和可维护的代码至关重要。无论您是在处理个人项目还是与团队协作,一致且有意义的名称都可以提高代码质量、提高调试效率并减少引入错误的机会。 1。使用描述性且有意义的名称 javascript 中的名称应该清晰且具有描述性,以便其他人轻松理解代码所代表的…

    2025年12月19日
    000
  • 字符串与字符串

    细绳 小写字符串是javascript中的原始数据类型。 用这种类型创建的字符串不是对象,但 javascript 会自动用 string 对象包装它们(这称为“装箱”)。 let imastring = “hello”;console.log(typeof imastring); // “stri…

    2025年12月19日
    000
  • PL/SQL 中的关联数组

    pl/sql 中的关联数组 关联数组,也称为索引表,是一种存储键值对的 pl/sql 集合类型。它类似于其他编程语言中的字典或哈希表。关联数组非常强大,因为它们可以动态增长或收缩,并且您可以使用键(整数或字符串)访问它们的元素。 关联数组的特点: 1。动态尺寸: 与嵌套表或 varray 等其他集合…

    2025年12月19日
    000
  • AWS 用户指南

    以下是学习aws服务时推荐的学习顺序: 我。基本概念和控制台操作 1. first, understand the basic concepts of cloud computing, including iaas (infrastructure as a service), paas (platf…

    2025年12月19日
    000
  • 创建您自己的 npm 库

    介绍 react.js、three.js 等我们平时使用的优​​秀库其实都可以自己创建。我发布这篇文章是对加拿大一所大学创建图书馆课程的回顾。 先决条件 node.js 必须可用。安装 node.js 即可使用 npm。 将您自己的库发布到 npm 项目设置 首先,创建一个 npm 帐户。 npmj…

    2025年12月19日 好文分享
    000
  • JavaScript 提升解释以提高您的编码技能

    javascript 是一种经常会让新手感到困惑的语言。其中一种行为是提升,每个 javascript 开发人员都应该理解这一概念,以便编写更可预测的代码。在本文中,我们将探讨什么是提升、它如何与变量和函数配合使用,以及如何避免与之相关的陷阱。 什么是提升? 提升是指 javascript 将声明(…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信