现代 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)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
日常编码的 JavaScript 要点
上一篇 2025年12月19日 13:40:10
Loadr,一种在 HTML 中无缝加载大图像的高效解决方案
下一篇 2025年12月19日 13:40:21

相关推荐

  • PHP多维数组到复杂XML结构的SOAP序列化实践

    本文旨在解决php多维数组向复杂soap xml结构序列化时遇到的“无法序列化结果”问题。通过深入理解soap xml的结构要求,包括命名空间和类型属性,文章将指导您如何构建符合特定xml schema的php关联数组。我们将利用`spatie/array-to-xml`库,详细演示其安装与使用方法…

    2026年5月10日
    000
  • CodeIgniter在IIS环境下实现URL重写与index.php移除指南

    本教程详细指导如何在IIS服务器上部署的CodeIgniter应用中,移除URL中不必要的index.php。核心解决方案涉及修改CodeIgniter的config.php文件,将$config[‘index_page’]设置为空,并辅以正确的IIS web.config重…

    2026年5月10日
    100
  • PHP代码注入检测日志分析_PHP代码注入日志检测方法详解

    答案:日志分析是发现PHP代码注入的关键手段,主要通过Web服务器访问日志、PHP错误日志、PHP-FPM日志及应用自定义日志等多源数据,结合grep、ELK、WAF等工具识别含eval()、system()、Base64编码、目录遍历等特征的异常请求,并建立基线、设置检测规则与自动化告警,配合事件…

    2026年5月10日
    000
  • Go语言与Microsoft SharePoint集成指南

    Go语言可以有效集成Microsoft SharePoint,主要通过两种途径:一是利用SharePoint提供的RESTful API进行数据交互,Go的标准HTTP客户端库即可轻松实现;二是通过SharePoint应用模型开发自托管应用,这种模型支持使用包括Go在内的任何语言编写后端逻辑。 1.…

    2026年5月10日
    000
  • Python继承中父类属性的初始化与访问策略

    本文深入探讨python面向对象编程中,子类如何正确初始化和访问父类属性。重点分析`super().__init__()`的工作原理,解释在继承链中参数传递的重要性,并提供通过子类构造函数传递参数的解决方案。此外,针对子类需要与特定父类实例交互的场景,文章还介绍了组合(composition)模式的…

    2026年5月10日
    000
  • 如何用Golang构建无状态微服务 分享Session管理最佳实践

    如何用Golang构建无状态微服务 分享Session管理最佳实践如何用Golang构建无状态微服务 分享Session管理最佳实践如何用Golang构建无状态微服务 分享Session管理最佳实践如何用Golang构建无状态微服务 分享Session管理最佳实践

    构建无状态微服务时,session管理可通过jwt、redis和统一认证中心实现。①使用jwt作为token,客户端存储,服务端无状态;②结合redis记录session元数据,支持主动失效;③设立统一认证中心,中间件校验token;④确保https传输安全并设计token刷新机制。 用 Golan…

    2026年5月10日 用户投稿
    000
  • C#如何处理异常?C# try-catch-finally最佳实践与常见错误规避

    正确使用 try-catch-finally 应捕获具体异常、用 finally 或 using 释放资源、避免空 catch 和裸抛异常,确保异常日志记录并保留堆栈跟踪,提升代码健壮性与可维护性。 在C#中,异常处理是保障程序稳定运行的重要机制。正确使用 try-catch-finally 结构不…

    2026年5月10日
    000
  • PHP处理大型文本文件转JSON:内存溢出诊断与优化实践

    本文深入探讨了PHP在将大型文本文件转换为结构化JSON时可能遇到的内存溢出问题。文章详细指导读者如何通过phpinfo()诊断并正确配置PHP的memory_limit,包括检查php.ini和.htaccess的潜在冲突,并提供了逐步增加内存限制的建议。同时,文章也分析了特定数据格式下内存消耗的…

    2026年5月10日
    100
  • Go语言中通过字符串动态创建类型实例的实践指南

    本文探讨了在Go语言中如何通过字符串动态创建类型实例。由于Go的静态类型特性和编译优化,直接实现此功能具有挑战性。文章详细介绍了两种主要方法:一是利用reflect包手动维护类型注册表并通过反射创建实例,并提供了示例代码和注意事项;二是推荐使用工厂模式或函数映射等更符合Go惯用法的替代方案,以提高代…

    2026年5月10日
    000
  • Nginx 子目录应用URI重写与参数传递教程

    本教程详细阐述了如何在Nginx中为PHP应用实现子目录URI重写,特别是如何从请求URI中剥离子目录路径并将其余部分作为参数传递给主入口文件。通过try_files和rewrite指令的组合,本教程提供了一种高效且准确的解决方案,以替代Apache .htaccess的RewriteRule功能,…

    2026年5月10日
    000
  • JavaScript中如何确保IoT安全?

    在javascript中确保iot安全可以通过以下步骤实现:1) 使用https协议进行安全通信;2) 实施oauth 2.0或jwt进行身份验证和授权;3) 避免使用不安全的javascript功能并验证输入;4) 使用异步编程优化性能;5) 定期更新和修补软件。 在JavaScript中确保Io…

    2026年5月10日
    000
  • 在R Markdown中运行JavaScript并导入库的正确姿势

    本文旨在解决在R Markdown文档中运行JavaScript代码并成功导入外部库(如MSAL)时遇到的常见问题。通过详细的代码示例和步骤说明,帮助读者掌握在R Markdown环境中集成JavaScript库的正确方法,实现更强大的交互式数据分析和可视化功能。 在R Markdown文档中集成J…

    2026年5月10日
    100
  • 使用PHP FirestoreClient发送自定义头部认证令牌的最佳实践

    本文旨在解决php firestoreclient在启用安全规则后遇到的“权限不足”错误。核心内容是,对于服务器端应用,应通过服务账户进行身份验证,并推荐在`firestoreclient`构造函数中使用`keyfilepath`参数明确指定服务账户密钥文件路径,以确保请求能够正确通过firesto…

    2026年5月10日
    000
  • php 收集哪些日志

    PHP 收集广泛类型的日志,包括错误、警告、通知、调试、HTTP 和事件日志。PHP 提供了几种方法来收集日志:使用内置函数、第三方库和 Web 服务器配置。对于最佳实践,建议启用日志记录、选择适当的日志级别、定期审查日志、使用日志文件轮换并保护日志文件。 PHP 日志收集 PHP 收集哪些日志? …

    2026年5月10日
    100
  • 实现平滑连续滑动但仅输出离散值的HTML Range Slider教程

    本教程详细介绍了如何创建一种HTML范围滑块(input type=”range”),使其在用户拖动时呈现出平滑连续的视觉效果,但实际输出的值却是预设的离散整数。核心方法是通过将滑块的step属性设置为一个很小的浮点数,从而实现细致的滑动,然后利用JavaScript将获取到…

    2026年5月10日
    000
  • 为什么未使用特定指令的输入框也会受到Vue自定义指令的影响?

    Vue自定义指令意外生效之谜:深入探讨 本文探讨一个常见的Vue.js开发问题:自定义指令在未绑定目标元素上生效的原因。我们分析一个案例,解释这种现象背后的机制,并提供解决方案。 案例描述 我们创建了一个全局自定义指令 validateNumber,用于限制输入框只能输入数字: Vue.direct…

    2026年5月10日
    000
  • JavaScript实现可折叠图片显示/隐藏功能教程

    JavaScript实现可折叠图片显示/隐藏功能教程JavaScript实现可折叠图片显示/隐藏功能教程JavaScript实现可折叠图片显示/隐藏功能教程JavaScript实现可折叠图片显示/隐藏功能教程

    本教程详细介绍了如何使用JavaScript和HTML创建一个可折叠的图片显示/隐藏功能。通过引入一个状态变量来管理图片当前是展开还是折叠,结合按钮点击事件动态切换图片的可见性及按钮文本,实现用户友好的交互式内容展示,适用于在网页中按需显示或隐藏图片资源。 1. 功能概述与核心思路 在网页开发中,有…

    2026年5月10日 用户投稿
    000
  • 在点击图片时动态显示其替代文本(Alt Text)的JavaScript教程

    在点击图片时动态显示其替代文本(Alt Text)的JavaScript教程在点击图片时动态显示其替代文本(Alt Text)的JavaScript教程在点击图片时动态显示其替代文本(Alt Text)的JavaScript教程在点击图片时动态显示其替代文本(Alt Text)的JavaScript教程

    本教程详细介绍了如何利用JavaScript在用户点击缩略图时,动态地在大图下方显示其对应的替代文本(Alt Text)。通过修改现有函数,我们能够获取图像的alt属性,并将其内容插入到指定的HTML元素中,从而提升用户体验和信息传达效率。 引言 在网页开发中,图片是不可或缺的元素。为了提升用户体验…

    2026年5月10日 用户投稿
    000
  • HTML表单如何实现白名单功能?怎样只允许授权用户?

    要实现%ignore_a_1%的白名单功能并确保只有授权用户操作,核心答案是必须依赖后端服务器进行严格的身份认证、会话管理、授权检查和数据验证,前端仅能提供用户体验层面的初步提示而不能保障安全;具体而言,首先通过用户身份认证(如用户名/密码或oauth)确认用户身份,服务器创建会话并返回标识符,后续…

    2026年5月10日
    800
  • 如何在C++中使用std::variant_C++ std::variant使用入门

    C++ std::variant 允许你存储不同类型的值,但同一时间只能存储一个。它就像一个类型安全的联合体,避免了传统联合体的一些问题。 解决方案: 要使用 std::variant,首先要包含头文件 。定义 std::variant 时,你需要指定它可以存储的所有类型。例如: #include …

    2026年5月10日
    000

发表回复

登录后才能评论
关注微信