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

文章目录

  • 想要读这个表格,并且求第二列所有价格的和
  • 方法一:通过添加文件输入元素上传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); // 输出:objectfor (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.mzph.cn/diannao/59744.shtml

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

相关文章

C语言初阶必会的练习题(3)之位操作符(^ 、、>>等)的应用

C语言初阶必会的练习题&#xff08;3&#xff09; 放在最前面的1、不允许创建临时变量&#xff0c;交换两个整数的内容1.1、分析&#xff1a;见代码注释&#xff08;a&#xff09;方法 1&#xff08;b&#xff09;方法 2 1.2、结果展示方法 1 的 结果&#xff1a;方法 2 的 结果…

基于SSM框架的乡村农户对口扶贫系统

基于SSM框架的乡村农户对口扶贫系统。 设计步骤&#xff1a; 项目架构创建&#xff1a;首先创建项目的基本架构&#xff0c;包括com.zc.xxx路径下的文件和resources资源文件夹。 SSM架构&#xff1a;使用Spring、SpringMVC、MyBatis作为后端架构&#xff0c;采用POJO—Dao—…

前端Web用户 token 持久化

用户 token 持久化 业务背景&#xff1a;Token的有效期会持续一段时间&#xff0c;在这段时间内没有必要重复请求token&#xff0c;但是pinia本身是基于内存的管理方式&#xff0c;刷新浏览器Token会丢失&#xff0c;为了避免丢失需要配置持久化进行缓存 基础思路&#xff1a…

【学习笔记】SAP ABAP——OPEN SQL(一)【INTO语句】

【INTO语句】 结构体插入(插入一条语句时) SELECT...INTO [CORRESPONDING FIELDS OF] <wa> FROM <db> WHERE <condition>.内表插入(插入多条语句时) SELECT...INTO|APPENDING [CORRESPONDING FIELDS OF] TABLE <itab>FROM <db> WHERE <con…

微服务透传日志traceId

问题 在微服务架构中&#xff0c;一次业务执行完可能需要跨多个服务&#xff0c;这个时候&#xff0c;我们想看到业务完整的日志信息&#xff0c;就要从各个服务中获取&#xff0c;即便是使用了ELK把日志收集到一起&#xff0c;但如果不做处理&#xff0c;也是无法完整把一次业…

Qt中实现高准确率的语音识别

选择语音识别引擎 开源语音识别项目中&#xff0c;以下两款工具可以用于支持中英文识别&#xff0c;并且与Qt兼容&#xff1a; Vosk&#xff1a;Vosk是一个开源的语音识别工具&#xff0c;支持中英文及多种语言&#xff0c;具备离线识别能力&#xff0c;且不依赖互联网。 Padd…

c语言中的线程管理pthread详解

在C语言中,多线程编程常用的POSIX线程(POSIX Threads, pthreads)库主要由pthread.h头文件提供。pthread.h定义了许多用于线程创建、管理、同步的函数和数据结构。下面是pthread.h中的核心概念和主要函数的详细介绍。 1. 基本概念 线程:线程是一个轻量级的进程,可以并发执…

十五:java web(7)-- Spring Boot

目录 1. Spring Boot 简介 1.1 简介 1.2 Spring Boot 的特点 1.3 Spring Boot 和 Spring 的关系 2. Spring Boot 快速入门 2.1 创建第一个 Spring Boot 项目 3. Spring Boot 配置管理 3.1 application.properties 和 application.yml 配置 这两种都可以 好像现在更推荐…

关于打开网页非常慢的解决方法

方法一&#xff1a;刷新dns缓存 ipconfig /flushdns方法二&#xff1a;许多网站&#xff0c;太落后&#xff0c;不支持ipv6&#xff0c;所以关闭ipv6即可

使用Python简单实现客户端界面

服务端实现 import threading import timeimport wx from socket import socket, AF_INET, SOCK_STREAMclass LServer(wx.Frame):def __init__(self):wx.Frame.__init__(self, None, id1002, titleL服务器端界面, poswx.DefaultPosition, size(400, 450))# 窗口中添加面板pl …

