JS中创建⾃定义排序⽅法
⼀般情况咱们排序⼤都按数字或字母顺序，但也有⼀些情况下，咱们可能需要⾃定义排序顺序。
（想⾃学习编程的⼩伙伴请搜索，更多⾏业相关资讯更有⾏业相关免费视频教程。完全免费哦!）
在此之前先简单介绍⼀下 reduce ⽅法：
sort函数 js
语法：duce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
callback：执⾏数组中每个值的函数，包含四个参数：
accumulator：累计器累计回调的返回值; 它是上⼀次调⽤回调时返回的累积值，或initialValue（见于下⽅）。
currentValue：数组中正在处理的元素。
currentIndex (可选)：数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则为1。
array(可选): 调⽤ reduce() 的数组
initialValue(可选)：作为第⼀次调⽤ callback 函数时的第⼀个参数的值。 如果没有提供初始值，则将使⽤数组中的第⼀个元素。 在没有初始值的空数组上调⽤ reduce 将报错。
rudeuce 过程描述：
回调函数第⼀次执⾏时，accumulator 和currentValue的取值有两种情况：如果调⽤reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第⼀个值；如果没有提供 initialValue，那么accumulator取数组中的第⼀个值，currentValue 取数组中的第⼆个值。
回到原⽂：
如下⾯的例⼦所⽰，咱们想让 inProgress 在第⼀位，接着是 todo，然后是 done。
const tasks = [
{id:1, title: 'Job A', status: 'done'},
{id:2, title: 'Job B', status: 'inProgress'},
{id:3, title: 'Job C', status: 'todo'},
{id:4, title: 'Job D', status: 'inProgress'},
{id:5, title: 'Job E', status: 'todo'}
]
⾸先按照所需的排序顺序创建⼀个数组。
const sortBy = ['inProgress', 'todo', 'done']
使⽤reduce来创建⼀个函数，参数为⼀个数组，最后输出以数组项为键，索引为值，如 {inProgress：0，todo：1，done：2}。
const sortByObject = data => duce(
(obj,item,index) => ({
...obj,
[item]:index
}), {}
)
console.log(sortByObject(sortBy))
/* {inProgress: 0, todo: 1, done: 2} */
这样就有了排序设置，咱们可以将它与⼀个可重⽤的函数放在⼀起，该函数传⼊⼀个数组(data)、⼀个sortby数组和⼀个sortField，这样咱们就知道要在哪个字段上排序：
const customSort = ({data, sortBy, sortField}) => {
const sortByObject = duce(
(obj, item, index) => ({
...obj,
[item]: index
}), {})
return data.sort((a, b) => sortByObject[a[sortField]] - sortByObject[b[sortField]])
}
console.log(customSort({data:tasks, sortBy, sortField: 'status'}))
这样就可以按照咱们的⾃定义顺序排序，不过还有⼀个问题，如果列表中有⼀个status不同的项(不在咱们的排序顺序中)，就会出现问题。因此，为了处理这个问题，咱们需要设置⼀个默认的sort字段来捕获排序中不需要的所有项。
const tasksWithDefault = tasks.map(item => (
{
...item,
sortStatus: sortBy.includes(item.status) ? item.status:'other'
})
)
这次传递的是更新后的sort字段，那么现在就有了正确的排序顺序，列表底部还有包含状态为 other 的
项⽬。
完整代码：
const tasks = [
{ id: 1, title: "Job A", status: "done" },
{ id: 2, title: "Job B", status: "inProgress" },
{ id: 3, title: "Job C", status: "todo" },
{ id: 3, title: "Job D", status: "onHold" },
{ id: 4, title: "Job E", status: "inProgress" },
{ id: 5, title: "Job F", status: "todo" }
];
const sortBy = ["inProgress", "todo", "done"];
const customSort = ({ data, sortBy, sortField }) => {
const sortByObject = duce(
(obj, item, index) => ({
...obj,
[item]: index
}),
{}
);
return data.sort(
(a, b) => sortByObject[a[sortField]] - sortByObject[b[sortField]]
);
};
const tasksWithDefault = tasks.map(item => ({
...item,
sortStatus: sortBy.includes(item.status) ? item.status : "other"
}));
console.log(
customSort({
data: tasksWithDefault,
sortBy: [...sortBy, "other"],
sortField: "sortStatus"
})
)
;
运⾏结果：
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了⼤量的时间进⾏log 调试，这边顺便给⼤家推荐⼀个好⽤的BUG 监控⼯具 Fundebug。
作者：前端⼩智

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。