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

news2024/11/27 12:56:37

文章目录

  • 想要读这个表格,并且求第二列所有价格的和
  • 方法一:通过添加文件输入元素上传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 转换为字符串
  
}

如果需要处理非常大的浮点数,要考虑使用第三方库,如 bignumber.js 或 decimal.js,这些库提供了对任意精度的浮点数的支持。我这次用的是decimal

方法二:自动读取?

按照这篇文章的意思是只能通过input读取?

https://blog.51cto.com/u_16099178/6425473

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2235908.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

火山引擎云服务docker 安装

安装 Docker 登录云服务器。 执行以下命令&#xff0c;添加 yum 源。 yum update -y yum install epel-release -y yum clean all yum list依次执行以下命令&#xff0c;添加Docker CE镜像源。更多操作请参考Docker CE镜像。 # 安装必要的一些系统工具 sudo yum install -y yu…

人保财险(外包)面试分享

前言&#xff1a; 这是本月面的第三家公司&#xff0c;太难了兄弟们&#xff0c;外包都不好找了&#xff0c;临近年底&#xff0c;金九银十已经错过了&#xff0c;金三银四虽然存在&#xff0c;但按照这几年的行情&#xff0c;金九银十和金三银四其实已经是不复存在了&#xf…

【D3.js in Action 3 精译_039】4.3 D3 面积图的绘制方法及其边界标签的添加

当前内容所在位置&#xff1a; 第四章 直线、曲线与弧线的绘制 ✔️ 4.1 坐标轴的创建&#xff08;上篇&#xff09; 4.1.1 D3 中的边距约定&#xff08;中篇&#xff09;4.1.2 坐标轴的生成&#xff08;中篇&#xff09; 4.1.2.1 比例尺的声明&#xff08;中篇&#xff09;4.1…

美国大选——极具典型的可视化案例!GISer学起来

有人说可视化技术有啥意义&#xff0c;不就做个大屏么&#xff1f; 那真的小看了&#xff0c;就如下图这个美国大选来看&#xff0c;这么复杂混乱的信息&#xff0c;可视化技术给你梳理的明明白白的&#xff0c;简单、直观、形象、便于记忆。 让用户能够从繁杂信息中快速抓到重…

使用PyQt5设计一个简易计算器

目录 设计UI图 代码 结果展示 设计UI图 代码 from PyQt5 import QtCore, QtGui, QtWidgets from PyQt5.QtCore import * from PyQt5.QtGui import * from PyQt5.QtWidgets import QFileDialog, QMainWindow, QMessageBox from untitled import Ui_MainWindow import sysclass…

数据结构-数组(稀疏矩阵转置)和广义表

目录 1、数组定义 1&#xff09;数组存储地址计算示例①行优先②列优先 2&#xff09;稀疏矩阵的转置三元组顺序表结构定义 ①普通矩阵转置②三元组顺序表转置稀疏矩阵③稀疏矩阵的快速转置 3&#xff09;十字链表结构定义 2、广义表定义 1&#xff09;基本操作①GetHead②GetT…

cooladmin使用整理

1、后端关键字自动生成没有代码段提示&#xff0c;原因是拉取的项目代码中没有.vscode文件夹&#xff0c;复制一套至项目src同级即可 2、前端快速创建&#xff0c;在Entity完成后就去快速创建中选数据结构&#xff0c;这时没有对应的内容&#xff0c;数据结构是和controller层a…

Java 网络编程(一)—— UDP数据报套接字编程

概念 在网络编程中主要的对象有两个&#xff1a;客户端和服务器。客户端是提供请求的&#xff0c;归用户使用&#xff0c;发送的请求会被服务器接收&#xff0c;服务器根据请求做出响应&#xff0c;然后再将响应的数据包返回给客户端。 作为程序员&#xff0c;我们主要关心应…

Jmeter命令监控CPU等指标

JMeter 命令行执行脚本得到的报告中&#xff0c;是没有CPU、内存使用率等监控数据的&#xff0c;但是可以使用JMeter插件帮忙。 一、下载jmeter-plugins-manager.jar 下载后将文件放到jmeter安装包lib/ext目录下。打开Jmeter》菜单栏》选项》Plugins Manager 二、安装PerfMon…

ES + SkyWalking + Spring Boot:日志分析与服务监控(三)

