Vue数组操作之sort详解

在 Vue.js 中，sort() 方法用于对数组进行排序。它会改变原数组，并返回排序后的数组。默认情况下，sort() 方法按照字母顺序（Unicode 编码顺序）对数组中的元素进行排序。如果需要按照其他规则排序，可以传递一个比较函数。

默认排序

默认情况下，sort() 方法会将数组元素转换为字符串，然后按字母顺序进行排序。

let fruits = ['banana', 'apple', 'cherry'];
fruits.sort(); // ['apple', 'banana', 'cherry']

自定义排序

要根据其他标准进行排序，可以传递一个比较函数。比较函数接收两个参数，并返回一个数值：

• 如果返回值小于 0，表示第一个参数应排在第二个参数前面。
• 如果返回值等于 0，表示两个参数相等。
• 如果返回值大于 0，表示第一个参数应排在第二个参数后面。

数字排序

默认排序方法无法正确排序数字，因为它是按字符串排序的：

let numbers = [40, 1, 5, 200];
numbers.sort(); // [1, 200, 40, 5]

为了按数字顺序排序，需要提供一个比较函数：

numbers.sort((a, b) => a - b); // [1, 5, 40, 200]

降序排序

如果要按降序排序，可以将比较函数的返回值取反：

numbers.sort((a, b) => b - a); // [200, 40, 5, 1]

对象数组排序

对于对象数组，可以根据对象的某个属性进行排序。例如，有一个用户对象数组，要根据年龄对其进行排序：

let users = [{ name: 'Alice', age: 25 },{ name: 'Bob', age: 30 },{ name: 'Charlie', age: 20 }
];users.sort((a, b) => a.age - b.age);
/*
[{ name: 'Charlie', age: 20 },{ name: 'Alice', age: 25 },{ name: 'Bob', age: 30 }
]
*/

在 Vue.js 中使用 sort

在 Vue 组件中，可以直接对数组使用 sort() 方法进行排序。以下是一个完整的 Vue 组件示例，展示了如何对数组进行排序：

<template><div><ul><li v-for="(user, index) in sortedUsers" :key="index">{{ user.name }} - {{ user.age }}</li></ul><button @click="sortByAge">按年龄排序</button><button @click="sortByName">按名字排序</button></div>
</template><script>
export default {data() {return {users: [{ name: 'Alice', age: 25 },{ name: 'Bob', age: 30 },{ name: 'Charlie', age: 20 }]};},computed: {sortedUsers() {return this.users;}},methods: {sortByAge() {this.users.sort((a, b) => a.age - b.age);},sortByName() {this.users.sort((a, b) => a.name.localeCompare(b.name));}}
};
</script>

在这个示例中，通过按钮点击调用 sortByAge 和 sortByName 方法来对用户数组进行排序。sortedUsers 计算属性直接返回 users 数组，这样在视图中就能反应排序后的结果。