前端学习＜四＞JavaScript基础——07-基本数据类型：Number

数值型：Number

在 JS 中所有的数值都是 Number 类型，包括整数和浮点数（小数）。

 var a = 100; // 定义一个变量 a，并且赋值整数100console.log(typeof a); // 输出变量 a 的类型​var b = 12.3; // 定义一个变量 b，并且赋值浮点数 12.3console.log(typeof a);

上方代码的输出结果为：

 number​number

再次补充：在 JS 中，只要是数，就是 Number 数值型的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是 Number 类型的。

数值范围

由于内存的限制，ECMAScript 并不能保存世界上所有的数值。

  • 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308

  • 最小值：Number.MIN_VALUE，这个值为： 5e-324

如果使用 Number 表示的变量超过了最大值，则会返回 Infinity。

  • 无穷大（正无穷）：Infinity

  • 无穷小（负无穷）：-Infinity

注意：typeof Infinity的返回结果是 number。

NaN

NaN：是一个特殊的数字，表示 Not a Number，非数值。在进行数值运算时，如果得不到正常结果，就会返回 NaN。

比如：

 console.log('abc' / 18); //结果是NaN​console.log('abc' * 'abcd'); //按理说，字符串相乘是没有结果的，但如果你非要让JS去算，它就一定会给你一个结果，结果是NaN。

注意事项：

  1. typeof NaN的返回结果是 number。

  2. Undefined 和任何数值计算的结果为 NaN。NaN 与任何值都不相等，包括 NaN 本身。

  3. 关于 isNaN() 函数，可以看后续的文章《JavaScript基础/typeof和数据类型转换》。

连字符和加号的区别

键盘上的+可能是连字符，也可能是数字的加号。如下：

 console.log("我" + "爱" + "你");   //连字符，把三个独立的汉字，连接在一起了console.log("我+爱+你");           //原样输出console.log(1+2+3);             //输出6

输出：

 我爱你我+爱+你6

总结：如果加号两边都是 Number 类型，此时是数字相加。否则，就是连字符（用来连接字符串）。

举例 1：

 var a = '1';var b = 2;console.log(a + b);

控制台输出：

 12

举例 2：

 var a = 1;var b = 2;console.log("a" + b);   //"a"就不是变量了！所以就是"a"+2 输出a2​

控制台输出：

a2

于是我们明白了，在变量中加入字符串进行拼接，可以被同化为字符串。【重要】

隐式转换

我们知道，"2"+1得到的结果其实是字符串，但是"2"-1得到的结果却是数值 1，这是因为计算机自动帮我们进行了“隐式转换”。

也就是说，-、*、/、%这几个符号会自动进行隐式转换。例如：

var a = '4' + 3 - 6;
console.log(a);

输出结果：

37;

