JavaScript函数返回数组长度异常：初始化16长度返回后变31如何解决

你提到的31这个数值，刚好是16个0加15个分隔逗号的总字符长度——如果把16位的零数组隐式转成字符串，得到的内容就是"0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0"，算下来字符总数刚好31。
也就是说，你看到的长度为31的结果，从来不是数组本身的length属性值。JavaScript中数组本身的length属性只会统计自身存储的有效元素数量，永远不会把元素之间的逗号字符纳入统计，你观察到的异常是JavaScript的隐式类型转换造成的视觉误差，和数组的长度计算逻辑没有关系。

你贴出来的代码本身运行的话，两次打印的数组长度都会是16，不会出现31的结果，出现这个问题基本是两种情况：

• 打印时漏写了.length属性，实际执行的是console.log("status length now: "+ status)，字符串拼接操作会自动把数组转成逗号分隔的字符串，你误把这段拼接后字符串的总长度，当成了数组本身的长度
• 本地运行的代码和你贴出来的版本不一致，全局的status变量被其他逻辑意外重新赋值成了长度为31的字符串，后续打印取的是字符串的length属性，自然和预期的数组长度不匹配

要从根源上避免这类隐式转换、变量篡改带来的长度异常，可以按下面的方式调整实现：

• 初始化固定长度的数组时，不要手写16个重复的0，用更简洁、可靠的写法生成固定长度的数组：

  // 生成长度固定为16、所有元素初始值为0的数组
  const initStatus = Array(16).fill(0);
  

  这种写法比手写数组、new Array多参数传值的可读性高，也不会触发new Array单参数传入数字时的空位数组特殊逻辑。
• 打印日志时不要把属性值直接拼接到字符串后面，避免隐式转换造成判断偏差，把要打印的值作为独立参数传给console.log：

  // 容易触发隐式转换的写法
  console.log("status length now: " + status.length);
  // 更可靠的写法，调试工具会独立识别每个参数的类型和值
  console.log("status length now:", status.length, status);
  

• 如果需要在多个函数中共享这个游戏状态数组，不要把数组暴露成全局可直接修改的变量，用闭包把数组封装起来，从结构上避免外部逻辑篡改数组长度、替换数组类型：

  function createGameState(fixedLength = 16) {
    // 数组完全在闭包内部，外部无法直接修改、替换
    const stateList = Array(fixedLength).fill(0);
    return {
      // 只读返回固定长度，外部无法篡改
      get length() {
        return stateList.length;
      },
      // 带越界校验的元素读取方法
      getValue(index) {
        if (index < 0 || index >= fixedLength) throw new Error("状态索引越界");
        return stateList[index];
      },
      // 带越界校验的元素更新方法
      updateValue(index, value) {
        if (index < 0 || index >= fixedLength) throw new Error("状态索引越界");
        stateList[index] = value;
      }
    }
  }
  
  // 实际使用时初始化状态
  const gameStatus = createGameState();
  console.log(gameStatus.length); // 固定输出16，不会被外部逻辑篡改
  

下次遇到变量长度和预期不符的情况，可以先在控制台单独执行类型判断，确认变量实际结构：

console.log(typeof status, status instanceof Array);

如果输出的是string false，说明当前的status已经被意外赋值成了字符串，你看到的长度自然是字符串的字符数，和数组本身的逻辑无关。

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