vue雙端算法代碼分析、數組轉樹（tree）結構

let oldArray = [1, 2, 3, 4, 5];
let newArray = [1, 2, 6, 4, 5];

function patch(oldArr, newArr) {
  let oldStart = 0;
  let oldEnd = oldArr.length - 1;
  let newStart = 0;
  let newEnd = newArr.length - 1;
  // 對比雙數組循環的好處是循環減少了，用時減少了
  while (oldStart <= oldEnd && newStart <= newEnd) {
    if (oldArr[oldStart] === newArr[newStart]) { // 比較前面
      oldStart++;
      newStart++;
    } else if (oldArr[oldEnd] === newArr[newEnd]) { // 比較後面
      oldEnd--;
      newEnd--;
    } else if (oldArr[oldStart] === newArr[newEnd]) { // 比較前面後面
      oldStart++;
      newEnd--;
    } else if (oldArr[oldEnd] === newArr[newStart]) { // 比較前面後面
      oldEnd--;
      newStart++;
    } else {
      // 插入新元素到 oldArr
      oldArr.splice(oldStart, 0, newArr[newStart]);
      oldStart++;
      oldEnd++;
      newStart++;
    }
  }
  // 刪除多餘的元素
  while (oldStart <= oldEnd) {
    oldArr.splice(oldStart, 1);
    oldEnd--;
  }
  while (newStart <= newEnd) {
    oldArr.splice(oldStart, 0, newArr[newStart]);
    oldStart++;
    newStart++;
  }
}
patch(oldArray, newArray)
// console.log(oldArray); // [1, 2, 6, 4, 5]
const flatArr = [
  { id: '01', parentId: 0, name: '節點1' },
  { id: '011', parentId: '01', name: '節點1-1' },
  { id: '0111', parentId: '011', name: '節點1-1-1' },
  { id: '02', parentId: 0, name: '節點2' },
  { id: '022', parentId: '02', name: '節點2-2' },
  { id: '023', parentId: '02', name: '節點2-3' },
  { id: '0222', parentId: '022', name: '節點2-2-2' },
  { id: '03', parentId: 0, name: '節點3' },
]
// 轉成樹形結構
function getData (arr) {
  // 利用兩層filter實現
  let data = arr.filter(item => {
    // 循環改變原數組裏的東西
    item.children = arr.filter(e => {
      if(item.id === e.parentId) {
        console.log(item);
      }
      return item.id === e.parentId
    })
    return !item.parentId
  })

  return data
}
const arrData = getData(flatArr)
console.log('arrData', arrData)