【JavaScript 报错】未捕获的范围错误：Uncaught RangeError

在这里插入图片描述

🔥 个人主页：空白诗

在这里插入图片描述

文章目录

- 一、错误原因分析
- - 1. 递归调用次数过多
  - 2. 数组长度超出限制
  - 3. 数值超出允许范围
- 二、解决方案
- - 1. 限制递归深度
  - 2. 控制数组长度
  - 3. 检查数值范围
- 三、实例讲解
- 四、总结

在这里插入图片描述

Uncaught RangeError 是JavaScript中常见的一种错误，通常发生在数值超出其允许范围时，例如递归次数过多或数组长度超过最大限制。本文将详细介绍 Uncaught RangeError 错误的常见原因及其解决方案。

一、错误原因分析

1. 递归调用次数过多

当递归调用次数过多，超过了JavaScript引擎的最大调用堆栈限制时，会抛出 RangeError 错误。

function recurse() {
  recurse();
}
recurse(); // Uncaught RangeError: Maximum call stack size exceeded

2. 数组长度超出限制

当尝试设置一个超出JavaScript引擎允许范围的数组长度时，会抛出 RangeError 错误。

let arr = [];
arr.length = 4294967296; // Uncaught RangeError: Invalid array length

3. 数值超出允许范围

当数值超出JavaScript允许的范围时，也会抛出 RangeError 错误。

let num = Number.MAX_SAFE_INTEGER + 1;
console.log(num.toPrecision(500)); // Uncaught RangeError: toPrecision() argument must be between 1 and 100

二、解决方案

1. 限制递归深度

在递归函数中添加终止条件，避免无限递归。

function recurse(count) {
  if (count > 10) return; // 终止条件
  recurse(count + 1);
}
recurse(0); // 正确

2. 控制数组长度

避免设置过大的数组长度，确保数组长度在合理范围内。

let arr = [];
arr.length = 1000; // 正确
console.log(arr.length); // 1000

3. 检查数值范围

在对数值进行操作时，确保数值在JavaScript允许的范围内。

let num = 1.23;
console.log(num.toPrecision(10)); // 正确

三、实例讲解

以下是一个完整的实例，通过前述的各种方法来避免和处理 RangeError 错误：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Uncaught RangeError 示例</title>
</head>
<body>
  <script>
    // 限制递归深度
    function recurse(count) {
      if (count > 10) return; // 终止条件
      recurse(count + 1);
    }
    recurse(0); // 正确

    // 控制数组长度
    let arr = [];
    arr.length = 1000; // 正确
    console.log(arr.length); // 1000

    // 检查数值范围
    let num = 1.23;
    console.log(num.toPrecision(10)); // 正确
  </script>
</body>
</html>