主页
  • 主页
  • 分类
  • 热文
  • 教程
  • 面试
  • 标签
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 Nullish 合并运算符
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 语句
JavaScript 可迭代对象

JavaScript 函数

JavaScript 函数
JavaScript 函数表达式
JavaScript 函数参数和参数值
JavaScript 默认参数
JavaScript Function() 构造函数
JavaScript 函数提升
JavaScript 自执行函数
JavaScript 箭头函数
JavaScript 函数调用
JavaScript call() 方法
JavaScript apply() 方法
JavaScript bind() 方法
JavaScript 闭包
JavaScript 作用域
JavaScript 全局变量
JavaScript 智能函数参数

JavaScript 对象

JavaScript Number 对象
JavaScript Boolean 对象
JavaScript String 对象
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 原型(Prototype)
JavaScript ES5 对象方法
JavaScript 封装
JavaScript 继承
JavaScript 抽象
JavaScript 多态
JavaScript 解构赋值
JavaScript 数组解构
JavaScript 嵌套解构
JavaScript 可选链
JavaScript 全局对象
JavaScript mixins
JavaScript 代理(Proxy)

JavaScript Cookies

JavaScript Cookies操作
JavaScript Cookie 属性
JavaScript 删除 Cookies

JavaScript 浏览器 BOM

JavaScript 浏览器对象模型(BOM)
JavaScript 窗口对象
JavaScript Document 对象
JavaScript 屏幕对象
JavaScript Window History 对象
JavaScript Navigator 对象
JavaScript Location 对象
JavaScript Console 对象

JavaScript Web APIs

JavaScript Web API
JavaScript History API
JavaScript 存储 API
JavaScript Forms API
JavaScript Worker API
JavaScript Fetch API
JavaScript 定位 API

JavaScript 事件

JavaScript 事件
JavaScript DOM 事件
JavaScript addEventListener()
JavaScript 鼠标事件
JavaScript 键盘事件
JavaScript 表单事件
JavaScript 窗口事件
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 文档对象
JavaScript DOM 元素
JavaScript 文档表单
JavaScript 更改 HTML
JavaScript 更改 CSS
JavaScript DOM 动画
JavaScript DOM 导航
JavaScript DOM 集合
JavaScript 节点列表

JavaScript 杂项

JavaScript Ajax
JavaScript 异步迭代
JavaScript Atomics 对象
JavaScript 剩余参数
JavaScript 页面重定向
JavaScript 对话框
JavaScript 打印网页
JavaScript 表单验证
JavaScript 创建动画
JavaScript 多媒体
JavaScript 图像地图
JavaScript 浏览器兼容性
JavaScript JSON
JavaScript 多行字符串
JavaScript 浅拷贝
JavaScript 日期格式
JavaScript 获取日期方法
JavaScript 调用栈
JavaScript 引用类型
JavaScript 设置日期方法
JavaScript 模块
JavaScript IndexedDB
JavaScript clickjacking(点击劫持)
JavaScript 动态导入
JavaScript BigInt
JavaScript 柯里化(Currying)
JavaScript 图形库
JavaScript Blob
JavaScript Unicode
JavaScript 绘制图形
JavaScript 防抖
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 typeof 运算符
JavaScript Nullish 合并运算符
JavaScript delete 运算符
JavaScript 逗号运算符
JavaScript 分组运算符
JavaScript Yield 运算符
JavaScript 扩展运算符
JavaScript 指数运算符
JavaScript 运算符优先级

控制流

JavaScript if...else 语句
JavaScript while 循环
JavaScript for 循环
JavaScript for...in 循环
JavaScript for...of 循环
JavaScript 循环控制
JavaScript break 语句
JavaScript continue 语句
JavaScript switch 语句
JavaScript 可迭代对象

函数

JavaScript 函数
JavaScript 函数表达式
JavaScript 函数参数和参数值
JavaScript 默认参数
JavaScript Function() 构造函数
JavaScript 函数提升
JavaScript 自执行函数
JavaScript 箭头函数
JavaScript 函数调用
JavaScript call() 方法
JavaScript apply() 方法
JavaScript bind() 方法
JavaScript 闭包
JavaScript 作用域
JavaScript 全局变量
JavaScript 智能函数参数

对象

JavaScript Number 对象
JavaScript Boolean 对象
JavaScript String 对象
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 原型(Prototype)
JavaScript ES5 对象方法
JavaScript 封装
JavaScript 继承
JavaScript 抽象
JavaScript 多态
JavaScript 解构赋值
JavaScript 数组解构
JavaScript 嵌套解构
JavaScript 可选链
JavaScript 全局对象
JavaScript mixins
JavaScript 代理(Proxy)

Cookies

JavaScript Cookies操作
JavaScript Cookie 属性
JavaScript 删除 Cookies

浏览器 BOM

JavaScript 浏览器对象模型(BOM)
JavaScript 窗口对象
JavaScript Document 对象
JavaScript 屏幕对象
JavaScript Window History 对象
JavaScript Navigator 对象
JavaScript Location 对象
JavaScript Console 对象

Web APIs

JavaScript Web API
JavaScript History API
JavaScript 存储 API
JavaScript Forms API
JavaScript Worker API
JavaScript Fetch API
JavaScript 定位 API

事件

JavaScript 事件
JavaScript DOM 事件
JavaScript addEventListener()
JavaScript 鼠标事件
JavaScript 键盘事件
JavaScript 表单事件
JavaScript 窗口事件
JavaScript 事件委托
JavaScript 事件冒泡
JavaScript 事件捕获
JavaScript 自定义事件

错误处理

JavaScript 错误处理
JavaScript try-catch
JavaScript 调试
JavaScript 自定义错误
JavaScript 扩展错误

重要关键字

JavaScript this'关键字
JavaScript void 关键字
JavaScript new 关键字
JavaScript var 关键字

HTML DOM

JavaScript HTML DOM
JavaScript DOM 方法
JavaScript 文档对象
JavaScript DOM 元素
JavaScript 文档表单
JavaScript 更改 HTML
JavaScript 更改 CSS
JavaScript DOM 动画
JavaScript DOM 导航
JavaScript DOM 集合
JavaScript 节点列表

杂项

JavaScript Ajax
JavaScript 异步迭代
JavaScript Atomics 对象
JavaScript 剩余参数
JavaScript 页面重定向
JavaScript 对话框
JavaScript 打印网页
JavaScript 表单验证
JavaScript 创建动画
JavaScript 多媒体
JavaScript 图像地图
JavaScript 浏览器兼容性
JavaScript JSON
JavaScript 多行字符串
JavaScript 浅拷贝
JavaScript 日期格式
JavaScript 获取日期方法
JavaScript 调用栈
JavaScript 引用类型
JavaScript 设置日期方法
JavaScript 模块
JavaScript IndexedDB
JavaScript clickjacking(点击劫持)
JavaScript 动态导入
JavaScript BigInt
JavaScript 柯里化(Currying)
JavaScript 图形库
JavaScript Blob
JavaScript Unicode
JavaScript 绘制图形
JavaScript 防抖
JavaScript 性能
JavaScript 编码规范

JavaScript BigInt


上一章 下一章

BigInt 数据类型是 JavaScript 中的一种数值原生类型,它可以表示任意大小的整数。这与 Number 类型形成了对比,后者只能表示介于 -(2^53 - 1) 和 2^53 - 1 之间的整数。

JavaScript 是一种驱动动态网页应用的语言,传统上根据广泛采用的 IEEE-754 标准中的双精度浮点格式来处理数值表示。该标准的一个重要限制是,它只能精确表示最大安全整数 2^53 - 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);

示例

示例 1:简单的 BigInt 算术

在这个例子中,我们演示了两个 BigInt 数字 num1 和 num2 的加法和乘法,它们的值分别是 123n 和 456n。通过启用大整数值的准确表示而不冒精度损失的风险,BigInt 克服了常规 JavaScript 数字的一个潜在缺点。

<!DOCTYPE html>
<html>
<body>
   <h2>简单的 BigInt 算术</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 = 
   `123n 与 456n 的和是 ${sum} 且它们的积为 ${product}`;
      });
   
</script>
</body>
</html>

示例 2:使用 BigInt 的斐波那契数列生成器

斐波那契数列是一系列数字,在其中每个数字都是前两个数字的和;使用 BigInt 来处理超过常规 JavaScript 数字精度极限的大值。通过 generateFibonacci 函数,数组充当这些序列值的存储,即使对于具有显著数值大小的项也能保证准确的计算。

<!DOCTYPE html>
<html>
<body>
   <h2>斐波那契数列</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 = "前20项斐波那契数列为: " + result.join(", ");
      });
   
</script>
</body>
</html>

示例 3:使用 BigInt 的阶乘计算器

阶乘是一个数的所有小于或等于它的正整数的乘积。为了找到阶乘,我们使用了 BigInt。对于像 5 和 10 这样小的数字,常规数字是可以工作的,但如果我们要找出 10000 的阶乘,结果将会非常巨大。因此,BigInt 就派上了用场。在这个例子中,我们通过一个循环来找出 20n 的阶乘。

<!DOCTYPE html>
<html>
<body>
   <h2>大数的阶乘</h2>
   <p id="result"></p>
   <script>
      function calculateFactorial() {
         const num = 20n; // 计算 20 的阶乘
         let result = 1n;

         for (let i = 2n; i <= num; i++) {
            result *= i;
         }
         document.getElementById("result").innerText = "20 的阶乘是 " + 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 的颜色示例</h2>
   <div id="colorSquare"></div>
   <script> 
      function generateRandomColor() {
         const maxColorValue = 16777215n; // 十六进制形式为 0xFFFFFF
         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>BigInt 与常规数字相加</h2>
   <div id="output"></div>
   <script>
      const regularNumber = 42;
      const bigIntValue = BigInt(regularNumber); // 显式转换

      document.getElementById("output").innerHTML = 
    `<p>常规数字: ${regularNumber}</p>`+
      `<p>BigInt 值: ${bigIntValue}</p>` +
      `<p>常规数字与 BigInt 值相加的结果为:</p>`;

      try {
         const result = regularNumber + bigIntValue;
         document.getElementById("output").innerHTML += `结果: ${result}`;
      } catch (e) {
         document.getElementById("output").innerHTML += `错误: ${e}`;
      }
   
</script>
</body>
</html>
上一章 下一章
阅读号二维码

关注阅读号

联系二维码

联系我们

© 2024 Yoagoa. All rights reserved.

粤ICP备18007391号

站点地图