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

php中文网 2024-10-15 11:44:44

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

1. 数组 findlast 和 findlastindex

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

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

  const numbers = [1, 2, 3, 4, 5];
  const lasteven = numbers.findlast(num =&gt; num % 2 === 0); // 4

  // find last user who is 18 years old in large array
  const users = [/* array with 10000 users */]; 
  users.findlast(user =&gt; user.age === 18);

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

  const lastevenindex = numbers.findlastindex(num =&gt; 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 }) =&gt; 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(() =&gt; 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 等大型浏览器开始包含它的一些功能。有关支持内容和位置的详细信息，您可以查看我可以使用吗。使用转译器有助于使这些新功能在今天可用，同时我们等待浏览器在未来几年迎头赶上。