JavaScript:將CSV字串檔案轉換為二維物件陣列
CSV是逗號分隔值,儲存在副檔名為.csv的檔案中。這允許使用者以表格或電子表格格式儲存資料。
在本文中,我們將探討如何將CSV字串的資料轉換為二維物件陣列,其中字串的第一行定義檔案標題。我們將首先讀取這一行,然後將其餘值與之對映。
我們將使用以下函式,該函式將充當陣列和字串的原型函式,因為它在讀取檔案後對映資料時將很有幫助。
indexOf 函式
String.prototype.indexOf() 函式返回此引數字串第一次出現的第一個索引。返回的值為基於0的索引,如果此型別的字串不存在,則返回-1。
例如
str = 'How are you?'
str.indexOf('a');輸出
4
Slice 函式
此方法返回一個新陣列,其中包含實現它的陣列的一部分,並且原始陣列將保持不變。
例如
['a','b','c','d'].slice(1)
輸出
['b','c','d']
Map 函式
此方法在對每個元素呼叫提供的函式後返回一個新陣列。
例如
arr = [2, 4, 8, 16] newArr = arr.map( item => item/2) //Dividing every number by 2
輸出
[1, 2, 4, 8]
Split 函式
此方法用於將給定字串拆分為字串陣列。透過使用引數中提供的指定分隔符,將字串分隔成多個子字串。
例如
str = 'Tutorials Point'
arr = str.split(' ');輸出
[‘Tutorials’, ‘Point’]
Reduce 函式
JavaScript 中的此方法用於將陣列縮減為單個值,該值對陣列的每個元素從左到右執行提供的函式,並返回函式的值。此值儲存在累加器中。
例如
arr = [2,4,6,8]
arr.reduce(function(accumulator,currentValue){
return accumulator+currentValue;
},0)輸出
20
方法
我們將使用 JavaScript slice() 方法提取字串的部分並將其提取的部分返回到一個新的字串,以“
”作為第一次出現。資料值使用“
”作為分隔符儲存。我們將遍歷所有值,然後在陣列末尾對映每個值。
“storeKeyValue”變數將用於儲存每個鍵及其相應的值。
示例 1
在下面的示例中,我們將 CSV 字串中的值對映到二維物件陣列。
# index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<script>
function CSVstring_to_Array(data, delimiter = ',') {
/* Collecting the titles */
const titles = data.slice(0, data
.indexOf('
')).split(delimiter);
/* Storing the value of each cell*/
const titleValues = data.slice(data
.indexOf('
') + 1).split('
');
/* Mapping these values with the title */
const ansArray = titleValues.map(function (v) {
/* Values variable will store individual
title values*/
const values = v.split(delimiter);
/* storeKeyValue variable will store
object containing each title
with their respective values*/
const storeKeyValue = titles.reduce(
function (obj, title, index) {
obj[title] = values[index];
return obj;
}, {});
return storeKeyValue;
});
return ansArray;
};
var inputString1 = "Name,EmpId, Salary
Steve,001,50000
Bill,002,60000";
console.log(CSVstring_to_Array(inputString1));
var inputString2 = "ProductName,Price,Category
Smartphone,10000,Electronics
Face
Cream,500,Beauty
Shoes,2000,Footwear";
console.log(CSVstring_to_Array(inputString2,';'));
</script>
</body>
</html>輸出
在成功執行上述程式後,瀏覽器將顯示以下結果:
Welcome To Tutorials Point
在控制檯中,您將找到所有計算結果,請參見下面的螢幕截圖:

廣告
資料結構
網路
關係資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP