JavaScript中数组sort后不发生改变？附解决方案

2023-12-31 00:07:03

问题

在JavaScript中，数组是一种对象，可以存储各种类型的值。数组中的每个元素都可以通过索引来访问。使用sort()方法可以对数组中的元素进行排序。

const numbers = [1, 3, 2, 5, 4];
numbers.sort();
console.log(numbers); // [1, 2, 3, 4, 5]

在这个例子中，numbers数组中的元素是数字。sort()方法对数组中的数字进行排序，并将结果输出到控制台。

然而，如果数组中的元素是对象，则sort()方法可能会产生不同的结果。

const objects = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Mary' },
  { id: 3, name: 'Bob' }
];
objects.sort();
console.log(objects); // [{ id: 1, name: 'John' }, { id: 2, name: 'Mary' }, { id: 3, name: 'Bob' }]

在这个例子中，objects数组中的元素是对象。sort()方法对数组中的对象进行排序，但数组中的元素的顺序并没有改变。

原因分析

之所以会出现这种情况，是因为数组中的元素是引用类型，而不是值类型。

值类型的值是存储在变量中的。当一个变量的值发生改变时，变量的值也会发生改变。

引用类型的值是存储在内存中的。当一个变量的值发生改变时，变量的值不会发生改变，而是变量指向的内存地址发生改变。

在JavaScript中，数组是引用类型。因此，当使用sort()方法对数组中的元素进行排序时，sort()方法实际上是改变了数组中元素的顺序，而不是改变了数组中的元素的值。

解决方法

为了解决这个问题，我们可以使用以下方法：

使用slice()方法创建一个新的数组。

const newObjects = objects.slice().sort();
console.log(newObjects); // [{ id: 1, name: 'John' }, { id: 2, name: 'Mary' }, { id: 3, name: 'Bob' }]
console.log(objects); // [{ id: 1, name: 'John' }, { id: 2, name: 'Mary' }, { id: 3, name: 'Bob' }]

使用concat()方法创建一个新的数组。

const newObjects = objects.concat().sort();
console.log(newObjects); // [{ id: 1, name: 'John' }, { id: 2, name: 'Mary' }, { id: 3, name: 'Bob' }]
console.log(objects); // [{ id: 1, name: 'John' }, { id: 2, name: 'Mary' }, { id: 3, name: 'Bob' }]

使用ES6的扩展运算符创建一个新的数组。

const newObjects = [...objects].sort();
console.log(newObjects); // [{ id: 1, name: 'John' }, { id: 2, name: 'Mary' }, { id: 3, name: 'Bob' }]
console.log(objects); // [{ id: 1, name: 'John' }, { id: 2, name: 'Mary' }, { id: 3, name: 'Bob' }]