JavaScript 数组 toSorted - JavaScript 教程

摘要：在本教程中，您将学习如何使用 JavaScript 数组 toSorted() 方法返回一个包含已排序元素的新数组。

JavaScript 数组 toSorted 方法简介

Array.prototype 有 sort() 方法，它可以对数组中的元素进行排序。但是，它会修改原始数组。

有时，您不希望更改原始数组，而是创建一个包含排序元素的新数组。在这种情况下，您可以使用 Array.prototype.toSorted() 方法。

以下是 toSorted() 方法的基本语法

array.toSorted(compareFn);Code language: JavaScript (javascript)

在此语法中

array：这是您在其中调用该方法的数组。
compareFn（可选）：这是一个定义排序顺序的函数。如果省略它，toSorted() 方法将把数组元素转换为字符串，然后根据其字符的 Unicode 代码点值对它们进行排序。

compareFn 函数接受两个参数 a 和 b，它们是用于比较的第一个和第二个元素。

compareFn 预计返回一个负数（如果 a 应该在 b 之前排序）、一个正数（如果 b 应该在 a 之前排序）、或零（如果 a 和 b 的顺序无关紧要）。

toSorted() 函数返回一个包含按升序排序的元素的新数组。

toSorted() 方法是泛型的，这意味着您可以在具有 length 属性和整型键属性的非数组对象上调用它。

在这种情况下，toSorted() 方法将执行以下操作

首先，读取对象的 length 属性。
其次，收集 0 到 length - 1 范围内的所有现有整型键属性。
第三，对元素进行排序。
最后，将元素写入一个新的数组。

JavaScript 数组 toSorted 方法示例

让我们探索一些使用 JavaScript 数组 toSorted() 方法的示例。

1) 使用 toSorted() 方法返回一个包含已排序字符串的新数组

以下示例使用 toSorted() 方法对字符串数组进行排序

const colors = ['red','green','blue'];
const sortedColors = colors.toSorted();

console.log(colors);
console.log(sortedColors);Code language: JavaScript (javascript)

输出

['red', 'green', 'blue']
['blue', 'green', 'red']Code language: JavaScript (javascript)

输出表明原始数组 (colors) 没有改变，但结果数组 (sortedColors) 的元素已排序。

2) 使用 toSorted() 方法返回一个包含已排序数字的新数组

以下示例使用 toSorted() 方法对数字数组进行排序

const scores = [3, 1, 2, 7, 9];
const sortedScores = scores.toSorted((a,b) => a - b);

console.log(scores);
console.log(sortedScores);Code language: JavaScript (javascript)

输出

[3, 1, 2, 7, 9]
[1, 2, 3, 7, 9]Code language: JavaScript (javascript)

在此示例中，我们使用 compareFn 参数来比较两个数字，以便按升序对 scores 数组的元素进行数值排序。

要按降序对数字进行排序，您可以按如下方式更改 compareFn 参数

const scores = [3, 1, 2, 7, 9];
const sortedScores = scores.toSorted((a,b) => b - a);

console.log(scores);
console.log(sortedScores);Code language: JavaScript (javascript)

输出

[3, 1, 2, 7, 9]
[9, 7, 3, 2, 1]Code language: JavaScript (javascript)

在 compareFn 函数中，我们使用 b - a 来指示该函数，如果 b 大于 a，则返回一个正值，导致 b 在 a 之前排序。

因此，toSorted() 方法按降序对数组进行排序，因为它将较大的数字（b 的较高值）放在较小的数字（a 的较低值）之前。

3) 使用 toSorted() 方法按属性对对象数组进行排序

以下示例使用 toSorted() 方法按出版年份对书籍数组进行排序，而不会修改原始数组

// Original array of books
const books = [
  { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', year: 1925 },
  { title: 'To Kill a Mockingbird', author: 'Harper Lee', year: 1960 },
  { title: '1984', author: 'George Orwell', year: 1949 },
  { title: 'Brave New World', author: 'Aldous Huxley', year: 1932 }
];

// Creating a sorted copy based on the publication year using toSorted()
const sortedBooks = books.toSorted((a, b) => a.year - b.year);

// Output the sorted copy and the original array
console.log(sortedBooks);Code language: JavaScript (javascript)

输出

[
  { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', year: 1925},
  { title: 'Brave New World', author: 'Aldous Huxley', year: 1932 },
  { title: '1984', author: 'George Orwell', year: 1949 },
  { title: 'To Kill a Mockingbird', author: 'Harper Lee', year: 1960 }
]Code language: JavaScript (javascript)

4) 在非数组对象上调用 toSorted() 方法

以下示例说明如何在具有 length 属性和整型键属性的对象上调用 toSorted() 方法

const arrayLike = {
  length: 3,
  unrelated: "foo",
  0: 5,
  2: 4,
  3: 3, // ignored by toSorted() since length is 3
};
console.log(Array.prototype.toSorted.call(arrayLike));
// [4, 5, undefined]Code language: JavaScript (javascript)

5) 对稀疏数组使用 toSorted()

以下示例在稀疏数组上调用 toSorted() 方法。toSorted() 方法将空插槽视为它们具有值 undefined。

const skills = ['JS',,'Node.js'];
const sortedSkills = skills.toSorted();

console.log(sortedSkills);Code language: JavaScript (javascript)

输出

['JS', 'Node.js', undefined]Code language: JavaScript (javascript)

总结

使用 JavaScript 数组 toSorted() 方法返回一个包含已排序元素的新数组，而不会修改原始数组。
toSorted() 方法是泛型的，因此您可以在具有 length 属性和整型键属性的非数组对象上调用它。
在将 toSorted() 方法应用于稀疏数组时，它将迭代空插槽，将它们视为包含值 undefined。

本教程对您有帮助吗？