2023 年 7 月，ECMAScript 发布了多项 JavaScript 新规范。一些功能包括不修改现有数组的新数组方法。在这篇博客中，我们将讨论其中的三个（一个从 2024 年开始），如果您想了解 Web 和 JavaScript 的最新趋势，您必须了解它们!

Array.toSorted()

原始的 Array.sort() 对数组的元素进行排序就地。有时您可能不想要这种行为。在编程中，避免修改现有值并返回新版本通常是一个好习惯。

Array.toSorted() 通过返回一个新数组来解决这个问题，其中包含回调函数中描述的已排序元素！

我特别喜欢这个功能，因为早在 VSCode 和 Web 浏览器对其提供适当支持之前我就已经开始在我的代码中使用它了！

let numbers = [4, 2, 1, 3];
let sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // Output: [1, 2, 3, 4]

Array.toReversed()

Array.toReversed() 是一个新增功能，它提供了一种不可变的方式来反转数组。与 Array.reverse() 修改原始数组不同，Array.toReversed() 返回数组的反向副本，保持原始数组不变。

let letters = ['a', 'b', 'c', 'd'];
let reversedLetters = letters.toReversed();
console.log(reversedLetters); // Output: ['d', 'c', 'b', 'a']
console.log(letters); // Output: ['a', 'b', 'c', 'd']

Array.ToSpliced()

Array.toSpliced() 提供了一种非破坏性的方法来删除、替换或添加数组中的元素。传统的 Array.splice() 直接修改数组，但 Array.toSpliced() 创建一个应用更改的新数组，保持原始数组不变。当您需要应用更改而不影响源数据时，这可能很有用。

let numbers = [1, 2, 3, 4, 5];
let splicedNumbers = numbers.toSpliced(1, 2, 6, 7);
console.log(splicedNumbers); // Output: [1, 6, 7, 4, 5]
console.log(numbers); // Output: [1, 2, 3, 4, 5]

对象.groupBy()

该方法在 ES2024 中正式发布，但之前在 polyfill 中仍然可用，并且已经推进到 ECMAScript 的后期阶段。

Object.groupBy() 根据特定对象属性对给定数组的项目进行分组。这是非常有用的，当您想要对某个对象列表进行分组，然后在键值结构中相应地迭代它们时，它会非常方便。关于此方法的一个有趣的事实是，由于 Web 兼容性问题，它没有作为数组的原型方法实现。 （许多较旧的 JavaScript 库已经在 Array.prototype.group() 命名空间中实现了一些代码，这就是原因！）

奖励：实现您自己的 Object.groupBy() 以按多个元素进行分组

最终，您可能还需要按多个属性进行分组。原始的 Object.groupBy() 仅在一层进行分组。

在您的项目中实现以下代码，以按多个属性对元素进行分组！

function multiLevelGroupBy(array, criteria) {
  // Base case: if no criteria are left, return the array itself
  if (criteria.length === 0) return array;

  // Get the first criterion
  const [firstCriterion, ...remainingCriteria] = criteria;

  // Group by the first criterion
  const grouped = array.reduce((acc, item) => {
    const key = firstCriterion(item);
    if (!acc[key]) acc[key] = [];
    acc[key].push(item);
    return acc;
  }, {});

  // For each group, recursively apply the remaining criteria
  for (let key in grouped) {
    grouped[key] = multiLevelGroupBy(grouped[key], remainingCriteria);
  }

  return grouped;
}

例子：

const data = [
  { country: 'USA', state: 'California', city: 'Los Angeles', name: 'John' },
  { country: 'USA', state: 'California', city: 'San Francisco', name: 'Alice' },
  { country: 'USA', state: 'New York', city: 'New York City', name: 'Bob' },
  { country: 'Canada', state: 'Ontario', city: 'Toronto', name: 'Carol' },
  { country: 'Canada', state: 'Quebec', city: 'Montreal', name: 'Dave' },
]

let groupedData = multiLevelGroupBy(data, [
  item => item.country,
  item => item.state,
  item => item.city
]);

console.log(groupedData);

/* Expected Output: */
{
  USA: {
    California: {
      'Los Angeles': [{ country: 'USA', state: 'California', city: 'Los Angeles', name: 'John' }],
      'San Francisco': [{ country: 'USA', state: 'California', city: 'San Francisco', name: 'Alice' }]
    },
    New York: {
      'New York City': [{ country: 'USA', state: 'New York', city: 'New York City', name: 'Bob' }]
    }
  },
  Canada: {
    Ontario: {
      Toronto: [{ country: 'Canada', state: 'Ontario', city: 'Toronto', name: 'Carol' }]
    },
    Quebec: {
      Montreal: [{ country: 'Canada', state: 'Quebec', city: 'Montreal', name: 'Dave' }]
    }
  }
}

结局！

如果您已阅读完本文，非常感谢您的阅读！ ？