编程笔记 html5&css&js 066 JavaScript Number数据类型

简介: 编程笔记 html5&css&js 066 JavaScript Number数据类型


Javascript语言中的Number数据类型详解。在JavaScript中,Number 是一种基本数据类型,用于表示数字。

在JavaScript中,Number 是一种基本数据类型,用于表示数字。以下是关于JavaScript中 Number 数据类型的详细说明

一、Number数据类型

  1. 存储方式
  • JavaScript中的所有数字都以64位浮点数格式存储,遵循IEEE 754标准。这意味着即使整数值也没有单独的整数类型,它们也是以双精度浮点数的形式存储。
  • 这种设计允许JavaScript中的Number类型支持非常大或非常小的数值范围,但也意味着它存在精度问题,特别是在处理极大或极小的数字时,以及进行某些精确整数运算时。
  1. 数值范围
  • 最小值:Number.MIN_VALUE 表示可以表示的最小正数,大约为 5e-324
  • 最大值:Number.MAX_VALUE 表示可以表示的最大正数,大约为 1.7976931348623157e+308
  • 负无穷:Number.NEGATIVE_INFINITY,当一个数值小于可表示的最小负数时出现。
  • 正无穷:Number.POSITIVE_INFINITY,当一个数值大于可表示的最大正数时出现。
  • 非数字(NaN):NaN 表示“Not-a-Number”,即无法表示为数字的值,比如 0/0Math.sqrt(-1) 的结果都是 NaN。
  1. 特殊数值
  • NaN 不与自身相等,即 NaN === NaN 返回 false,所以需要使用 isNaN() 函数来检查一个值是否是 NaN。
  • Infinity-Infinity 可以通过除以零或者执行超过Number.MAX_VALUE的乘法得到。
  1. 转换规则
  • 使用 Number() 函数可以将其他类型转换成数字类型。例如,空字符串、空数组和布尔值会转换为相应的数字值(空字符串转为 0,空数组转为 0true 转为 1false 转为 0),而不能被转换为数字的值(如空对象、undefined 等)会被转换为 NaN
  • parseInt()parseFloat() 函数专门用于从字符串中解析出整数或浮点数。
  1. 进制转换
  • JavaScript 中可以使用二进制、八进制和十六进制字面量表示数字,例如 0b1010(二进制)、0o777(八进制)和 0x1A(十六进制)。
  • toString() 方法可用于将数字转换为不同基数的字符串形式。
  1. 舍入误差
  • 由于采用浮点数存储,一些精确的数学运算可能会因为浮点数的内在表示机制而导致微小的误差。
  1. 安全整数范围
  • ECMAScript 提供了 Number.isSafeInteger() 方法来判断一个数是否落在 [-2^53, 2^53] 范围内,这个范围内的整数能保证精确无误地表示和操作。

总之,JavaScript中的Number类型功能强大但也有其局限性,尤其需要注意的是浮点数计算可能带来的精度问题。

二、数制表示

在JavaScript中,可以使用不同的数制来表示数字。以下是几种常见的数制表示方法:

  1. 十进制(Decimal)
  • JavaScript默认采用十进制表示数值,例如:12345
  1. 二进制(Binary)
  • 从ES6开始,可以使用 0b 前缀来表示二进制数。例如:0b1010 表示十进制的10。
  1. 八进制(Octal)
  • 在ES6之前,JavaScript允许使用前导零表示八进制数,但这种方式在现代浏览器和严格模式下已不再支持,可能会引发错误。不过你仍然可以通过先将八进制转换为字符串再转回Number类型的方式来表示,如:parseInt('0777', 8)
  • ES6引入了新的字面量形式,通过 0o 或者 0O 前缀来表示八进制数,例如:0o777 表示十进制的511。
  1. 十六进制(Hexadecimal)
  • 通过 0x 前缀来表示十六进制数。例如:0xFF 表示十进制的255。

转换不同数制的方法:

  • parseInt(str, radix):解析一个字符串并返回指定基数(radix)下的整数值。
  • Number.parseInt(str, radix):同上,是全局函数 parseInt 的静态版本。
  • Number.toString(radix):将数字转换为指定基数的字符串表示形式。

例如:

let decimal = 10;
console.log(decimal.toString(2)); // 输出 "1010",表示十进制10的二进制形式
console.log(parseInt("0xFF", 16)); // 输出 255,将十六进制数 FF 转换为十进制数

三、类型运算

