JavaScript 如何将CSV字符串文件转换为二维对象数组

CSV 是一个以逗号分隔的值文件，具有 .csv 扩展名，允许以表格形式保存数据。

在本文中，我们将学习如何将 CSV字符串的数据转换为二维对象数组，其中字符串的第一行是标题行，使用 JavaScript 。

给定逗号分隔值（CSV）字符串到二维数组，使用Javascript函数。

Input: 'Name,Roll Number \n Rohan,01 \n Aryan,02' 

Output:  [
             {Name: "Rohan", Roll Number: "01"},
             {Name: "Aryan", Roll Number: "02"}
        ]
// With delimiter ;    

Input: 'Name;Roll Number \n Rohan;01 \n Aryan;02' 

Output:    [
             {Name: "Rohan", Roll Number: "01"},
             {Name: "Aryan", Roll Number: "02"}
]

我们必须了解一些在此方面有帮助的数组和字符串原型函数。

indexOf函数： String.prototype.indexOf() 函数可以找到给定字符串中第一个出现的参数字符串的索引，返回的值是基于0的索引。

示例：

str = 'How\ n are \n you?' 

str.indexOf('\n');

输出：

切片函数： 数组的slice()方法返回一个包含部分数组的新数组，并且原始数组保持不变。

示例：

['a','b','c','d'].slice(1)

输出：

['b','c','d']

地图函数： Array.prototype.map() 方法返回一个新数组，其中包含对每个元素调用提供的函数的结果。

示例：

arr = [2, 4, 8, 16]

// Dividing each element of the array by 2
newArr = arr.map( item => item/2)

输出：

[1, 2, 4, 8]

Split函数： String.prototype.split()方法被用来通过使用在参数中提供的指定分隔符将给定的字符串分割成一个字符串数组。

示例：

str = "Geeks for Geeks"

// Split the array when ' ' is located
arr = str.split(' ');

输出：

[ 'Geeks', 'for', 'Geeks' ]

减少函数： JavaScript中的 Array.prototype.reduce() 方法用于将数组减少为单个值，并对数组的每个元素从左到右执行提供的函数，函数的返回值存储在累加器中。

示例：

 arr = [2,4,6,8]

 // Here 0 is the initial value of the accumulator
 // while traversing, currentValue has been added

 arr.reduce(function(accumulator,currentValue){
     return accumulator+currentValue;
},0)

输出:

方法：

JavaScript字符串 slice() 方法提取字符串的部分，并以‘\n’作为第一次出现的分隔符返回提取的部分。
数据值使用“\n”作为分隔符存储。
JavaScript map() 函数将遍历所有标题值数组的值，并将每个对象附加到数组的末尾。
“storeKeyValue”变量用于存储每个键及其对应的值。

示例： 在此示例中，我们将使用JavaScript的slice()、map()、split()和reduce()方法将逗号分隔的值（CSV）转换为JavaScript数组。

JavaScript

<script>
    function CSVstring_to_Array(data, delimiter = ',') {
     
        /* This variable will collect all the titles
           from the data variable 
           ["Name", "Roll Number"] */
         
        const titles = data.slice(0, data
            .indexOf('\n')).split(delimiter);
     
        /* This variable will store the values
           from the data
           [ 'Rohan,01', 'Aryan,02' ] */
        const titleValues = data.slice(data
            .indexOf('\n') + 1).split('\n');
     
        /* Map function will iterate over all 
           values of title values array and 
           append each object at the end of 
           the array */
        const ansArray = titleValues.map(function (v) {
     
            /* Values variable will store individual 
               title values         
               [ 'Rohan', '01' ] */
            const values = v.split(delimiter);
     
            /* storeKeyValue variable will store 
               object containing each title
               with their respective values i.e 
               { Name: 'Rohan', 'Roll Number': '01' } */
            const storeKeyValue = titles.reduce(
                function (obj, title, index) {
                    obj[title] = values[index];
                    return obj;
                }, {});
     
            return storeKeyValue;
        });
     
        return ansArray;
    };
     
    var inputString1 = "Name,Roll Number\nRohan,01\nAryan,02";
    console.log(CSVstring_to_Array(inputString1));
     
    var inputString2 = "Name;Roll Number\nRohan;01\nAryan;02";
    console.log(CSVstring_to_Array(inputString2,';'));
</script>

输出结果：

JavaScript 如何将CSV字符串文件转换为二维对象数组