0

0

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

王林

王林

发布时间:2024-09-03 13:34:16

|

1136人浏览过

|

来源于dev.to

转载

现代 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 node

console.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 返回一个新的反转数组,保持原始数组不变。

动力先锋仿阿里巴巴B2B电子商务系统
动力先锋仿阿里巴巴B2B电子商务系统

前台功能介绍:1、网页首页显示有高级会员推荐,精品推荐,商业机会分类列表,最新供求信息,网站动态,推荐企业,行业动态等;2、商业机会栏目功能有:二级分类,已经带有详细分类的数据库,后台可以更改增加操作,并可以推荐公司,栏目分为分类显示信息,最新的采购、供应、合作和代理信息,搜索时同样按分类,信息,时间,交易类型等搜索;3、展厅展品栏目功能:二级分类,已经带有详细分类的数据库,后台可以更改增加操作,

下载
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 的不断发展和发展,及时了解这些变化可确保您始终充分利用该语言。

参考:

  1. tc39 提案
  2. ecma-262 草案
  3. mdn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

843

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

747

2023.11.06

edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

1446

2023.08.21

IE浏览器自动跳转EDGE如何恢复
IE浏览器自动跳转EDGE如何恢复

ie浏览器自动跳转edge的解决办法:1、更改默认浏览器设置;2、阻止edge浏览器的自动跳转;3、更改超链接的默认打开方式;4、禁用“快速网页查看器”;5、卸载edge浏览器;6、检查第三方插件或应用程序等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

382

2024.03.05

如何解决Edge打开但没有标题的问题
如何解决Edge打开但没有标题的问题

若 Microsoft Edge 浏览器打开后无标题(窗口空白或标题栏缺失),可尝试以下方法解决: 重启 Edge:关闭所有窗口,重新启动浏览器。 重置窗口布局:右击任务栏 Edge 图标 → 选择「最大化」或「还原」。 禁用扩展:进入 edge://extensions 临时关闭插件测试。 重置浏览器设置:前往 edge://settings/reset 恢复默认配置。 更新或重装 Edge:检查最新版本,或通过控制面板修复

945

2025.04.24

sort排序函数用法
sort排序函数用法

sort排序函数的用法:1、对列表进行排序,默认情况下,sort函数按升序排序,因此最终输出的结果是按从小到大的顺序排列的;2、对元组进行排序,默认情况下,sort函数按元素的大小进行排序,因此最终输出的结果是按从小到大的顺序排列的;3、对字典进行排序,由于字典是无序的,因此排序后的结果仍然是原来的字典,使用一个lambda表达式作为key参数的值,用于指定排序的依据。

395

2023.09.04

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

515

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

245

2023.07.28

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

33

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
SQL 教程
SQL 教程

共61课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号