使用sort對類似於1-1、2-1、1-1-1、2-2類型的數據進行排序

1. 創建模擬數據源然後對該數據進行排序

  const unitList = [
    { unitName: "1-1" },
    { unitName: "1" },
    { unitName: "1-3" },
    { unitName: "1-2" },
    { unitName: "2-2" },
    { unitName: "2-1" },
    { unitName: "1-1-1" },
    { unitName: "2-1-1" },
    { unitName: "1-1-1-1-1-1" },
  ];

解決方案

解決方法1(最優)

unitList .sort((s, t) => {
  if (s.unitName < t.unitName) return -1;
  else return 1;
  return 0;
})

解決方法2

解決思路：把需要排序得value轉換成整數，然後通過數值對比進行排序

  // 拿到最大位數比如1-1的位數是2   1-1-1的位數是3
  // replace(/-/g, "")是將字符中的-轉換爲空  比如把1-1轉換成11最終拿數字對比排序
  const maxLength = `${Math.max(
    ...unitList.map((item) => +item.unitName.replace(/-/g, ""))
  )}`.length;
  unitList.forEach((item) => {
    // 拿到當前位數
    const l = `${item.unitName.replace(/-/g, "")}`.length;
    // 對比差異位數
    const diff = maxLength - l;
    // 將差異位數補齊比如1-1和1-1-1 那麼此時的補齊差異位數的結果就是1-1-0和1-1-1
    item.tempUnitName = item.unitName + Array(diff).fill("-0").join("");
  });
  // 把每個字符中的-使用正則轉換爲空那麼最終就是[ { unitName: "11" }, { unitName: "1" }, { unitName: "13" }, { unitName: "12" }, { unitName: "22" }, { unitName: "21" }, { unitName: "111" }, { unitName: "211" }, { unitName: "111111" }] 然後使用sort對比每一個元素實現最終的排序
  unitList.sort((a, b) => {
    const tempA = +a.tempUnitName.replace(/-/g, "");
    const tempB = +b.tempUnitName.replace(/-/g, "");
    return tempA - tempB;
  });

解決方法3（推薦）

解決思路：把需要排序得value轉換成小數，然後通過數值對比進行排序

  // a-正則匹配到得內容  b-正則匹配到得內容的位置
  const replaceFunction = (a, b) => {
    if (b === 1) return ".";
    return "";
  };
  unitList.sort((a, b) => {
    const tempA = +a.unitName.replace(/-/g, replaceFunction);
    const tempB = +b.unitName.replace(/-/g, replaceFunction);
    return tempA - tempB;
  });

3. 最終的結果是這樣的

第二種辦法相比第一種複雜度提高了很多，第二種也是我本人的解決方法，後來聽了一個朋友的想法和意見接觸到了第一種解決方法。

大家如有別的解決辦法歡迎交流學習，在此奉上本人的微信號yzh20191124ljt希望能和前端的朋友們共同學習