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