- Javascript 基础教程
- Javascript - 首页
- JavaScript - 路线图
- JavaScript - 概述
- JavaScript - 特性
- JavaScript - 启用
- JavaScript - 位置
- JavaScript - 语法
- JavaScript - Hello World
- JavaScript - Console.log()
- JavaScript - 注释
- JavaScript - 变量
- JavaScript - let 语句
- JavaScript - 常量
- JavaScript - 数据类型
- JavaScript - 类型转换
- JavaScript - 严格模式
- JavaScript - 保留关键字
- JavaScript 运算符
- JavaScript - 运算符
- JavaScript - 算术运算符
- JavaScript - 比较运算符
- JavaScript - 逻辑运算符
- JavaScript - 位运算符
- JavaScript - 赋值运算符
- JavaScript - 条件运算符
- JavaScript - typeof 运算符
- JavaScript - 空值合并运算符
- JavaScript - delete 运算符
- JavaScript - 逗号运算符
- JavaScript - 分组运算符
- JavaScript - yield 运算符
- JavaScript - 展开运算符
- JavaScript - 指数运算符
- JavaScript - 运算符优先级
- JavaScript 控制流
- JavaScript - if...else
- JavaScript - while 循环
- JavaScript - for 循环
- JavaScript - for...in
- Javascript - for...of
- JavaScript - 循环控制
- JavaScript - break 语句
- JavaScript - continue 语句
- JavaScript - switch case
- JavaScript - 用户自定义迭代器
- JavaScript 函数
- JavaScript - 函数
- JavaScript - 函数表达式
- JavaScript - 函数参数
- JavaScript - 默认参数
- JavaScript - Function() 构造函数
- JavaScript - 函数提升
- JavaScript - 自执行函数
- JavaScript - 箭头函数
- JavaScript - 函数调用
- JavaScript - Function call()
- JavaScript - Function apply()
- JavaScript - Function bind()
- JavaScript - 闭包
- JavaScript - 变量作用域
- JavaScript - 全局变量
- JavaScript - 智能函数参数
- JavaScript 对象
- JavaScript - Number
- JavaScript - Boolean
- JavaScript - 字符串
- JavaScript - 数组
- JavaScript - 日期
- JavaScript - DataView
- JavaScript - 处理程序
- JavaScript - Math
- JavaScript - 正则表达式
- JavaScript - Symbol
- JavaScript - 集合 (Set)
- JavaScript - WeakSet
- JavaScript - Map
- JavaScript - WeakMap
- JavaScript - 可迭代对象
- JavaScript - Reflect
- JavaScript - TypedArray
- JavaScript - 模板字面量
- JavaScript - 标签模板
- 面向对象的 JavaScript
- JavaScript - 对象
- JavaScript - 类
- JavaScript - 对象属性
- JavaScript - 对象方法
- JavaScript - 静态方法
- JavaScript - 显示对象
- JavaScript - 对象访问器
- JavaScript - 对象构造函数
- JavaScript - 原生原型
- JavaScript - ES5 对象方法
- JavaScript - 封装
- JavaScript - 继承
- JavaScript - 抽象
- JavaScript - 多态
- JavaScript - 解构赋值
- JavaScript - 对象解构
- JavaScript - 数组解构
- JavaScript - 嵌套解构
- JavaScript - 可选链
- JavaScript - 全局对象
- JavaScript - Mixin
- JavaScript - Proxy
- JavaScript 版本
- JavaScript - 历史
- JavaScript - 版本
- JavaScript - ES5
- JavaScript - ES6
- ECMAScript 2016
- ECMAScript 2017
- ECMAScript 2018
- ECMAScript 2019
- ECMAScript 2020
- ECMAScript 2021
- ECMAScript 2022
- JavaScript 异步编程
- JavaScript - 异步编程
- JavaScript - 回调函数
- JavaScript - Promise
- JavaScript - Async/Await
- JavaScript - 微任务
- JavaScript - Promise 化
- JavaScript - Promise 链式调用
- JavaScript - 定时事件
- JavaScript - setTimeout()
- JavaScript - setInterval()
- JavaScript Cookie
- JavaScript - Cookie
- JavaScript - Cookie 属性
- JavaScript - 删除 Cookie
- JavaScript 浏览器 BOM
- JavaScript - 浏览器对象模型
- JavaScript - Window 对象
- JavaScript - Document 对象
- JavaScript - Screen 对象
- JavaScript - History 对象
- JavaScript - Navigator 对象
- JavaScript - Location 对象
- JavaScript - Console 对象
- JavaScript Web APIs
- JavaScript - Web API
- JavaScript - History API
- JavaScript - Storage API
- JavaScript - Forms API
- JavaScript - Worker API
- JavaScript - Fetch API
- JavaScript - Geolocation API
- JavaScript 事件
- JavaScript - 事件
- JavaScript - DOM 事件
- JavaScript - addEventListener()
- JavaScript - 鼠标事件
- JavaScript - 键盘事件
- JavaScript - 表单事件
- JavaScript - Window/Document 事件
- JavaScript - 事件委托
- JavaScript - 事件冒泡
- JavaScript - 事件捕获
- JavaScript - 自定义事件
- JavaScript 错误处理
- JavaScript - 错误处理
- JavaScript - try...catch
- JavaScript - 调试
- JavaScript - 自定义错误
- JavaScript - 扩展错误
- JavaScript 重要关键字
- JavaScript - this 关键字
- JavaScript - void 关键字
- JavaScript - new 关键字
- JavaScript - var 关键字
- JavaScript HTML DOM
- JavaScript - HTML DOM
- JavaScript - DOM 方法和属性
- JavaScript - DOM Document
- JavaScript - DOM 元素
- JavaScript - DOM 属性 (Attr)
- JavaScript - DOM 表单
- JavaScript - 更改 HTML
- JavaScript - 更改 CSS
- JavaScript - DOM 动画
- JavaScript - DOM 导航
- JavaScript - DOM 集合
- JavaScript - DOM NodeList
- JavaScript - DOM DOMTokenList
- JavaScript 其他
- JavaScript - Ajax
- JavaScript - 异步迭代
- JavaScript - Atomics 对象
- JavaScript - rest 参数
- JavaScript - 页面重定向
- JavaScript - 对话框
- JavaScript - 页面打印
- JavaScript - 验证
- JavaScript - 动画
- JavaScript - 多媒体
- JavaScript - 图片地图
- JavaScript - 浏览器
- JavaScript - JSON
- JavaScript - 多行字符串
- JavaScript - 日期格式
- JavaScript - 获取日期方法
- JavaScript - 设置日期方法
- JavaScript - 模块
- JavaScript - 动态导入
- JavaScript - 大整数 (BigInt)
- JavaScript - Blob
- JavaScript - Unicode
- JavaScript - 浅拷贝
- JavaScript - 调用栈
- JavaScript - 引用类型
- JavaScript - IndexedDB
- JavaScript - 点击劫持攻击
- JavaScript - 柯里化
- JavaScript - 图形
- JavaScript - Canvas
- JavaScript - 防抖
- JavaScript - 性能
- JavaScript - 风格指南
JavaScript - 大整数 (BigInt)
大整数 (BigInt)
JavaScript 中的 BigInt 数据类型是一种数值基元类型,可以表示任意大小的整数。这与 Number 数据类型不同,Number 数据类型只能表示介于 -(253 - 1) 和 253 - 1 之间的整数。
JavaScript 为动态网页应用程序提供动力,传统上使用 Number 类型根据广泛采用的 IEEE-754 标准的双精度浮点格式表示数字。此标准施加了一个重要的限制:它只能精确地表示最多 253 - 1 作为其最大安全整数。但是,超过此数值阈值会开始降低数值的保真度,并在关键计算中引入潜在的不准确性。
JavaScript 引入 BigInt 数据类型是为了解决这些限制;顾名思义,BigInt 解决了有限精度的缺点。这种功能在各种场景中被证明是不可或缺的,尤其是在密码算法、财务计算和需要高度精度的复杂数学运算等领域:它允许表示任意精度的整数,这是一项重大进步。
声明和初始化
您可以使用后跟 n 后缀的数字字面量或使用 BigInt() 构造函数来创建 BigInt。
const bigIntLiteral = 123n; const anotherBigInt = BigInt(456);
需要注意的是,尝试混合使用普通数字和 BigInt 而没有显式转换可能会导致错误。
基本运算
BigInt 支持标准算术运算,如加法、减法、乘法和除法。执行运算时,两个操作数都必须是 BigInt 类型。
const a = 123n; const b = 456n; const sum = a + b; // 579n const product = a * b; // 56088n
比较
可以使用标准比较运算符(例如 <, >, <=, >= 和 ===)比较 BigInt 值。
const a = 123n; const b = 456n; a > b; // false a === b; // false
转换
可以在 BigInt 和普通数字之间进行转换,但请记住,对于非常大的 BigInt 值,可能会损失精度。
const bigIntValue = BigInt("12345678901234567890"); const regularNumber = Number(bigIntValue); const bigIntValue = BigInt("12345678901234567890"); const regularNumber = Number(bigIntValue);
示例
示例 1:简单的 BigInt 算术运算
在这个例子中,我们演示了两个 BigInt 数字 num1 和 num2 的加法和乘法,它们的值分别是 123n 和 456n。通过能够精确表示大整数而不会损失精度,BigInt 克服了普通 JavaScript 数字的一个潜在缺点。
<!DOCTYPE html> <html> <body> <h2>Simple BigInt Arithmetic</h2> <p id="result"></p> <script> const num1 = 123n; const num2 = 456n; const sum = num1 + num2; const product = num1 * num2; document.addEventListener("DOMContentLoaded", function () { document.getElementById("result").innerText = `Sum of ${num1} & ${num2} is ${sum} and their product: ${product}`; }); </script> </body> </html>
示例 2:使用 BigInt 的斐波那契数列生成器
斐波那契数列:一系列数字,其中每个数字都是其前两个数字之和;使用 BigInt 来处理超过普通 JavaScript 数字精度限制的较大值。通过 generateFibonacci 函数,数组用作这些序列值的存储,即使对于具有很大数值大小的项也能保证精确计算。
<!DOCTYPE html> <html> <body> <h2>Fibonacci Sequence</h2> <p id="result"></p> <script> function generateFibonacci(n) { const sequence = [0n, 1n]; for (let i = 2; i <= n; i++) { sequence[i] = sequence[i - 1] + sequence[i - 2]; } return sequence; } document.addEventListener("DOMContentLoaded", function () { const result = generateFibonacci(20); document.getElementById("result").innerText = "Fibonacci Sequence of 1st 20 terms: " + result.join(", "); }); </script> </body> </html>
示例 3:使用 BigInt 的阶乘计算器
阶乘是小于或等于该数字的所有正整数的乘积。为了找到阶乘,我们使用了 BigInt。对于像 5 和 10 这样的较小数字,普通数字可以工作,但是当我们必须找到 10000 的阶乘时会发生什么情况,输出将过于庞大。因此,BigInt 将来拯救我们。在这个例子中,我们使用循环来计算 20n 的阶乘。
<!DOCTYPE html> <html> <body> <h2>Factorial of a Large Number</h2> <p id="result"></p> <script> function calculateFactorial() { const num = 20n; // Calculate factorial of 20 let result = 1n; for (let i = 2n; i <= num; i++) { result *= i; } document.getElementById("result").innerText = "Factorial of 20 is " + result; } document.addEventListener("DOMContentLoaded", function () { calculateFactorial(); }); </script> </body> </html>
示例 4:BigInt 颜色方块
本例中,我们利用 BigInt 生成预定义参数范围内的随机颜色,并将其应用于 colorSquare 进行演示。随机颜色的生成涉及乘法运算:通过 Math.random() 获取 0 到 1 之间的浮点数,然后将其乘以最大颜色值。随后,我们使用 Math.floor() 将结果向下取整到最接近的整数,然后再使用 BigInt() 将其转换为 BigInt。生成的 BigInt 随后被转换为十六进制字符串并返回。
<!DOCTYPE html> <html> <head> <style> body { font-family: Arial, sans-serif; } #colorSquare { width: 400px; height: 200px; border: 2px solid #000; } </style> </head> <body> <h2>BigInt Color Example</h2> <div id="colorSquare"></div> <script> function generateRandomColor() { const maxColorValue = 16777215n; // 0xFFFFFF in hexadecimal const randomColor = BigInt(Math.floor(Math.random() * Number(maxColorValue))); return `#${randomColor.toString(16).padStart(6, '0')}`; } const colorSquare = document.getElementById('colorSquare'); colorSquare.style.backgroundColor = generateRandomColor(); </script> </body> </html>
BigInt 的错误处理
此代码演示了 BigInt 与普通数字相加的特殊情况。在 JavaScript 中,我们需要显式地将数字转换为 BigInt。当我们尝试将 42(普通数字)与 42n(或 BigInt)相加时,它会抛出一个错误,该错误在 try catch 的帮助下被捕获并显示在屏幕上。
<!DOCTYPE html> <html> <body> <h2>Adding BigInt & Regular Number</h2> <div id="output"></div> <script> const regularNumber = 42; const bigIntValue = BigInt(regularNumber); // Explicit conversion document.getElementById("output").innerHTML = `<p>Regular Number: ${regularNumber}</p>`+ `<p>BigInt Value: ${bigIntValue}</p>` + `<p>Regular Number + BigInt Value results in:</p>`; try { const result = regularNumber + bigIntValue; document.getElementById("output").innerHTML += `Result: ${result}`; } catch (e) { document.getElementById("output").innerHTML += `Error: ${e}`; } </script> </body> </html>