提取混合数组字符串时遇RangeError: invalid array length错误求助

错误根源 #

• 无限循环导致数组溢出：遍历firstArray时，else分支把非字符串元素重新push回firstArray，导致数组长度在循环中持续增长，i永远小于data.length，循环无法终止，最终数组长度超过JavaScript允许的最大值，触发RangeError: invalid array length。
• 类型判断错误：判断字符串的条件写成typeof data[i] === ""，正确的字符串类型判断应为typeof data[i] === "string"。
• 执行顺序错误：函数内连续写了两个return语句，会直接终止函数，后续DOM渲染代码永远不会执行。
• 原数组被污染：遍历过程中往原数组添加元素的逻辑本身错误，会破坏原始数据结构。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Task number five</title>
</head>
<body>
  <h2>Average length of the string in this array:</h2>
  <p id="averageLength"></p>
  <br>
  <h2>The sum of all the numbers in this array:</h2>
  <p id="sumNumbers"></p>
  <script>
    const firstArray = ["String 1", { name: "Lola" }, 2, 32.22024, false, 2.1112, true, "String 2", "String 3", "Jim likes dogs", [], {}];
    const stringArray = [];
    const numberArray = []; // 专门存储数字元素，用于计算总和

    function processArray(data) {
      for (let i = 0; i < data.length; i++) {
        const item = data[i];
        // 修正字符串类型判断逻辑
        if (typeof item === "string") {
          stringArray.push(item);
        } 
        // 新增数字类型判断，分离数字与其他类型
        else if (typeof item === "number" && !isNaN(item)) {
          numberArray.push(item);
        }
        // 其他类型无需处理，避免污染原数组
      }

      // 计算并展示字符串平均长度
      let totalStrLength = 0;
      stringArray.forEach(str => totalStrLength += str.length);
      const strAverage = stringArray.length > 0 ? totalStrLength / stringArray.length : 0;
      document.getElementById("averageLength").innerHTML = strAverage.toFixed(2);

      // 计算并展示数字总和
      const numSum = numberArray.reduce((acc, num) => acc + num, 0);
      document.getElementById("sumNumbers").innerHTML = numSum.toFixed(4);
    }

    processArray(firstArray);
  </script>
</body>
</html>

关键修改说明 #

• 移除往原数组firstArray添加元素的逻辑，彻底解决无限循环和原数组污染问题。
• 修正字符串类型判断条件，确保能准确识别字符串元素。
• 删除无效的return语句，保证后续计算和DOM渲染代码正常执行。
• 新增numberArray存储数字元素，实现题目要求的数字总和计算功能。
• 补充字符串平均长度、数字总和的计算逻辑，完成题目核心需求。

内容的提问来源于stack exchange，提问作者VaQuellJQL