”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > ES3新特性:现代JavaScript的新功能

ES3新特性:现代JavaScript的新功能

发布于2025-05-02
浏览:695

Modern JavaScript Features: What’s New in ES3 1。

array findlast和findlastIndex

您是否曾经从头开始在数组中找到一个项目? ES2023引入了Findlast和FindlastIndex,这就是这样做的。

Findlast:此方法在符合指定条件的数组中找到了最后一个元素。

    ; const lasteven = numbers.findlast(num => num%2 === 0); // 4 //查找在大型数组中18岁的最后一个用户 const用户= [/ *带有10000个用户的数组 */]; user.findlast(user => user.age === 18);
FindLastIndex:此方法返回最后一个元素的索引。
  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);
  • 这些方法非常适合您需要逆转搜索逻辑,使代码更清晰,更有效的情况。
2。
  const lastEvenIndex = numbers.findLastIndex(num => num % 2 === 0); // 3

如果您在JavaScript中编写命令行工具,您将感谢HashBangs的新支持。通过添加#!在文件的顶部,您可以直接指定解释器,使您的脚本可执行而无需外部命令。

#!/usr/bin/env节点 console.log(“你好,世界!”); 这是一个小但方便的功能,特别是对于那些在node.js中构建CLI工具的人。

3。

符号为feepMap键

#!/usr/bin/env node

console.log("Hello, world!");

这种增强使虚弱映射更加通用,尤其是当您需要符号提供的独特的无碰撞键时。

4。数组分组通过方法

通过新组方法进行分组数组元素变得容易得多。

组:此方法将您的数组组织成一个对象,并由您提供的函数确定的键和值为匹配每个密钥的元素数组。
  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);

const Animal = [ {type:'哺乳动物',名称:'dog'}, {type:'bird',名称:'sparrow'}, {type:'哺乳动物',名称:'cat'}, ]; const grouped = Animal.group(({type})=> type); console.log(分组); // { //哺乳动物:[{type:'哺乳动物',name:'dog'},{type:'mammal',name:'cat'}], //伯德:[{type:'bird',名称:'sparrow'}]] //}

此功能非常适合您需要快速有效地对数据进行分类的方案。 5。 array.prototype.tosorted and array.prototype.toreversed()

排序阵列刚好有很多清洁。与变化原始数组的类别不同,TOSORTED返回一个新的排序阵列和toreversed返回一个新的反向数组,而原始的未触及。
  • ; const sortedarr = arr.toSorted(); console.log(sortedarr); // [1,1,3,4,5] console.log(arr); // [3,1,4,1,5] 令数据= [/ *不应修改的重要数据 */]; 令反向data = data.toreversed(); //安全反向
此方法非常适合当您在使用排序版本时需要保留原始数组时。
  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' }]
  // }
array.prototype.with

const数= [10,20,30,40]; const newnumbers =数字。(2,25); // [10,20,25,40]

当您想不成熟时更新数组时,此方法是完美的,使以功能编程模式管理状态更容易。

7。

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

这是处理异步操作的一种整洁而简洁的方法,尤其是当您需要从其构造函数外部控制承诺的结果时。

ES2023的浏览器支持

ES2023是JavaScript的最新版本,因为它刚刚在2023年完成。这意味着并非所有Web浏览器都可以使用其新功能,但是它们开始使用:


Safari尚未支持这些功能。

  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);
node.js

array.prototype.findlast()

array.prototype.findlastindex() 预计将来会在将来的更新中添加更多ES2023功能。


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

transpilers:

为了使用新的ES2023功能,开发人员可以将ES2023代码变成较旧的版本,使用称为Transpilers(例如Babel)的工具,更多的浏览器理解。这样,即使浏览器还没有准备好,您也可以开始使用新的东西。

现在,对ES2023的支持仍在增长。像Firefox和Chrome这样的大浏览器开始包括其一些功能。有关在哪里支持的内容的详细信息,您可以查看我可以使用。使用转板器有助于使这些新功能今天可用,而我们等待浏览器在未来几年中赶上。

结论

ES2023带来了一系列新功能,使JavaScript更强大,更易于使用。从增强的阵列方法到更好的承诺处理,这些更新都在于使您的代码清洁和更有效。随着JavaScript的不断发展和发展,保持最新的这些更改,确保您始终充分利用语言。
    参考:
  • tc39提案
  • 草稿ECMA-262

    mdn
