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 数组，这样在视图中就能反应排序后的结果。