虽然程序可以对-、*、/、`%``这几个符号自动进行“隐式转换”；但作为程序员，我们最好自己完成转换，方便程序的可读性。

关于隐式转换的详细内容，可以看后续的文章《JavaScript基础/typeof和数据类型转换》。

浮点数的运算

运算精度问题

在 JS 中，整数的运算基本可以保证精确；但是小数的运算，可能会得到一个不精确的结果。所以，千万不要使用 JS 进行对精确度要求比较高的运算。

如下：

var a = 0.1 + 0.2;
console.log(a); //打印结果十分意外：0.30000000000000004

上方代码中，打印结果并不是 0.3，而是 0.30000000000000004。

这是因为，计算机在做运算时，所有的运算都要转换成二进制去计算。然而，有些数字转换成二进制之后，无法精确表示。比如说，0.1 和 0.2 转换成二进制之后，是无穷的，因此存在浮点数的计算不精确的问题。

处理数学运算的精度问题

如果只是一些简单的精度问题，可以使用 toFix() 方法进行小数的截取。备注：关于 toFixed()方法， 详见《JavaScript 基础/内置对象：Number 和 Math》。

在实战开发中，关于浮点数计算的精度问题，往往比较复杂。市面上有很多针对数学运算的开源库，比如decimal.js、 Math.js。这些开源库都比较成熟，我们可以直接拿来用。

  • Math.js：属于很全面的运算库，文件很大，压缩后的文件就有 500kb。如果你的项目涉及到大型的复杂运算，可以使用 Math.js。

  • decimal.js：属于轻量的运算库，压缩后的文件只有 32kb。大多数项目的数学运算，使用 decimal.js 足够了。

在使用这几个开源库时，既可以用 cdn 的方式引入，也可以用 npm 包的方式引入。

比如说，通过 cdn 的方式引入 decimal.js 时，可以这样用：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script src="https://cdn.bootcdn.net/ajax/libs/decimal.js/10.2.0/decimal.min.js"></script><script>console.log('加法：');var a = 0.1;var b = 0.2;console.log(a + b);console.log(new Decimal(a).add(new Decimal(b)).toNumber());console.log('减法：');var a = 1.0;var b = 0.7;console.log(a - b);console.log(new Decimal(a).sub(new Decimal(b)).toNumber());console.log('乘法：');var a = 1.01;var b = 1.003;console.log(a * b);console.log(new Decimal(a).mul(new Decimal(b)).toNumber());console.log('除法：');var a = 0.029;var b = 10;console.log(a / b);console.log(new Decimal(a).div(new Decimal(b)).toNumber());</script></body>
</html>

打印结果：

加法：
0.30000000000000004
0.3减法：
0.30000000000000004
0.3乘法：
1.0130299999999999
1.01303除法：
0.0029000000000000002
0.0029

参考链接：

  • bloghome博客之家-分享知识-放飞梦想

  • JS处理数学计算之痛 - 知乎

变量值的传递（赋值）

语句：

a = b;

把 b 的值赋给 a，b 不变。

将等号右边的值，赋给左边的变量；等号右边的变量，值不变。

来做几个题目。

举例 1：

// a		b       c
var a = 1; // 1
var b = 2; // 1     2
var c = 3; // 1     2       3
a = b + c; // 5     2       3
b = c - a; // 5     -2      3
c = a * b; // 5     -2      -10
console.log(a);
console.log(b);
console.log(c);

输出：

5
-2
-10

举例 2：

//a    b     c
var a = 1;
var b = 2;
var c = 3; // 1     2     3
a = a + b; // 3     2     3
b = b + a; // 3     5     3
c = c + b; // 3     5     8
console.log(a); // 3
console.log(b); // 5
console.log(c); // 8

输出：

3
5
8

举例 3：

//a       b
var a = '1';
var b = 2; // "1"     2
a = a + b; // "12"    2
b = b + a; // "12"    "212"
console.log(a); // 输出12
console.log(b); // 输出212

输出：

12
212

举例 4：

//a         b
var a = '1';
var b = 2;
a = b + a; //"21"       2
b = b + a; //"21"       "221"
console.log(a); //21
console.log(b); //221

效果：

21
221

举例 5：（这个例子比较特殊，字符串减去数字）

var a = '3';
var b = 2;
console.log(a - b);

效果：（注意，字符串 - 数值 = 数值）

1
写在最后：希望大家可以点个关注点个赞，这对up真的很重要！谢谢！

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

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

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

相关文章

大语言模型LLM《提示词工程指南》学习笔记02

大语言模型LLM《提示词工程指南》学习笔记02

文章目录 大语言模型LLM《提示词工程指南》学习笔记02设计提示时需要记住的一些技巧零样本提示少样本提示链式思考&#xff08;CoT&#xff09;提示自我一致性生成知识提示 大语言模型LLM《提示词工程指南》学习笔记02 设计提示时需要记住的一些技巧 指令 您可以使用命令来指…
阅读更多...
【ubuntu】Vim配置记录

【ubuntu】Vim配置记录

一、Vim介绍 vim是一个高度可定制的文本编辑器&#xff0c;有许多丰富的功能&#xff0c;扩展性极强&#xff0c;用户可以通过多种方式来增强vim vim有非常多的优点&#xff0c;例如高效率的移动&#xff0c;可以不用鼠标&#xff0c;完全用键盘操作&#xff0c;占用系统资源较…
阅读更多...
159 Linux C++ 通讯架构实战14，epoll 函数代码实战

159 Linux C++ 通讯架构实战14，epoll 函数代码实战

ngx_epoll_init函数的调用 //&#xff08;3.2&#xff09;ngx_epoll_init函数的调用&#xff08;要在子进程中执行&#xff09; //四章&#xff0c;四节 project1.cpp&#xff1a;nginx中创建worker子进程&#xff1b; //nginx中创建worker子进程 //官方nginx ,一个…
阅读更多...
深入解析Python的lxml库：高效处理XML和HTML的利器

深入解析Python的lxml库：高效处理XML和HTML的利器

更多Python学习内容&#xff1a;ipengtao.com Python中的lxml库是一个强大的XML和HTML处理库&#xff0c;它基于libxml2和libxslt库&#xff0c;提供了高效的XML解析和处理功能。本文将详细介绍lxml库的安装、特性、基本功能、高级功能、实际应用场景和总结&#xff0c;帮助读者…
阅读更多...
phpstorm设置头部注释和自定义注释内容

phpstorm设置头部注释和自定义注释内容

先说设置位置&#xff1a; PhpStorm中文件、类、函数等注释的设置在&#xff1a;setting-》Editor-》FIle and Code Template-》Includes-》PHP Function Doc Comment下设置即可&#xff0c;其中方法的默认是这样的&#xff1a; /** ${PARAM_DOC} #if (${TYPE_HINT} ! "…
阅读更多...
Unity与CocosCraetor对比学习三

Unity与CocosCraetor对比学习三

一、计时器 1.在Creator中 void start() {// js中的计时器// 延迟1秒后执行一次&#xff0c;不受Cocos限制setTimeout(() > {console.log("haha");}, 1000);// 每隔1秒执行一次setInterval(() > {console.log("haha");}, 1000);// creator中的计时…
阅读更多...
计算机网络的分层结构及模型

计算机网络的分层结构及模型

1.计算机网络分层的基本原则 &#xff08;1&#xff09;各层之间相互独立&#xff0c;每层只实现一种相对独立的功能 &#xff08;2&#xff09;每层之间的交互尽可能少 &#xff08;3&#xff09;结构上可分割开&#xff0c;每层都采用最合适的技术来实现 &#xff08;4&…
阅读更多...
Linux第4课 Linux的基本操作

Linux第4课 Linux的基本操作

文章目录 Linux第4课 Linux的基本操作一、图形界面介绍二、终端界面介绍 Linux第4课 Linux的基本操作 一、图形界面介绍 本节以Ubuntu系统的GUI为例进行说明&#xff0c;Linux其他版本可自行网搜。 图形系统进入后&#xff0c;左侧黄框内为菜单栏&#xff0c;右侧为桌面&…
阅读更多...
在订单流程中锁定库存的最佳时机

在订单流程中锁定库存的最佳时机

目录 1. 用户点击结算时锁定库存 2. 用户提交订单时锁定库存 3. 用户支付成功后锁定库存 最佳时机选择 1. 用户点击结算时锁定库存 优点&#xff1a;确保用户在决定购买时商品是可用的&#xff0c;增加了用户的购买信心。缺点&#xff1a;如果用户在结算后放弃购买&#x…
阅读更多...
嵌入式开发中内存管理与优化

嵌入式开发中内存管理与优化

内存管理与优化 在嵌入式开发中&#xff0c;内存管理是一项至关重要的任务&#xff0c;直接影响到系统的稳定性和性能。由于嵌入式设备通常资源有限&#xff0c;尤其是内存资源&#xff0c;因此内存管理与优化显得尤为重要。 具体实现 1. 静态内存分配 静态内存分配是指在编…
阅读更多...
[HackMyVM]靶场Birthday

[HackMyVM]靶场Birthday

难度:Hard kali:192.168.56.104 靶机:192.168.56.149 端口扫描 ┌──(root㉿kali2)-[~/Desktop] └─# nmap 192.168.56.149 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-04-06 10:39 CST Nmap scan report for 192.168.56.149 Host is up (0.00016s latency). N…
阅读更多...
硬件-1、体系架构

硬件-1、体系架构

cpu 处理器 arm处理器的七种工作模式 arm寄存器 两张图是一样的&#xff0c;r0---r12是通用寄存器。其他寄存器可参考图一&#xff0c;cpu架构。 程序状态寄存器psr&#xff08;cpsr/spsr&#xff09; 程序异常处理 理解示例 当使用swi&#xff08;软中断指令&#xff09;指令…
阅读更多...
【VMware Workstation】启动虚拟机报错“此主机支持 AMD-V，但 AMD-V 处于禁用状态”

【VMware Workstation】启动虚拟机报错“此主机支持 AMD-V，但 AMD-V 处于禁用状态”

问题出现步骤&#xff1a; 打开虚拟机&#xff1a; 然后报错&#xff1a; “此主机支持 AMD-V&#xff0c;但 AMD-V 处于禁用状态。 如果已在 BIOS/固件设置中禁用 AMD-V&#xff0c;或主机自更改此设置后从未重新启动&#xff0c;则 AMD-V 可能被禁用。 (1) 确认 BIOS/固件设…
阅读更多...
机器学习KNN最邻近分类算法

机器学习KNN最邻近分类算法

文章目录 1、KNN算法简介2、KNN算法实现2.1、调用scikit-learn库中KNN算法 3、使用scikit-learn库生成数据集3.1、自定义函数划分数据集3.2、使用scikit-learn库划分数据集 4、使用scikit-learn库对鸢尾花数据集进行分类5、什么是超参数5.1、实现寻找超参数5.2、使用scikit-lea…
阅读更多...
数据分析 -- numpy

数据分析 -- numpy

文章目录 numpy库简介简介特点 numpy操作数组创建数组属性数组变更数据计算 numpy库简介 简介 开源的Python库&#xff0c;它提供了高性能的多维数值&#xff08;numpy.ndarray&#xff09;计算能力&#xff1b;由“Numerical Python”缩写而来&#xff0c;并且它是Pandas库的…
阅读更多...
Zabbix6 - Centos7部署Grafana可视化图形监控系统配置手册手册

Zabbix6 - Centos7部署Grafana可视化图形监控系统配置手册手册

Zabbix6 - Centos7部署Grafana可视化图形监控系统配置手册手册 概述&#xff1a; Grafana是一个开源的数据可视化和监控平台。其特点&#xff1a; 1&#xff09;丰富的可视化显示插件&#xff0c;包括热图、折线图、饼图&#xff0c;表格等&#xff1b; 2&#xff09;支持多数据…
阅读更多...
L2-2 口罩发放 (25 分)

L2-2 口罩发放 (25 分)

坑点&#xff1a; 应该就是题目要求的身份证号唯一 然后是相同的人同一天多次申请 然后是时间相同按照申请记录排序 需要注意的是&#xff0c;不要在同一天内看到满足要求的就直接发放口罩&#xff0c;有可能发完之后发现后面的人的时间更早 #include "bits/stdc.h" …
阅读更多...
Web Form

Web Form

https://github.com/bonfy/go-mega/blob/master/04-web-form.md 从这网站学的 随着我们项目的扩大&#xff0c;代码量会愈来愈多&#xff0c;我们需要建立这样的数据结构来使整个项目看起来没有那么臃肿 package model - 负责数据建模 vm - View Model&#xff0c;定义各种…
阅读更多...
【MySQL】增删改查操作（基础）

【MySQL】增删改查操作（基础）

文章目录 1、新增操作&#xff08;Create&#xff09;1.1单行数据全列插入1.2多行数据指定列插入 2、查询操作&#xff08;Retrieve&#xff09;2.1全列查询2.2指定列查询2.3指定列查询2.4别名&#xff08;as&#xff09;2.5去重&#xff08;distinct&#xff09;2.6排序&#…
阅读更多...
机器学习实战18-机器学习中XGBClassifier分类器模型的应用实战，以及XGBClassifier分类器的调优策略

机器学习实战18-机器学习中XGBClassifier分类器模型的应用实战，以及XGBClassifier分类器的调优策略

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下机器学习实战18-机器学习中XGBClassifier分类器模型的应用实战&#xff0c;以及XGBClassifier分类器的调优策略。XGBClassifier是基于eXtreme Gradient Boosting (XGBoost)算法的分类器模型&#xff0c;在机器学习领…
阅读更多...
最新文章

Copyright @ 2022~2023