目录 一、搭建SkyWalking 1.1 版本选择 1.2 下载安装 1.3 配置启动 1.4 SkyWalking UI介绍 二、Springboot项目使用 2.1 Agent下载 2.2 Agent配置skywalking oap地址 2.3 IDEA配置Agent地址 2.4 生成的ES索引介绍 三、在kibana上查看日志 四、问题和解决 3.1 日志…

如何快速搭建一个spring boot项目

一、准备工作 1.1 安装JDK&#xff1a;确保计算机上已安装Java Development Kit (JDK) 8或更高版本、并配置了环境变量 1.2 安装Maven&#xff1a;下载并安装Maven构建工具&#xff0c;这是Spring Boot官方推荐的构建工具。 1.3 安装代码编辑器&#xff1a;这里推荐使用Inte…

spring-第十三章 AOP

spring 文章目录 spring前言1.AOP介绍2.AOP七大术语3.切点表达式4.使用spring的AOP4.1概述4.2准备工作4.3基于注解方式使用AOP4.3.1准备目标类和目标方法4.3.2编写配置类4.3.3编写通知类4.3.4编写测试类4.3.5通知类型4.3.6切面的先后顺序4.3.7PointCut注解通用切点 4.4基于XML方…

jmeter常用配置元件介绍总结之安装插件

系列文章目录 1.windows、linux安装jmeter及设置中文显示 2.jmeter常用配置元件介绍总结之安装插件 3.jmeter常用配置元件介绍总结之取样器 jmeter常用配置元件介绍总结之安装插件 1.下载插件2.安装插件管理包3.不用插件管理包&#xff0c;直接官网插件下载安装 1.下载插件 jm…

MySQL 多数据库备份与恢复,包括查询,函数,SP

一、备份语句&#xff1a; mysqldump 可以用来导出单个数据库、多个数据库&#xff0c;甚至所有数据库的数据。以下是导出多个数据库到指定文件位置的语法和具体案例。 基本语法 mysqldump -u [username] -p[password] --databases [db1] [db2] ... > [file_path] -u: …

contenteditable实现需要一个像文本域一样的可编辑框

我这里是因为左上和右下有一个固定的模板&#xff0c;所有用textarea有点不方便&#xff0c;查了下还有一个方法可以解决就是在需要编辑的元素上加上 :contenteditable"true" 完整代码如下&#xff0c;因为这个弹窗是两用的&#xff0c;所以用messageType做了一下判…

linux 安装anaconda3

1.下载 使用repo镜像网址下载对应安装包 右击获取下载地址&#xff0c;使用终端下载 wget https://repo.anaconda.com/archive/Anaconda3-2024.02-1-Linux-x86_64.sh2.安装 使用以下命令可直接指定位置 bash Anaconda3-2024.02-1-Linux-x86_64.sh -b -p /home/anaconda3也…

如何选择适合的AWS EC2实例类型

在云计算的世界中&#xff0c;Amazon Web Services&#xff08;AWS&#xff09;提供了丰富的服务&#xff0c;其中Elastic Compute Cloud&#xff08;EC2&#xff09;是最受欢迎的服务之一。选择合适的EC2实例类型对于确保应用程序的性能和成本效益至关重要。我们九河云通过本文…

(蓝桥杯C/C++)——基础算法(下)

目录 一、时空复杂度 1.时间复杂度 2.空间复杂度 3.分析技巧 4.代码示例 二、递归 1.递归的介绍 2.递归如何实现 3.递归和循环的比较 4.代码示例 三、差分 1.差分的原理和特点 2.差分的实现 3.例题讲解 四、枚举 1.枚举算法介绍 2.解空间的类型 3. 循环枚举解…

7.5 inch电力线载波通信技术

7.5寸电子桌牌 产品型号 PE75R_D_W 尺寸 176.2*137.15*80mm 屏幕尺寸 7.5 inch 显示区域(mm) 163.2(H) * 97.92(V) 分辨率 800*480 显示技术 电子墨水屏双面显示 显示颜色 黑/白/红 外观颜色 银色 工作温度 0-40℃ 视角 180 支持内容格式 文本/图片/二维码…

Linux下的ADC

ADC ADC简介 ADC是 Analog Digital Converter 的缩写&#xff0c;翻译过来为模数转换器&#xff0c;ADC可以将模拟值转换成数字值。模拟值是什么呢?比如我们日常生活中的温度&#xff0c;速度&#xff0c;湿度等等都是模拟值。所以如果我们想测量这些模拟值的值是多少&#x…