使用 JavaScript 对数组进行无突变排序

在 JavaScript 中对数组进行无突变排序

Sort an Array without Mutation using JavaScript

要对数组进行无突变排序：

1. 使用扩展语法 (…) 创建数组的浅表副本。
2. Array.sort()在副本上调用方法。
3. 该sort()方法将在不更改原件的情况下对副本进行排序。

// ✅ for array of letters
const arr = ['z', 'c', 'a', 'f'];
const result = [...arr].sort();
console.log(result); // 👉️ [ 'a', 'c', 'f', 'z' ]
console.log(arr); // 👉️ [ 'z', 'c', 'a', 'f' ]

如果需要对数字数组进行排序，则必须将函数传递给该
Array.sort()方法。

// ✅ for array of numbers
const arr = [10, 5, 1, 7];
const result = [...arr].sort((a, b) => a - b);
console.log(result); // 👉️ [1, 5, 7, 10]
console.log(arr); // 👉️ [10, 5, 1, 7]

我们使用
扩展语法 (…)
将数组的值解包到一个新数组中。

const a = [1, 2, 3];
const b = [...a];
console.log(b); // 👉️ [1, 2, 3]

扩展语法 (…) 允许我们创建原始数组的浅表副本，我们可以在其上调用
Array.sort()
方法。

这些示例展示了如何在不改变原始数组的情况下对数字和字符串数组进行排序。

在对数值数组进行排序时，我们必须将一个函数传递给该sort()方法。

如果需要对字符串数组进行排序，可以sort()在不传递任何参数的情况下调用该方法。

该sort()方法采用定义排序顺序的函数。

const arr = [10, 5, 1, 7];
const result = [...arr].sort((a, b) => a - b);

console.log(result); // 👉️ [1, 5, 7, 10]
console.log(arr); // 👉️ [10, 5, 1, 7]

这不是我们在处理数值数组时想要的，然而，这正是我们在排序字符串数组时想要的。

If you have to sort an array without mutating it often, define a reusable
function.

function sortWithoutMutation(arr) {
  return [...arr].sort();
}

const arr = ['c', 'b', 'a'];

const result = sortWithoutMutation(['c', 'b', 'a']);
console.log(result); // 👉️ [ 'a', 'b', 'c' ]

console.log(arr); // 👉️ [ 'c', 'b', 'a' ]

The sortWithoutMutation() function takes an array as a parameter and sorts the
array without mutating it.

An alternative, but also very common approach is to use the Array.slice
method.

Sort an Array without Mutation using slice() #

To sort an array, without mutating the original array:

1. Call the slice() method on the array to get a copy.
2. Call the sort() method on the copied array.
3. The sort method will sort the copied array, without mutating the original.

// ✅ for numbers
const arr3 = [8, 4, 12];
const result3 = arr3.slice().sort((a, b) => a - b);
console.log(result3); // 👉️ [4, 8, 12]
console.log(arr3); // 👉️ [8, 4, 12]

// ✅ for letters
const arr = ['z', 'c', 'a', 'f'];
const result = arr.slice().sort();

console.log(result); // 👉️ ['a', 'c', 'f', 'z']
console.log(arr); // 👉️ ['z', 'c', 'a', 'f']

If you’re working with a numeric array, pass a function to the sort() method.

const arr = [8, 4, 12];
const result = arr.slice().sort((a, b) => a - b);

console.log(result); // 👉️ [4, 8, 12]
console.log(arr); // 👉️ [8, 4, 12]

The
Array.slice()
method can be used to create a shallow copy of an array, just like the spread
syntax (…).

When no parameters are passed to the slice method, it returns a shallow copy
of the array.

We can then call the sort() method on the copy to not mutate the original.

Sort an Array without Mutation using Array.from() #

You can also use the Array.from() method to sort an array without changing the
original.

const arr = ['z', 'c', 'a', 'f'];
const result = Array.from(arr).sort();

console.log(result); // 👉️ ['a', 'c', 'f', 'z']
console.log(arr); // 👉️ ['z', 'c', 'a', 'f']

The
Array.from
method creates a new, shallow-copied array from the provided iterable.

Calling the sort() method on the copied array doesn’t change the original.

Sort an Array without Mutation using Array.concat() #

The Array.concat() method can also be used to sort an array without mutating
the original.

const arr = ['z', 'c', 'a', 'f'];
const result = arr.concat().sort();

console.log(result); // 👉️ ['a', 'c', 'f', 'z']
console.log(arr); // 👉️ ['z', 'c', 'a', 'f']

When the
Array.concat
method is called without any arguments, it returns a shallow copy of the array
on which it was called.

Sort an Array without Mutation using JSON.stringify() #

You can also use the JSON.stringify() and JSON.parse() methods to sort an
array without a mutation.

const arr = ['z', 'c', 'a', 'f'];
const result = JSON.parse(JSON.stringify(arr)).sort();

console.log(result); // 👉️ ['a', 'c', 'f', 'z']
console.log(arr); // 👉️ ['z', 'c', 'a', 'f']

The
JSON.stringify
method converts a JavaScript value to a JSON string.

The
JSON.parse
method parses a JSON string into a JavaScript value.

When we convert the array to a JSON string and parse the string back to an
array, we get a completely different array.

新数组有不同的引用并存储在内存中的不同位置，因此我们可以在不改变原始数组的情况下对数组进行排序。

您选择哪种方法是个人喜好的问题。我会使用第一个副标题中的扩展语法 (…)，因为我发现它非常直接和直观。