ECMAScript 2023 新特性解读，附代码示例

大家好，今天我们要聊聊 ECMAScript 2023 —— JavaScript 的第14版，它带来了一些精彩的更新，将让我们的编程生活变得更加轻松愉快。本文将逐一解读这些变化，并说明它们为何如此有用。那就让我们一起来看看这些如圣诞礼物般送到我们手中的新方法吧！

1. Object.groupBy

假设你有一个对象数组，想根据属性值、类型或数量来进行分类。

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

现在，我们有了一个名为 groupBy 的新方法，可以轻松实现这一功能。

使用方法是，在任何对象数组上使用 Object.groupBy，并传入一个返回特定分类键的函数。

在这里，我们有一个名为 inventory 的对象数组。我们还定义了一个 myCallback 函数，它接受一个数量作为参数，如果数量大于 5 则返回 "ok"，否则返回 "restock"。

我们将 inventory 数组和 myCallback 函数传递给 Object.groupBy，以便按数量对数组中的项目进行分组。

function myCallback({ quantity }) {
  return quantity > 5 ? "ok" : "restock";
}

const result2 = Object.groupBy(inventory, myCallback);

结果将是一个包含分类键和指定数据的对象。

{
    "restock": [
        {
            "name": "asparagus",
            "type": "vegetables",
            "quantity": 5
        },
        {
            "name": "bananas",
            "type": "fruit",
            "quantity": 0
        },
        {
            "name": "cherries",
            "type": "fruit",
            "quantity": 5
        }
    ],
    "ok": [
        {
            "name": "goat",
            "type": "meat",
            "quantity": 23
        },
        {
            "name": "fish",
            "type": "meat",
            "quantity": 22
        }
    ]
}

2. Array.toSliced(), Array.toSorted(), 和 Array.toReversed()

当我们使用 sort(), splice(), 和 reverse() 这些方法时，它们会改变原始数组。这有时可能是个问题。

但使用 toSpliced(), toSorted(), 和 toReversed() 时，我们可以对数组进行切割、排序和反转，而不会改变源数组。它们的工作原理如下：

const numbers = [3, 4, 1, 5, 2];

const splicedNumbers = numbers.toSpliced(1, 1);
const sortedNumbers = numbers.toSorted();
const reversedNumbers = numbers.toReversed();

在这个例子中，我们使用 toSpliced() 来切割数组，toSorted() 来排序数组，以及 toReversed() 来反转数组。它们的工作方式与普通的 splice、sort 和 reverse 相同，但不会改变原始数组，而是返回一个新数组。

3. findLast() 和 findLastIndex()

在 ES14 之前，如果你想找到数组中满足某个条件的最后一个元素或索引，你需要先反转数组。

function findLastIndexByReversing(arr, target) {
  const reversedArray = arr.slice().reverse();
  const reversedIndex = reversedArray.indexOf(target);

  if (reversedIndex !== -1) {
    const lastIndex = arr.length - 1 - reversedIndex;
    return lastIndex;
  } else {
    return -1; 
  }
}

例如，findLastIndexByReversing 通过使用 slice().reverse() 创建原始数组的反转副本。然后，使用 indexOf 查找反转数组中目标元素的第一个出现位置。这个函数通过从数组总长度减去 1 再减去反转索引来计算在原始数组中对应的索引位置。

或者，你也可以使用从尾部开始的 for 循环。

function findLastIndex(arr, target) {
  for (let i = arr.length - 1; i >= 0; i--) {
    if (arr[i] === target) {
      return i;
    }
  }
  return -1;
}

在这个例子中，findLastIndex 函数接收一个数组 arr 和一个目标元素 target。它从数组的末尾 arr.length - 1 开始遍历到开头 0。如果找到目标元素，则返回索引。如果未找到该元素，findLastIndex 函数会返回 -1，表示目标元素在数组中不存在。

但现在，ES14 引入了一种新方法 findLast() 和 findLastIndex()，这使得查找数组中最后一个满足条件的元素或其索引变得更加简单和直接。

比如，我们有一个水果数组：

const fruits = ['apple', 'banana', 'orange', 'banana', 'kiwi'];

使用 findLastIndex() 方法，我们可以轻松找到数组中最后一个 "banana" 的索引：

const lastIndex = fruits.findLastIndex(fruit => fruit === 'banana');

输出结果将显示为 3，因为数组中第二个 "banana"（从0开始计数）位于索引 3 的位置。

结束

以上就是 ECMAScript 2023 对 JavaScript 带来的一些重要更新。这些改进旨在简化代码编写，提高开发效率，并使代码更加简洁易懂。感谢阅读，希望下次教程中再见！在编程的世界里，每一次迭代和更新都是我们成长的机会。不断学习新知，保持好奇心，让我们在代码的道路上越走越远。再见！

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。