在前端开发中，排序是非常常见的需求。然而，JS的默认排序方式并不总是符合我们的预期，特别是当需要按照数字或者字母进行排序时。这时，我们可以使用一个名为 natural-orderby 的 npm 包来完成这个任务。
什么是 natural-orderby
natural-orderby 是一个用于按人类可读的自然顺序对数组进行排序的工具。它支持按照数字、字符串、日期等类型进行排序，并且有着出色的性能。此外，该包还提供了多种排序方法以及可定制的选项，可以满足各种排序需求。
安装
使用 npm 来安装 natural-orderby：
npm install natural-orderby
使用
引入 natural-orderby 并调用它即可对数组进行排序。
-- -------------------- ---- ------- ----- ------- - --------------------------- ----- --- - - - ----- ------ ---- -- -- - ----- -------- ---- -- -- - ----- ------ ---- -- - -- ----- --------- - ------------ --------- --------- ----------------------- -- ------- -- ----- -------- ---- -- -- - ----- ------ ---- -- -- - ----- ------ ---- -- --
上述示例中，我们首先引入了 natural-orderby，然后定义了一个对象数组 arr，包含每个人的姓名和年龄。接着，我们使用 orderBy 函数对数组进行排序，按照名字（'name' 字段）升序排列。最后，我们将排序后的数组打印出来。
以上是一个简单的示例，接下来我们会详细介绍如何使用 natural-orderby 来完成各种排序需求。
排序方法
在 natural-orderby 中，有以下几种排序方法：
'asc'：升序排序；'desc'：降序排序；'none'：不排序，保持原有顺序。
这些方法可以通过第二个参数来指定排序方式，例如：
-- -------------------- ---- ------- ----- --- - --- -- -- -- -- --- -- ---- ------------------------ --- ---------- -- ------- --- -- -- -- -- -- -- ---- ------------------------ --- ----------- -- ------- --- -- -- -- -- -- -- --- ------------------------ --- ----------- -- ------- --- -- -- -- -- --
需要注意的是，如果未指定排序方式，则默认为升序排序。
排序字段
当对对象数组进行排序时，需要指定用于排序的字段。可以通过第一个参数来指定排序字段，例如：
-- -------------------- ---- ------- ----- --- - - - ----- ------ ---- -- -- - ----- -------- ---- -- -- - ----- ------ ---- -- - -- -- ------- ------------------------ --------- ---------- -- ------- -- ----- -------- ---- -- -- - ----- ------ ---- -- -- - ----- ------ ---- -- -- -- ------- ------------------------ -------- ----------- -- ------- -- ----- ------ ---- -- -- - ----- ------ ---- -- -- - ----- -------- ---- -- --
需要注意的是，如果要按照多个字段进行排序，则可以依次指定这些字段。例如：
const arr = [
{ name: 'Tom', age: 29 },
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Tom', age: 28 }
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/52684) ，转载请注明来源
[https://www.javascriptcn.com/post/52684](https://www.javascriptcn.com/post/52684)