資訊專欄INFORMATION COLUMN
簡介
數(shù)組、CSV、表格、工具
我們之前的兩期 數(shù)組轉(zhuǎn) CSV 表格數(shù)據(jù) 和 JSON 對象數(shù)組轉(zhuǎn)換 CSV 表格數(shù)據(jù) 中學(xué)習(xí)了轉(zhuǎn)化為 CSV 表格數(shù)據(jù)的代碼片段，今天就講講 如何把 CSV 表格數(shù)據(jù)轉(zhuǎn)換為 JSON 對象：
// 該源碼來自于 https://30secondsofcode.org
const CSVToJSON = (data, delimiter = ",") => {
const titles = data.slice(0, data.indexOf("
")).split(delimiter);
return data
.slice(data.indexOf("
") + 1)
.split("
")
.map(v => {
const values = v.split(delimiter);
return titles.reduce((obj, title, index) => ((obj[title] = values[index]), obj), {});
});
};
代碼分析
利用 取出表頭數(shù)據(jù) 并使用 Array.prototype.split 把表頭數(shù)據(jù)分割為 表頭字段數(shù)組用于構(gòu)造 JSON 對象的鍵值：
const titlesData = data.slice(0, data.indexOf("
"));
const titles = titlesData.split(delimiter);
取出表格數(shù)據(jù)并使用 Array.prototype.split 分割為行數(shù)組
const rows = data
.slice(data.indexOf("
") + 1)
.split("
")
使用 Array.prototype.map 遍歷所有行數(shù)據(jù)獲得對象數(shù)組：
return rows.map(v => {
// ...
// 返回創(chuàng)建對象
});
遍歷過程中進行數(shù)據(jù)分割 和 對象拼裝：
const values = v.split(delimiter);
titles.reduce((obj, title, index) => (obj[title] = values[index]), obj), {});
小技巧：利用 , 運算順序可以優(yōu)雅的寫出先賦值后返回數(shù)據(jù)的精簡代碼。使用場景
用戶上傳 CSV 表格數(shù)據(jù)轉(zhuǎn)化為 JSON 并上傳到服務(wù)端，這里不對 CSV 的 BOM 進行判斷和處理（相關(guān)內(nèi)容可以查看 你所不知道 ? BOM）。
title,content pushmetop,讓我們一起變得更好 sf,答題平臺 掘金,掘金是一個幫助開發(fā)者成長的社區(qū)
function importPostData(files) {
const reader = new FileReader();
reader.onload = function (e) {
const data = CSVToJSON(e.target.result)
// 發(fā)送數(shù)據(jù)請求到服務(wù)端
};
reader.readAsText(files[0]);
}
動手試試：利用 CSVToJSON 和 JSONtoCSV 實現(xiàn)一個簡單的數(shù)據(jù)庫？一起成長
在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。
如果您想讓更多人看到文章可以點個 點贊。
如果您想激勵小二可以到 Github 給個 小星星。
如果您想與小二更多交流添加微信 m353839115。
本文原稿來自 PushMeTop
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110171.html
簡介 數(shù)組、對象、CSV、表格、工具 我們在 每日 30 秒之 arrayToCSV 中一起學(xué)習(xí)了將數(shù)組數(shù)據(jù)轉(zhuǎn)化為 csv 表格數(shù)據(jù)并導(dǎo)出，那如果是對象數(shù)組怎么辦呢？小腦袋瓜轉(zhuǎn)得快的同學(xué)肯定會說：使用 Array.prototype.map 把需要導(dǎo)出的字段先遍歷取出，再使用 arrayToCSV 將其導(dǎo)出為 CSV 數(shù)據(jù)表格。 可是你有沒有想過如果一個對象數(shù)組數(shù)據(jù)非常之大時，使用 Array.p...
showImg(https://segmentfault.com/img/remote/1460000018771004?w=900&h=500); 簡介 數(shù)組、CSV、表格、工具 將一個數(shù)組轉(zhuǎn)化為逗號為分割符的字符串（CSV）即表格數(shù)據(jù)。 // 該源碼來自于 https://30secondsofcode.org const arrayToCSV = (arr, delimiter = ,) =...
showImg(https://segmentfault.com/img/remote/1460000018796041?w=900&h=500); 簡介 字符串、數(shù)字、布爾值、Null、Undefined、對象、數(shù)組、函數(shù)、判斷方法 JavaScript 中有兩種數(shù)據(jù)類型，分別是基本數(shù)據(jù)類型和引用數(shù)據(jù)類型： 基本數(shù)據(jù)類型 引用數(shù)據(jù)類型 Number、String、Boolean、Null...
摘要：是一個可以在線轉(zhuǎn)換表格的工具，支持表格表格和表格，并且還內(nèi)嵌了一個表格編輯器，像微軟的一樣編輯，使用非常方便。拿到對應(yīng)表格的后，可以直接在文檔中使用該文本。 showImg(https://segmentfault.com/img/bVbwJCE?w=1200&h=674); TableConvert 是一個可以在線轉(zhuǎn)換表格的工具，支持 Markdown 表格、CSV、JSON、XML...
閱讀 2745·2021-09-02 15:11
閱讀 918·2019-08-26 18:18
閱讀 1874·2019-08-26 11:57
閱讀 3329·2019-08-23 16:59
閱讀 2005·2019-08-23 16:51
閱讀 2313·2019-08-23 16:11
閱讀 3132·2019-08-23 14:58
閱讀 1113·2019-08-23 11:34
