如何避免每次排序/过滤发起fetch请求？全局数组排序异常排查

问题根源 #

• 直接修改原始数据引用：全局数组存储的是fetch返回的原始数据引用，第一次排序后会直接修改数组内的BList（对应代码中的somethingInTheJsonObjArrayThatIWantToSort），后续排序都是基于已修改后的数组，而非初始数据。
• 排序函数逻辑不完整：现有的sortDescendingBy和sortAscendingBy只处理了a[prop] > b[prop]的情况，未覆盖相等或a[prop] < b[prop]的场景，导致sort API无法正确判断排序顺序，尤其在已排序的数组上会出现无变化的情况。
• 拼写错误：排序函数sortAsendingBy存在拼写错误（应为sortAscendingBy），可能导致调用异常。

修复方案 #

1. 保存原始数据的深拷贝：将fetch获取的原始数据做深拷贝后存入全局变量，每次排序时基于原始拷贝生成新的操作数组，避免修改原始基准数据。
2. 完善排序函数逻辑：补充所有比较分支，确保返回sort API要求的-1、0、1三种值，保证排序逻辑的正确性。
3. 修正函数拼写错误：将sortAsendingBy修正为sortAscendingBy，避免调用失败。

修改后的全局数据存储与排序代码 #

// 存储原始数据的深拷贝，作为排序基准
let originalData;

fetch("theData.json")
  .then(response => response.json())
  .then(objArray => {
    // 深拷贝原始数据，避免后续修改影响基准
    originalData = JSON.parse(JSON.stringify(objArray));
    mainFunctionThatPresentsTheData(objArray);
  });

function customSort(sortOrder, byWhatAttribute) {
  output.innerHTML = "";
  // 基于原始数据的拷贝进行排序操作，不修改基准数据
  const sortedData = JSON.parse(JSON.stringify(originalData));
  
  for (let i = 0; i < sortedData.length; i++) {
    sortedData[i].BList.sort(sortOrder(byWhatAttribute));
  }

  mainFunctionThatPresentsTheData(sortedData);
}

完善后的排序函数 #

export function sortDescendingBy(prop) {
  return function (a, b) {
    if (a[prop] > b[prop]) return -1;
    if (a[prop] < b[prop]) return 1;
    return 0; // 相等时返回0，保证排序稳定性
  };
}

// 修正拼写错误：sortAsendingBy → sortAscendingBy
export function sortAscendingBy(prop) {
  return function (a, b) {
    if (a[prop] > b[prop]) return 1;
    if (a[prop] < b[prop]) return -1;
    return 0; // 相等时返回0
  };
}

修正后的按钮事件绑定 #

sortBySomethingAscendingButton.addEventListener("click", () => {
  customSort(sortAscendingBy, "C"); // 示例按属性C排序，可替换为目标属性
});
sortBySomethingDescendingButton.addEventListener("click", () => {
  customSort(sortDescendingBy, "C");
});

内容的提问来源于stack exchange，提问作者user15489665