编程笔记 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

小结

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

相关文章
|
23天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
2月前
|
存储 JavaScript 前端开发
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
用 HTML + JavaScript DIY 渐进式延迟法定退休年龄测算器
|
28天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
36 0
|
11天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
1天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
1天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
19 1
|
6天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
15 3
|
9天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
19 4
|
10天前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。
23 2
|
17天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
66 6

热门文章

最新文章