JavaScript 整理資料的範例

得多加強這部分的能力。

簡述

這是來自 Lidemy 第五期期中測驗 的題目。做完後發現我對「資料整理」的部分不夠熟，所以想記錄下來。

題目：

給你一筆資料：

[
  {id: 1, value: 43},
  {id: 1, value: 213},
  {id: 2, value: 321},
  {id: 3, value: 2},
  {id: 3, value: 345},
  {id: 4, value: 555},
  {id: 4, value: 44},
  {id: 3, value: 33},
  {id: 3, value: 199},
]

請整理成這樣：

[
  {id: 1, value: [43, 213]},
  {id: 2, value: 321},
  {id: 3, value: [2, 345, 33, 199]},
  {id: 4, value: [555, 44]}
]

簡單來說就是「把重複出現 id 的變成一個，而值要是 value 湊成的陣列（或單一值）」

附註：順序不可以改變，例如原本是 2 => 1 => 3 的話結果也要是先 2 => 1 => 3 這樣排。

思路

這題可以這樣子想：

1. 先建立一個物件，把每個 id 出現的 value 給存起來
2. 遍歷剛剛建好的物件，再整理成最後的格式

function solve(arr) {
  const result = [];
  // 第一步：把每個 id 對應的 value 存起來
  const valuesObject = retrieveValues(arr);
  // 第二步：遍歷物件，重新整理
  for (let key in valuesObject) {
    if (valuesObject[key].length === 1) {
      // 只有一個 value 就把陣列拿掉
      result.push({
        id: Number(key),
        value: valuesObject[key][0]
      })
    } else {
      result.push({
        id: Number(key),
        value: valuesObject[key]
      })
    }
  }
  return result;
}
function retrieveValues(arr) {
  /* 
    預期產出：{
      ' 1': [30, 22],
      ' 2': [100],
      ' 3': [33, 55]
    }
  */
  const collection = {};
  // 附註：這邊存 ' 1' 是因為用 '1' 會被轉成「數字」重新排序，
  // 例如原本 {'5' : 1, '1': 2} 變成 {'1': 2, '5': 1}，
  // 所以一定要加上空格，才不會被轉成數字
  for (const item of arr) {
    // 已存在的 id 就直接 push
    if (' ' + item.id in collection) {
      collection[' ' + item.id].push(item.value)
    } else {
      // 不存在就建一個新的
      collection[' ' + item.id] = [item.value]
    }
  }
  return collection
}

我也不知道為什麼一開始沒有想到這種解法，可能我真的太久沒做題目了吧 QQ