版本声明 本文转载于:https://dev.to/manjushsh/modern-javascript-features-whats-new-in-es2023-4i7d?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • Go语言垃圾回收如何处理切片内存?
    Go语言垃圾回收如何处理切片内存?
    Garbage Collection in Go Slices: A Detailed AnalysisIn Go, a slice is a dynamic array that references an underlying array.使用切片时,了解垃圾收集行为至关重要,以避免潜在的内存泄...
    编程 发布于2025-05-03
  • 在Pandas中如何将年份和季度列合并为一个周期列?
    在Pandas中如何将年份和季度列合并为一个周期列?
    pandas data frame thing commans date lay neal and pree pree'和pree pree pree”,季度 2000 q2 这个目标是通过组合“年度”和“季度”列来创建一个新列,以获取以下结果: [python中的concate...
    编程 发布于2025-05-03
  • 如何使用不同数量列的联合数据库表?
    如何使用不同数量列的联合数据库表?
    合并列数不同的表 当尝试合并列数不同的数据库表时,可能会遇到挑战。一种直接的方法是在列数较少的表中,为缺失的列追加空值。 例如,考虑两个表,表 A 和表 B,其中表 A 的列数多于表 B。为了合并这些表,同时处理表 B 中缺失的列,请按照以下步骤操作: 确定表 B 中缺失的列,并将它们添加到表的末...
    编程 发布于2025-05-03
  • 编译器报错“usr/bin/ld: cannot find -l”解决方法
    编译器报错“usr/bin/ld: cannot find -l”解决方法
    错误:“ usr/bin/ld:找不到-l “ 此错误表明链接器在链接您的可执行文件时无法找到指定的库。为了解决此问题,我们将深入研究如何指定库路径并将链接引导到正确位置的详细信息。添加库搜索路径的一个可能的原因是,此错误是您的makefile中缺少库搜索路径。要解决它,您可以在链接器命令中添加...
    编程 发布于2025-05-03
  • 如何从Python中的字符串中删除表情符号:固定常见错误的初学者指南?
    如何从Python中的字符串中删除表情符号:固定常见错误的初学者指南?
    从python import codecs import codecs import codecs 导入 text = codecs.decode('这狗\ u0001f602'.encode('utf-8'),'utf-8') 印刷(文字)#带有...
    编程 发布于2025-05-03
  • 在Java中如何为PNG文件添加坐标轴和标签?
    在Java中如何为PNG文件添加坐标轴和标签?
    如何用java 在现有png映像中添加轴和标签的axes和labels如何注释png文件可能具有挑战性。与其尝试可能导致错误和不一致的修改,不如建议在图表创建过程中集成注释。使用JFReechArt import java.awt.color; 导入java.awt.eventqueue; 导入...
    编程 发布于2025-05-03
  • Java中如何使用观察者模式实现自定义事件?
    Java中如何使用观察者模式实现自定义事件?
    在Java 中创建自定义事件的自定义事件在许多编程场景中都是无关紧要的,使组件能够基于特定的触发器相互通信。本文旨在解决以下内容:问题语句我们如何在Java中实现自定义事件以促进基于特定事件的对象之间的交互,定义了管理订阅者的类界面。以下代码片段演示了如何使用观察者模式创建自定义事件: args)...
    编程 发布于2025-05-03
  • 为什么在我的Linux服务器上安装Archive_Zip后,我找不到“ class \” class \'ziparchive \'错误?
    为什么在我的Linux服务器上安装Archive_Zip后,我找不到“ class \” class \'ziparchive \'错误?
    Class 'ZipArchive' Not Found Error While Installing Archive_Zip on Linux ServerSymptom:When attempting to run a script that utilizes the ZipAr...
    编程 发布于2025-05-03
  • 字体大小变量命名困境
    字体大小变量命名困境
    通常,一个项目将具有一组预先确定的字体大小,通常为变量,以寻求某种秩序和一致性的方式命名。任何相当大的项目都可以使用类似的项目。总是有标题,段落,列表等。您可以明确,直接设置字体大小(例如字体大小:18px)。原始CSS。我确实偶尔会看到 - 不仅要混合大小,还混合了诸如PX,REM和EM等单元。 ...
    编程 发布于2025-05-03
  • 对象拟合:IE和Edge中的封面失败,如何修复?
    对象拟合:IE和Edge中的封面失败,如何修复?
    To resolve this issue, we employ a clever CSS solution that solves the problem:position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%)...
    编程 发布于2025-05-03
  • 解决MySQL错误1153:数据包超出'max_allowed_packet'限制
    解决MySQL错误1153:数据包超出'max_allowed_packet'限制
    mysql错误1153:故障排除比“ max_allowed_pa​​cket” bytes 更大的数据包,用于面对阴谋mysql错误1153,同时导入数据capase doft a Database dust?让我们深入研究罪魁祸首并探索解决方案以纠正此问题。理解错误此错误表明在导入过程中接...
    编程 发布于2025-05-03
  • 如何使用node-mysql在单个查询中执行多个SQL语句?
    如何使用node-mysql在单个查询中执行多个SQL语句?
    Multi-Statement Query Support in Node-MySQLIn Node.js, the question arises when executing multiple SQL statements in a single query using the node-mys...
    编程 发布于2025-05-03
  • 我可以将加密从McRypt迁移到OpenSSL,并使用OpenSSL迁移MCRYPT加密数据?
    我可以将加密从McRypt迁移到OpenSSL,并使用OpenSSL迁移MCRYPT加密数据?
    将我的加密库从mcrypt升级到openssl 问题:是否可以将我的加密库从McRypt升级到OpenSSL?如果是这样,如何?答案:是的,可以将您的Encryption库从McRypt升级到OpenSSL。可以使用openssl。附加说明: [openssl_decrypt()函数要求iv参...
    编程 发布于2025-05-03
  • 如何在其容器中为DIV创建平滑的左右CSS动画?
    如何在其容器中为DIV创建平滑的左右CSS动画?
    通用CSS动画,用于左右运动 ,我们将探索创建一个通用的CSS动画,以向左和右移动DIV,从而到达其容器的边缘。该动画可以应用于具有绝对定位的任何div,无论其未知长度如何。问题:使用左直接导致瞬时消失 更加流畅的解决方案:混合转换和左 [并实现平稳的,线性的运动,我们介绍了线性的转换。这...
    编程 发布于2025-05-03

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3