資訊專欄INFORMATION COLUMN
簡介
數組、對象、CSV、表格、工具
我們在 每日 30 秒之 arrayToCSV 中一起學習了將數組數據轉化為 csv 表格數據并導出，那如果是對象數組怎么辦呢？小腦袋瓜轉得快的同學肯定會說：“使用 Array.prototype.map 把需要導出的字段先遍歷取出，再使用 arrayToCSV 將其導出為 CSV 數據表格?！?/p>
可是你有沒有想過如果一個對象數組數據非常之大時，使用 Array.prototype.map 和 arrayToCSV 將會多出一倍的數據遍歷操作。作為優化狂魔的我們（那之前文章的使用場景還這么用?。。。┛隙ú辉试S這種事情發生，那就一起來學習一個用于對象數組且少花一半時間的轉換表格函數。
// 該源碼來自于 https://30secondsofcode.org
const JSONtoCSV = (arr, columns, delimiter = ",") =>
[
columns.join(delimiter),
...arr.map(obj =>
columns.reduce(
(acc, key) => `${acc}${!acc.length ? "" : delimiter}"${obj[key] || ""}"`,
""
)
)
].join("
");
代碼分析
把傳入需要提取的對象屬性作為表頭用分隔符分割開來：
columns.join(delimiter)
使用 Array.prototype.map 來遍歷對象數組獲得 表頭屬性屬性對應的值 并將其解構開：
...arr.map(obj => fn)
當屬性不存在時利用 || 技巧來初始化數據，并利用 Array.prototype.reduce 來拼接數據，注意 分隔符 應該在每兩個數據之間：
columns.reduce((acc, key) => {
let value = obj[key] || ""
acc += !acc.length ? "" : delimiter
acc += `"${value}"`
}, "")
把表頭數組和對應的屬性數據組成的數組用 來拼接數據：
[..., ...].join("
")
使用場景
將頁面上用戶數據導出為 Excel 表格并且提供下載，本文的 JSONtoCSV 直接使用屬性作為表頭數據，機智的同學可以自己增加上表頭默認字段來將 JSONtoCSV 函數變得更加完美。
