前端高效排序相邻数据：appeal_type与detail_appeal_type分组方案
问题背景
在实际开发中，我们经常会遇到这样的数据结构：后台返回的数据中，每条记录都包含appeal_type和detail_appeal_type字段，且这两个字段的值存在关联关系。我们需要将相邻的具有相同appeal_type的记录进行分组，并在每个组内对detail_appeal_type进行排序，以实现更友好的数据展示。
解决方案思路
要实现高效的相邻数据排序，我们可以采用以下步骤：
遍历数据，识别相邻的相同appeal_type组
在每个组内对detail_appeal_type进行排序
保持数据的原始顺序，仅对需要排序的部分进行调整
实现代码
以下是几种不同的实现方式，你可以根据具体需求选择最适合的方案：
方案一：基础分组排序
// 假设原始数据格式如下
const rawData = [
{ id: 1, appeal_type: 'A', detail_appeal_type: 'A2' },
{ id: 2, appeal_type: 'A', detail_appeal_type: 'A1' },
{ id: 3, appeal_type: 'B', detail_appeal_type: 'B2' },
{ id: 4, appeal_type: 'B', detail_appeal_type: 'B1' },
{ id: 5, appeal_type: 'A', detail_appeal_type: 'A3' }
];
function groupAndSortAdjacent(data) {
if (data.length === 0) return [];
const result = [];
let currentGroup = [data[0]];
for (let i = 1; i < data.length; i++) {
// 检查当前记录的appeal_type是否与上一组相同
if (data[i].appeal_type === currentGroup[0].appeal_type) {
currentGroup.push(data[i]);
} else {
// 对当前组按detail_appeal_type排序并添加到结果
sortAndPushGroup(currentGroup, result);
// 开始新的一组
currentGroup = [data[i]];
}
}
// 处理最后一组
sortAndPushGroup(currentGroup, result);
return result;
}
function sortAndPushGroup(group, result) {
// 按detail_appeal_type升序排序
const sortedGroup = [...group].sort((a, b) => {
return a.detail_appeal_type.localeCompare(b.detail_appeal_type);
});
result.push(...sortedGroup);
}
// 使用示例
const sortedData = groupAndSortAdjacent(rawData);
console.log(sortedData);方案二：支持自定义排序规则
function advancedGroupAndSort(data, sortFn = null) {
if (data.length === 0) return [];
const defaultSortFn = (a, b) => a.detail_appeal_type.localeCompare(b.detail_appeal_type);
const actualSortFn = sortFn || defaultSortFn;
const result = [];
let currentGroup = [data[0]];
for (let i = 1; i < data.length; i++) {
if (data[i].appeal_type === currentGroup[0].appeal_type) {
currentGroup.push(data[i]);
} else {
// 使用自定义排序函数或默认排序
const sortedGroup = [...currentGroup].sort(actualSortFn);
result.push(...sortedGroup);
currentGroup = [data[i]];
}
}
// 处理最后一组
const finalSortedGroup = [...currentGroup].sort(actualSortFn);
result.push(...finalSortedGroup);
return result;
}
// 自定义排序示例：按detail_appeal_type降序
const customSortedData = advancedGroupAndSort(rawData, (a, b) => {
return b.detail_appeal_type.localeCompare(a.detail_appeal_type);
});方案三：React组件中的应用
import React, { useState, useEffect } from 'react';
const AppealList = () => {
const [originalData, setOriginalData] = useState([]);
const [sortedData, setSortedData] = useState([]);
// 模拟从API获取数据
useEffect(() => {
const fetchData = async () => {
// 这里替换为实际的API调用
const response = await fetch('/api/appeals');
const data = await response.json();
setOriginalData(data);
// 应用排序
const sorted = groupAndSortAdjacent(data);
setSortedData(sorted);
};
fetchData();
}, []);
// 引入前面定义的groupAndSortAdjacent函数
function groupAndSortAdjacent(data) {
// ... 函数实现同上
}
return (
<div className="appeal-list">
<h2>申诉列表</h2>
<ul>
{sortedData.map(item => (
<li key={item.id}>
<span className="appeal-type">{item.appeal_type}</span>
<span className="detail-type">{item.detail_appeal_type}</span>
</li>
))}
</ul>
</div>
);
};
export default AppealList;性能优化建议
对于大数据量的情况，可以考虑以下优化措施：
虚拟滚动：如果数据量非常大，只渲染可见区域的元素
Web Worker：将排序计算放在Web Worker中执行，避免阻塞UI线程
防抖处理：如果排序条件可能频繁变化，添加防抖机制
缓存结果：如果相同数据会多次排序，考虑缓存排序结果
总结
通过识别相邻的相同appeal_type组并对每组内的detail_appeal_type进行排序，我们可以实现高效的前端数据整理。本文提供的三种方案分别适用于不同场景：基础方案适合简单需求，高级方案支持自定义排序，React组件方案则展示了如何在框架中实际应用。根据你的具体业务需求和数据规模，选择合适的实现方式即可。