在JavaScript中,Number 数据类型支持多种运算符来进行数值计算和比较。以下是一些主要的运算符:

  1. 算术运算符
  • +(加法):将两个数字相加,例如 2 + 3 结果为 5
  • -(减法):从第一个数中减去第二个数,例如 5 - 2 结果为 3
  • *(乘法):将两个数字相乘,例如 4 * 3 结果为 12
  • /(除法):用第一个数除以第二个数,例如 6 / 3 结果为 2
  • %(模/取余):返回除法操作后的余数,例如 7 % 3 结果为 1
  • **(指数运算):求幂运算,例如 2 ** 3 结果为 8
  1. 赋值运算符
  • =:简单赋值,如 x = 10;
  • +=-=*=/=:复合赋值运算符,它们分别执行加法、减法、乘法和除法后再赋值给变量,例如 x += 2 等价于 x = x + 2;
  1. 增量与减量运算符
  • ++(前置或后置):自增运算符,增加变量的值1,如 ++xx++
  • --(前置或后置):自减运算符,减少变量的值1,如 --xx--
  1. 关系运算符
  • <(小于)、>(大于)、<=(小于等于)、>=(大于等于):用于比较两个数字的大小关系,返回布尔值。
  • ==(等于)和 !=(不等于):检查两个值是否相等(注意会进行类型转换)。
  • ===(全等)和 !==(不全等):不仅检查值是否相等,还检查数据类型是否相同。
  1. 逻辑运算符
  • &&(逻辑与):如果两边的操作数都为真,则结果为真。
  • ||(逻辑或):如果两边至少有一个操作数为真,则结果为真。
  • !(逻辑非):对一个布尔值进行否定。
  1. 位运算符
  • &(按位与)
  • |(按位或)
  • ^(按位异或)
  • ~(按位非)
  • <<(左移)
  • >>(有符号右移)
  • >>>(无符号右移)

这些运算符应用于 Number 类型时,遵循特定的优先级规则,并且可能涉及到隐式类型转换,特别是在使用 == 进行比较时要注意。在实际编程中,应根据需求合理运用这些运算符进行数值计算和逻辑判断。

四、代码示例

当然,以下是一些关于JavaScript中Number数据类型及其运算和比较的代码示例:

算术运算符示例:

let a = 5;
let b = 3;
// 加法
let sum = a + b;
console.log(sum); // 输出:8
// 减法
let diff = a - b;
console.log(diff); // 输出:2
// 乘法
let product = a * b;
console.log(product); // 输出:15
// 除法
let quotient = a / b;
console.log(quotient); // 输出:1.6666666666666667(浮点数)
// 模运算
let remainder = a % b;
console.log(remainder); // 输出:2
// 指数运算
let power = a ** b;
console.log(power); // 输出:125

赋值运算符示例:

let c = 10;
// 复合加法赋值
c += 5;
console.log(c); // 输出:15
// 复合减法赋值
c -= 3;
console.log(c); // 输出:12
// 复合乘法赋值
c *= 2;
console.log(c); // 输出:24
// 复合除法赋值
c /= 2;
console.log(c); // 输出:12

增量与减量运算符示例:

let d = 5;
// 前置自增
console.log(++d); // 输出:6,然后d变为6
console.log(d); // 输出:6
// 后置自增
console.log(d++); // 输出:6,然后d变为7
console.log(d); // 输出:7
// 前置自减
console.log(--d); // 输出:6,然后d变为5
console.log(d); // 输出:5
// 后置自减
console.log(d--); // 输出:5,然后d变为4
console.log(d); // 输出:4

关系和全等比较运算符示例:

let e = 4;
let f = 5;
// 小于
console.log(e < f); // 输出:true
// 大于
console.log(e > f); // 输出:false
// 小于等于
console.log(e <= f); // 输出:true
// 大于等于
console.log(e >= f); // 输出:false
// 等于 (可能进行类型转换)
console.log(e == '4'); // 输出:true
// 不等于 (可能进行类型转换)
console.log(e != f); // 输出:true
// 全等 (不进行类型转换)
console.log(e === f); // 输出:false
// 不全等 (不进行类型转换)
console.log(e !== f); // 输出:true

小结

学习时,编写代码如示例,认真查看输入结果。

相关文章
|
11天前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
11天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
12天前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
15 2
|
13天前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
12 1
TS,数据类型概述,常见的基本数据类型有number/string/boolean/undefined/null,字符串用““,let food: string = ‘糖葫芦‘,布尔类型
TS,数据类型概述,常见的基本数据类型有number/string/boolean/undefined/null,字符串用““,let food: string = ‘糖葫芦‘,布尔类型
|
13天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】Animated Navigation
【HTML+CSS+JavaScript】Animated Navigation
8 0
|
13天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】animated-countdown
【HTML+CSS+JavaScript】animated-countdown
9 0
|
13天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】3d-boxes-background
【HTML+CSS+JavaScript】3d-boxes-background
7 0
|
7天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
48 0
|
19天前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js