【前端】读取csv文件，将数据转换为对象。spilce与slice的区别

原创已于 2024-09-05 23:22:42 修改 · 666 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2024-09-05 23:22:16 首次发布

一. 解决思路

解决思路：将csv文件的第一行作为key，后续的每一行作为value存入对象数组。
在这里插入图片描述

二. 代码写法

2 .1 JS写法

2.1.1 数组.map(function(item, index,arr){})

Item: 这个表示的是每一项对应的索引。
index: 这个表示的是每一项对应的索引。
arr：原数组。

2.1.2 数组.splice() 与数组.slice() 的区别

数组.splice() : 有两个作用，第一个是截取原数组中的数据；第二个是删除并插入数据。
数组.slice() : 将截取出来的数据，放入一个新的数组。
最本质的区别在于这个方法会改变原数组。

数组.splice(start,amount) //截取数据，改变原数组 start是开始索引，amount是截取个数 改变原数组，被截取的数据被删除

//截取数据，改变原数组 start是开始索引，amount是截取个数，后面的item1，item2…是要加入原数组的数据
数组.splice(start,amount,item1,item2…) 

数组.slice(start,end)  //截取数据，不改变原数组，start是开始索引，end是结束索引

splice方法的结果
slice方法的结果

fetch('./Medical.csv').then(response => response.text()).then(csvString => {
    //将换行符作为分割符，拆分数据，读取每一行的数据
    const rows = csvString.split('\n');
    //继续拆分每一行，拆分成每一个数据（将csv文件读取为二维数组）
    const data = rows.map(row => row.split(','));
    console.log(data);
    results = [];
    //生成对象数组
    for(var i =1;i<data.length;i++){
        var result = {};
        //将每一行数组保存成一个对象
        for(var j=0;j<data[0].length;j++){
            result[data[0][j]]=data[i][j];
        }
        //深拷贝与浅拷贝的区别--深入研究一下
        results.push(JSON.parse(JSON.stringify(result)));
    }
    console.log(results);
});

2.2 python写法

for i in range(1,len(data_array)):
    #这个zfill()是填充字符串成5位字符串
    id = str(i).zfill(5)    
    exp_data = {}
    for j in range(0,len(data_array[0])) :
        exp_data[data_array[0][j]] = data_array[i][j]
    exp_data["id"] = id
    results.append(exp_data)