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