JDK1.5 java代码打包jar HmacSha256

文章目录 demo地址背景实现编写代码编译class文件打包 JAR 文件执行生成的 JAR 文件辅助验证方式 常见问题和解决方法常规生成jar方案maven插件idea工具 demo地址 https://github.com/xiangge-zx/HmacSha256 背景 最近接到一个需求,做一个可以用来HmacSha256加密的小工具&am…

ubuntu 22.04 server 安装 xtrabackup 2.4 qpress LTS

ubuntu 22.04 server 安装 xtrabackup 2.4 qpress LTS 参考 https://docs.percona.com/percona-xtrabackup/innovation-release/apt-repo.html https://www.ubuntuupdates.org/ppa/percona_server_with_xtradb?distjammy centos7 xtrabackup mysql&#xff08;8&#xff0…

MySQL 8.0中的‘caching_sha2_password‘身份验证插件问题

使用Navicat Premium 12连接MySQL数据库时会出现Authentication plugin ‘caching_sha2_password’ cannot be loaded的错误。 出现这个原因是mysql8 之前的版本中加密规则是mysql_native_password,而在mysql8之后,加密规则是caching_sha2_password, 解决问题方法有两种,一种是…

Go八股(Ⅳ)***slice,string,defer***

***slice&#xff0c;string&#xff0c;defer*** 1.slice和arry的区别 arry&#xff1a; Go语言中arry即为数据的一种集合&#xff0c;需要在声明时指定容量和初值&#xff0c;且一旦声明就长度固定&#xff0c;访问时按照索引访问。通过内置函数len可以获取数组中的元素个…

雪花算法(Snowflake Algorithm)C# 实现版本

这里采用10位的工作ID,当时间回拔时,采用工作ID增加1来避免生成与旧的ID重复。 雪花算法的结构 雪花算法生成的ID是一个64位的Long型数字,结构如下: 高41位:时间戳(timestamp)中间10位:工作节点ID(workerId),用来避免时间回拔。低12位:序列号(sequence)时间戳(…

服务器虚拟化:构建高效、灵活的数据中心

服务器虚拟化&#xff1a;构建高效、灵活的数据中心 在当今数字化时代&#xff0c;服务器虚拟化已经成为构建高效、灵活数据中心的关键技术。通过服务器虚拟化&#xff0c;企业可以将物理服务器划分为多个虚拟服务器&#xff0c;从而提高资源利用率、降低成本、增强灵活性和提…

2024-11-07 问AI: [AI面试题] 解释推荐系统的概念

文心一言 推荐系统是一种信息过滤系统&#xff0c;旨在预测用户对物品的“评分”或“偏好”&#xff0c;并为用户提供个性化的推荐。以下是关于推荐系统的详细解释&#xff1a; 一、定义与功能 推荐系统通过分析和利用用户的历史行为、偏好和其他信息&#xff0c;来预测用户…

Win系统通过命令行查看笔记本电池损耗/寿命/健康

在 Windows 10/11 系统中&#xff0c;可以通过指令查看笔记本电池的寿命情况&#xff0c;方法如下&#xff1a; 0&#xff0c;打开cmd/终端 键盘快捷键&#xff1a;Win R&#xff0c;然后输入cmd&#xff0c;点击【确定】 1&#xff0c;执行命令 在命令行中输入下面指令并按…

103 - Lecture 1

Introduction to Database 一、Introduction to Database Systems 1. 数据的定义 What is Data? EX: data could be a docx file storing your project status report; data could be a spreadsheet containing information • 数据只有在设计的场景中才有意义。&#xff…

前端加密方式详解与选择指南

在当今数字化时代&#xff0c;前端数据安全的重要性日益凸显。本文将深入探讨前端加密的多种方式&#xff0c;为你提供选择适合项目加密方式的实用策略&#xff0c;并分享一些实际案例及相应代码。 一、前端加密方式汇总 &#xff08;一&#xff09;HTTPS 加密 HTTPS 是在 H…