前言
在前端开发中，数组操作是经常用到的，但当数组的元素不是简单的基本类型，而是复杂的对象时，就需要考虑排序和筛选等问题。array-map-sorted 是一个用来处理排序的 NPM 包，可以帮助我们更方便地处理数组中的对象。
安装
在使用之前，我们需要先安装 array-map-sorted。可以通过 NPM 命令进行安装：
npm install array-map-sorted
然后，我们可以在项目中导入它：
import arrayMapSorted from 'array-map-sorted';
使用
array-map-sorted 提供了一种方便地方式对数组中的对象进行排序。例如，我们有以下数据：
const data = [
{ id: 1, name: 'Tom', age: 20 },
{ id: 2, name: 'Jerry', age: 18 },
{ id: 3, name: 'John', age: 22 },
];我们想要按照年龄从大到小排序，可以使用 array-map-sorted 提供的方法：
const sortedData = arrayMapSorted({
data,
compare: (a, b) => b.age - a.age,
});比较函数 compare 接受两个参数，分别代表两个要比较的元素。它返回一个数值，表示它们的大小关系。在这个例子中，我们按照年龄从大到小排序，因此返回 b.age - a.age。
sortedData 将会是以下数组：
[
{ id: 3, name: 'John', age: 22 },
{ id: 1, name: 'Tom', age: 20 },
{ id: 2, name: 'Jerry', age: 18 },
]进阶
除了简单的排序，array-map-sorted 还提供了其他一些有用的特性。
筛选
我们可以通过 filter 方法使用一个函数来过滤掉不需要的元素。例如，我们有一个包含了所有年龄大于 18 岁的对象的数组：
const filteredData = arrayMapSorted({
data,
compare: (a, b) => b.age - a.age,
filter: item => item.age > 18,
});filteredData 将会是以下数组：
[
{ id: 3, name: 'John', age: 22 },
{ id: 1, name: 'Tom', age: 20 },
]映射
我们可以通过 map 方法使用一个函数对结果进行变换。例如，我们想要把年龄转换成字符串类型：
const mappedData = arrayMapSorted({
data,
compare: (a, b) => b.age - a.age,
map: item => ({ ...item, age: item.age.toString() }),
});mappedData 将会是以下数组：
[
{ id: 3, name: 'John', age: '22' },
{ id: 1, name: 'Tom', age: '20' },
{ id: 2, name: 'Jerry', age: '18' },
]复合排序
我们可以通过 compare 函数返回一个数字，来实现复合排序。例如，我们想要把年龄相同的对象按照 ID 排序：
-- -------------------- ---- -------
----- ---------- - ----------------
-----
-------- --- -- -- -
-- ------ --- ------ -
------ ----- - ------
-
------ ---- - -----
--
---sortedData 将会是以下数组：
[
{ id: 3, name: 'John', age: 22 },
{ id: 1, name: 'Tom', age: 20 },
{ id: 2, name: 'Jerry', age: 18 },
]总结
使用 array-map-sorted，我们可以方便地对数组中的对象进行排序和筛选。通过 filter 和 map 方法，我们可以对结果进行复杂的操作。compare 函数的强大之处在于它可以返回一个数字，从而实现复杂的排序规则。因此，array-map-sorted 是一款非常实用的 NPM 包，值得学习使用。
示例代码
完成代码如下：
-- -------------------- ---- -------
------ -------------- ---- -------------------
----- ---- - -
- --- -- ----- ------ ---- -- --
- --- -- ----- -------- ---- -- --
- --- -- ----- ------- ---- -- --
--
----- ---------- - ----------------
-----
-------- --- -- -- -
-- ------ --- ------ -
------ ----- - ------
-
------ ---- - -----
--
------- ---- -- -------- - ---
---- ---- -- -- -------- ---- ------------------- ---
---
------------------------输出结果为：
[
{ id: 3, name: 'John', age: '22' },
{ id: 1, name: 'Tom', age: '20' },
]来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005684081e8991b448e451a