在使用JS請求API需求時經常會面對一長串的資料，比方說是一連串的會員資料、電影資料等等，為了將這些資料呈現在網頁上，我目前學到的無非利用迴圈配合template iteral的作法將資料呈現在想要的部分，但僅是這樣做的話會有個小缺點-舉個例子來看，很快的就能了解這個缺點為何。
想像一下你今天要請求的是一組電影資料，每一筆資料內都包含著電影名稱、影像以及id之類的訊息，今天你透過迴圈配合 template iteral 的做法將電影標題以及圖片呈現在網頁上，但若今天你希望使用者可以透過一個按鈕去顯示電影更多的細節，像是敘述、發行時間、累積銷售額之類的細項。 要知道，每一筆的資料會存在不同的頁面中，也就是說你需要根據對應的電影去請求不同的url位置。看到這裡應該一個頭兩個大了，我們請求的資料位置通常會是類似這樣的結構
主機位置/路徑/變數
我們需要根據每一筆資料去對變數這一項做對應的請求，但我們做的 template iteral 結構中並沒有辦法讓我們取得每一筆資料的…比方說電影id，這時候dataset這個東西就可以派上用場了。
簡單講解一下dataset的用法，你可以在任意元素中加入data-你想命名的屬性 = 對應的值
請參考這支codepen
在以上的範例中，我在student這個div中加入了data-name & data-id兩個屬性，接著就可以透過DOM的操作輕鬆利用這些值，從這個例子我們可以看出，dataset其實是一個DOMStringMap的物件，看起來非常像是Json檔(也許根本就是，現在的我還不太清楚)，它的優點在於將每個元素都轉成物件形式方便你去利用其中的值。
其實光看這篇文章真的很難理解為什麼要使用dataset，網路上關於這個新屬性的討論其實還不夠多，我之後再找充足的資料做練習，今天仍只是做個簡單的紀錄。
Danny的學習紀錄 