Vue（JavaScript）读取csv表格并求某一列之和（大浮点数处理: decimal.js）

news2024/11/8 15:30:34

文章目录

想要读这个表格，并且求第二列所有价格的和
方法一：通过添加文件输入元素上传csv
- 完整（正确）代码
- 之前的错误部分
- - 因为价格是小数，所以下面的代码出错。
  - 如果把parseFloat改成parseInt，那么求和没有意义，因为不准确。如果要用parseFloat，是不能用BigInt的。BigInt 只能表示整数，不能直接用于表示浮点数。
  - 如果需要处理非常大的浮点数，要考虑使用第三方库，如 bignumber.js 或 decimal.js，这些库提供了对任意精度的浮点数的支持。我这次用的是decimal
- 方法二：自动读取？

想要读这个表格，并且求第二列所有价格的和

在这里插入图片描述

方法一：通过添加文件输入元素上传csv

完整（正确）代码

选择了csv文件之后，会自动求和并显示在price sum中
在这里插入图片描述

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <p>Price sum: {{ priceSumFinal }}</p>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import Decimal from 'decimal.js';

let priceSumFinal = ref(0)

const handleFileUpload=(event)=> {
  // 获取用户选择的文件
  const file = event.target.files[0];

  // 创建一个新的FileReader对象
  const reader = new FileReader();

  // 监听文件读取完成事件
  reader.onload = () => {
    // 将读取的文件内容传递给处理CSV数据的函数
    parseCSVData(reader.result);
  };

  // 读取文件内容
  reader.readAsText(file);
}

const parseCSVData = (data)=>{
  // 解析CSV文件内容，并将其转换为对应的数据结构
  // 例如，将CSV中的每一行转换为一个对象
  const rows = data.split('\n');
  const headers = rows[0].split(',');
  const csvData = [];

  for (let i = 1; i < rows.length; i++) {
    const row = rows[i].split(',');
    const rowData = {};

    for (let j = 0; j < headers.length; j++) {
      rowData[headers[j]] = row[j];
    }

    csvData.push(rowData);
  }

  console.log(csvData);
  
  // 初始化 priceSum 为 Decimal 类型
  let priceSum = new Decimal(0);
  console.log(typeof priceSum); // 输出：object

  for (let i = 1; i < 100; i++) {
    // 使用 Decimal 来处理每个 price 值
    let priceDecimal = new Decimal(csvData[i].price);
    priceSum = priceSum.plus(priceDecimal);
  }

  console.log(priceSum.toString()); // 输出：将 Decimal 转换为字符串
  priceSumFinal.value = priceSum.toString()

  }
  
</script>

之前的错误部分

因为价格是小数，所以下面的代码出错。

如果把parseFloat改成parseInt，那么求和没有意义，因为不准确。如果要用parseFloat，是不能用BigInt的。BigInt 只能表示整数，不能直接用于表示浮点数。

let priceSum = BigInt(0);
console.log(typeof priceSum); // 输出：bigint

// 遍历 csvData 数组，累加 price 值
for (let i = 1; i < csvData.length; i++) {
  // 确保 csvData[i].price 是一个可以转换为 BigInt 的字符串
  let priceBigInt = BigInt(parseFloat(csvData[i].price));
  priceSum += priceBigInt;
}

console.log(priceSum.toString()); // 输出：将 BigInt 转换为字符串
  
}