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