[JS] Table 轉 Object 練習 part1

自從工作開始分前後端分離之後，JavaScript 的東西就比較少去鑽研。但近期工作又開始大量使用到 JavaScript ，開發的途中會需要重複使用一些迴圈函數。還記得為了因應瀏覽器的變化以及複雜程度， jQuery 的出現就讓開發者省去不少事情，DOM 的迴圈 each 可以直接從選擇器的 $(dom).each 來使用，演變到現在瀏覽器大多直接使用 querySelectorAll 的方法來跑 forEach， ECMAScript 的演化大大降低了對 jQuery 的依賴程度，開發前端開始探究起 JavaScript 的深度，進而演變許多框架，想要學好JavaScript MDN 就是個很好用的工具。

寫程式不需要一步到位，逐步漸進的達成目的，有機會再去把程式碼精簡調校，能夠理解其原理才會是最好的解法

這次就用個簡單的範例，當遇到表格的時候，要怎麼轉成 一般的 Plain Object ，這個例子也是我使用 Greasemonkey 腳本開發的時候，要將 DOM 的內容轉換成可以快速重複利用資料的做法，當使用腳本的時候，需要分解的網頁會是結果，要轉換成可利用的資料還需要經過一番抓取變換，熟悉操作之後就可以很容易地將資料轉換成畫面。

首先來一個範例：

<table border=1>
  <thead>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  </tbody>
</table>

這算是最簡單的表格，不會有太多錯誤例外判斷，簡單分成 thead 跟 tbody ，標題跟內容都很好的分塊了

以以往最直觀的 jQuery寫法 ，首先取得標題

let heads  = [];
$('thead th').each( function(i,node) {
    heads.push( $(node).text() )
})

接著，建立物件，把標題帶成 key 值，跑兩次迴圈把資料帶出

let tableObject = []
$('tbody tr').each( function(i,trNode) {
    let data = {}
    $(trNode).find('td').each( function(index, tdNode) { 
        data[ heads[index] ] =  $(tdNode).text() 
    })
    tableObject.push(data)
})
console.log( tableObject );

以下為範例，因為是 console 可能要開啟編輯器來看

當然現在主流都是寫原生，原生開發已經占去大多數的程式碼占比，所以該是拋開原生的時候了

範例程式碼：

let headData = Array.from(document.querySelectorAll('thead > tr > th')).map(n=>n.innerText)
console.log('headData', headData )

let tableObject = []
for(let trNode of document.querySelectorAll('tbody > tr') ){
  let data = {};
  Array.from(trNode.querySelectorAll('td')).forEach((n , index)=>{
    data[ headData[index] ] = n.innerText
  })
  tableObject.push(data)
}
console.log( 'tableObject ',tableObject )

這邊可以看到我用了大量的 ES6 語法，為了取得內容並轉換回陣列，使用了 Array.from ，可以看 MDN 文件或是文章，主要會這樣用是因為 querySelectorAll 回傳的會是 NodeList ，想要跑迴圈加上回傳數值就可以放到 Array.from 裡面當成 array 來跑，最後用了 map 方法，把資料內容回傳變成 陣列

接著用了 for of 方法把 NodeList 給進行迭代，接著用相同方法把 head 的 值給取出來，塞給 data，然後把數值塞入 td 的文字

最後push 到陣列中，這樣完成了一個 表格轉物件的方法，後面幾篇將會用不同方法給實現這幾段語法

[JS] Table 轉 Object 練習 part2