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—…

微服务透传日志traceId

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

十五: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即可

JDK1.5 java代码打包jar HmacSha256

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

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

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

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…

【大数据学习 | kafka高级部分】kafka中的选举机制

controller的选举 首先第一个选举就是借助于zookeeper的controller的选举 第一个就是controller的选举&#xff0c;这个选举是借助于zookeeper的独享锁实现的&#xff0c;先启动的broker会在zookeeper的/contoller节点上面增加一个broker信息&#xff0c;谁创建成功了谁就是主…

关于几种卷积

1*1卷积 分组卷积&深度可分离卷积 空洞卷积、膨胀卷积 转置卷积 https://zhuanlan.zhihu.com/p/80041030 https://yinguobing.com/separable-convolution/#fn2 11的卷积可以理解为对通道进行加权&#xff0c;对于一个通道来说&#xff0c;每个像素点加权是一样的&am…

OCR、语音识别与信息抽取:免费开源的AI平台在医疗领域的创新应用

一、系统概述 在医疗行业中&#xff0c;大量数据来自手写病历、医学影像报告、患者对话记录等非结构化数据源。这些数据常常存在信息碎片化和管理困难的问题&#xff0c;给医务人员的工作带来了不便。思通数科AI多模态能力平台正是为了解决这一行业痛点而生&#xff0c;产品集…

Git进阶(十八):git rebase详解

文章目录 一、前言二、rebase 图解三、应用示例四、重建提交历史五、rebase VS merge六、拓展阅读 一、前言 rebase 使用方法 git rebase [基节点] git rebase [基节点] [待变基节点]rebase后面的参数可以是两个&#xff0c;也可以是一个&#xff0c;当rebase为一个参数的时…

【React】条件渲染——逻辑与运算符

条件渲染——逻辑与&&运算符 你会遇到的另一个常见的快捷表达式是 JavaScript 逻辑与&#xff08;&&&#xff09;运算符。在 React 组件里&#xff0c;通常用在当条件成立时&#xff0c;你想渲染一些 JSX&#xff0c;或者不做任何渲染。 function Item({ nam…

《深度学习》——深度学习基础知识(全连接神经网络)

文章目录 1.神经网络简介2.什么是神经网络3.神经元是如何工作的3.1激活函数3.2参数的初始化3.2.1随机初始化3.2.2标准初始化3.2.3Xavier初始化&#xff08;tf.keras中默认使用的&#xff09;3.2.4He初始化 4.神经网络的搭建4.1通过Sequential构建神经网络4.2通过Functional API…

Bsin-kb-agent:企业级AI知识库

企业级AI知识库 Bsin-kb-agent 是基于BsinPaaS开源框架和大语言模型构建的企业知识库应用&#xff0c;借鉴langchain的框架思想&#xff0c;引入langchian4j组件&#xff0c;微前端微服务的架构设计&#xff0c;可快速助您构建和体验端到端的AI知识库应用。 应用场景 企业微…

每日OJ题_牛客_春游_贪心+数学_C++_Java

目录 牛客_春游_贪心数学 题目解析 C代码 Java代码 牛客_春游_贪心数学 春游 描述&#xff1a; 盼望着&#xff0c;盼望着&#xff0c;东风来了&#xff0c;春天脚步近了。 值此大好春光&#xff0c;老师组织了同学们出去划船&#xff0c;划船项目收费如下&#xff1a;…

容器化技术入门:Docker详解

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 容器化技术入门&#xff1a;Docker详解 容器化技术入门&#xff1a;Docker详解 容器化技术入门&#xff1a;Docker详解 引言 Doc…

数据挖掘实战-基于SARIMA时间序列模型预测Netflix股票未来趋势

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

Java:多态的调用

1.什么是多态 允许不同类的对象对同一消息做不同的响应。即同一消息可以根据发送对象的不同而采用多种不同的行为方式。&#xff08;发送消息就是函数调用&#xff09;。多态使用了一种动态绑定&#xff08;dynamic binding&#xff09;技术&#xff0c;指在执行期间判断所引用…