javascript 定义数组-【干货分享】JavaScript简单易用的字段对象排序方法

在日常工作中，我们经常需要对字段对象进行排序。 尤其是在处理数据可视化需求时，根据不同数值维度进行排序至关重要。 本文将介绍一些简单实用的方法来帮助您对字段对象的某些键进行排序。

简单排序

一开始我们先了解最基本的排序方法：sort()。 这是 JavaScript 原生的函数，可以通过传入比较函数对字段对象进行排序。 比较函数接收两个参数 a 和 b，如果 a 应位于 b 之后，则返回正数；如果 a 应位于 b 接下来，则返回负数；如果 a 和 b 的位置无关紧要，则返回 0。

// 按照 age 属性进行排序
const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 }
];
people.sort((a, b) => a.age - b.age);
console.log(people);
/*
Output: [ 
    { name: 'Bob', age: 20 }, 
    { name: 'Alice', age: 25 }, 
    { name: 'Charlie', age: 30 }
]
*/

这里的比较函数(a,b) => a.age - b.age可以理解为“按照年龄升序排列”。 如果想升序排序，只需将函数改为(a, b) => b.age - a.age即可。

实现多种排序

如果我们想按多个属性排序，我们可以在比较函数中添加更多逻辑。 例如，假设我们要先按年龄排序javascript 定义数组，然后按姓名排序。 这可以这样实现：

// 按照 age 和 name 属性进行排序
const people = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 },
  { name: 'Bob', age: 15 },
  { name: 'Alice', age: 20 }
];
people.sort((a, b) => {
  if (a.age !== b.age) {
    return a.age - b.age;
  } else {
    return a.name.localeCompare(b.name);
  }
});
console.log(people);
/*
Output: [
  { name: 'Bob', age: 15 },
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 20 },
  { name: 'Alice', age: 25 },
  { name: 'Charlie', age: 30 }
]
*/

这里的比较函数首先判断两个元素的age属性是否相同，如果不同则按照age进行排序； 如果相同，则按照名称排序。 请注意javascript 定义数组，此处使用 localCompare() 方法对字符串进行排序。

通用排序方法

上面的方法其实简单易懂，但是当我们需要对多个不同的字段进行排序时，每次都写一个比较函数就会变得非常麻烦。 这时候我们就可以使用通用的排序方法sortBy()。

sortBy() 方法接收两个参数：要排序的字段和包含排序规则的字段。 排序规则链表中的每个元素代表一个排序规则，它本身就是一个由属性名称和排序方向组成的链表。

这是一个简单的实现：

/**
 * 对数组对象的指定属性进行排序
 * @param {Array} arr 数组对象
 * @param {Array} rules 排序规则，每个元素都是形如 ['key', 'asc'] 或者 ['key', 'desc'] 的数组
 */
function sortBy(arr, rules) {
  return arr.sort((a, b) => {
    for (let i = 0; i < rules.length; i++) {
      const [key, direction] = rules[i];
      const order = direction === 'desc' ? -1 : 1;
      if (a[key] < b[key]) {
        return -1 * order;
      }
      if (a[key] > b[key]) {
        return 1 * order;
      }
    }
    return 0;
  });
}

使用起来也非常简单。 假设我们有一个链表对象，每个对象包含姓名、年龄和分数三个属性。 我们希望首先按分数降序排序，然后按年龄升序排序。 就像这样称呼它：

const students = [
  { name: 'Alice', age: 20, score: 90 },
  { name: 'Bob', age: 25, score: 85 },
  { name: 'Charlie', age: 22, score: 95 },
  { name: 'David', age: 25, score: 85 }
];
const result = sortBy(students, [
  ['score', 'desc'],
  ['age', 'asc']
]);
console.log(result);
/*
Output: [
  { name: 'Charlie', age: 22, score: 95 },
  { name: 'Bob', age: 25, score: 85 },
  { name: 'David', age: 25, score: 85 },
  { name: 'Alice', age: 20, score: 90 }
]
*/

sortBy()方法可以轻松实现多次排序，比每次都写比较函数方便。 不仅如此，它还可以扩展到更复杂的排序需求。 例如，如果我们想先按20岁到30岁之间的中学生排序，然后再按分数排序，我们只需要传入这样一个规则：

const result = sortBy(students, [
  [(student) => student.age >= 20 && student.age <= 30, 'asc'],
  ['score', 'desc']
]);
console.log(result);
/*
Output: [
  { name: 'Alice', age: 20, score: 90 },
  { name: 'Charlie', age: 22, score: 95 },
  { name: 'Bob', age: 25, score: 85 },
  { name: 'David', age: 25, score: 85 }
]
*/

这里使用了一个匿名函数(student)=>student.age>=20&&student.age