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