回歸基礎：JavaScript 中的數據格式轉換一例

👁 Image
...

常見問題

打個比方，你有一組數據，需要根據拼音首字母字母索引顯示在頁面上，如圖：

👁 Image
...

這種索引性的展示已經隨處可見。對於我們前端開發來說這種展示最喜歡的數據格式可能是這樣的：

👁 Image
...

或者這樣：

👁 Image
...

分享之前我還是要推薦下我自己的前端學習群：180442230，不管你是小白還是大牛，小編我都挺歡迎，不定期分享乾貨，包括我自己整理的一份2017最新的前端資料和零基礎入門教程，送給大家，歡迎初學和進階中的小夥伴

相信對於大多數的前端來說，這樣的數據去格式化模板都是非常受歡迎的。相比之下，對於上面的例子來說，第一種數據格式更加方便前端大多數的模板使用，而第二種方式更加直觀。然而，我們後端的同事吐給我們的很可能是這樣的數據格式：

👁 Image
...

相信大家都多次遇到過類似的問題，除了轉換數據格式外我找不到一個真正滿意的解決方案。對於前端來說最簡單辦法可能是叫後端轉換成你想要的數據格式。不過這肯定不是這篇文章想要說明的，我們需要自己動手將數據格式轉換成我們想要的。根據上面的例子，做直觀的做法是將數據按首字母分組，可惜的是 Javascript 的 Array 對象中沒有原生的 groupBy 方法，但我們自己添加一個不是太難。

groupBy

Javascript 提供了許多其他功能強大的方法，比如 map、filter、sort 等等。今天我們用一個 ES5 的方法 reduce。

reduce 方法的工作原理是 將累加器和數組中的每個元素 (從左到右)應用一個函數， 本質上它的目的是將一個數組 「減少」 成一個對象。詳細說明可以查看 MDN 文檔。下面就用 reduce 方法來實現 groupBy ：

👁 Image
...

這裡來稍微解析一下：首先，我們在 Array 的原型對象上添加一個 groupBy 方法，這意味我們可以在任何 Array 對象上調用這個方法，類似這樣：.groupBy(prop) 。其中 prop 參數使我們想要分組的屬性名。當然如果你覺得這樣做會污染 Array 的原型對象的話，你可以將其改寫成工具函數：

👁 Image
...

接下來我們看方法內部實現。

我們在需要處理的數組上調用 reduce 方法，並傳入兩個參數，第一個是 callback ，我們要在數組中的每個元素上運行的函數，第二個是累加器，本質上說這個參數是用於第一次調用 callback 函數的第一個參數。因為我們需要得到是一個對象，為此，我們使用一個空對象 {} 。

reduce方法將遍歷數組中的每個元素，通過傳入累加器和當前元素調用我們的 callback 函數。該 callback 函數的工作是找出將元素放在累加器中的位置，然後返回更新的累加器，具體實現：

我們希望根據給定屬性的值對所有數組元素進行分組。所以如果該屬性是 initial ，那麼在開始的例子中，起亞和奇瑞應該在一個分組中，因為他們的首字母都是q，

• 第 1 行：將獲取當前數組元素給定屬性的屬性值，為了展示需要，使用 toUpperCase 將其轉換為大寫字母。
• 第 2 行：是檢查我們是否已經為給定屬性的屬性值設置了一個新的數組，如果累加器中沒有該數組，則添加一個空數組。
• 第 3 行：將當前數組元素添加到剛剛添加的數組中。
• 第 4 行：返回更新的累加器，傳遞給下一次遍歷，因此下一個遍歷的數組元素可以更新到累加器上。

沒幾行代碼，就可以幫我們完整數據格式轉換。

示例

回調最開始的例子，我們來驗證一下我們的 groupBy 方法。

👁 Image
...

進一步轉換數據格式

好了，大功告成？或許這不是我們要的最終結果，實際工作中，以下的數據格式可能更加適用於我們前端模板：

👁 Image
...

那麼我們可能需要進一步裝換一下。思路也很簡單，將 groupBy 方法裝換出來的 cardGurop 對象再裝換一次：

👁 Image
...

總結

實際工作中，掌握一些數據格式裝換的技能非常有用，也非常常見，後端同事對於同一份數據可能只會給你一個接口或一種數據格式。除非你碰到了一個大好人，碰到個較真的會跟你談人生，誰都希望自己代碼的邏輯簡單。當然我這裡只是給了一個最簡單的示例，你可能會碰到數據格式裝換或者數據操作更加複雜的情況。學習 Javascript 基礎和原生對象的方法非常重要。

當然，你也可以使用一些工具類庫來解決問題，比如 Lodash 和 Underscore.js 都包含我們上面說的 groupBy 方法，當然還有很多其他有用的方法。不過對於一些有潔癖的工程師來說，一個簡單的小功能，引入一個類庫，確實有點不值。