JavaScript数组length返回值异常原因及正确获取元素数量方法

核心原理 #

JavaScript中的数组是特殊的Object类型，length属性仅和范围在0 ~ 2^32-2之间的非负整数索引绑定，不会统计其他自定义属性，且取值固定为「最大有效索引值 + 1」。

两种异常场景的具体原因 #

场景1：字符串键赋值时length返回0 #

使用'rr'、'mm'这类字符串作为键赋值时，本质是给数组对象添加了自定义属性，不属于数组的有效索引，所以length不会统计这类属性，最终返回0。

var items_in_cart = [];
items_in_cart['rr'] = 1;
items_in_cart['mm'] = 2;
alert(items_in_cart.length); // 输出0，符合length的规则

场景2：大数字索引赋值时length偏大 #

50、77都属于数组的有效整数索引，按照length的计算规则，最大索引是77，所以length = 77 + 1 = 78，中间未赋值的位置会被标记为空槽，不会占用实际内存但会被算入length，最终出现length远大于实际元素数的情况。

var items_in_cart = [];
items_in_cart[50] = 1;
items_in_cart[77] = 2;
alert(items_in_cart.length); // 输出78，符合length的规则

正确统计实际元素数量的方案 #

根据使用场景选择对应方案：

• 如果键都是非整数的字符串，说明不需要使用数组，改用普通对象或Map更合理：
  • 普通对象：使用Object.keys(对象名).length统计属性数量

    var items_in_cart = {}; // 改用普通对象
    items_in_cart['rr'] = 1;
    items_in_cart['mm'] = 2;
    console.log(Object.keys(items_in_cart).length); // 输出2，符合预期
    

  • Map：直接调用内置的size属性即可，性能更优
• 如果确实需要使用数组存储稀疏元素，可通过过滤有效索引的方式统计实际元素数：

  var items_in_cart = [];
  items_in_cart[50] = 1;
  items_in_cart[77] = 2;
  const realCount = Object.keys(items_in_cart).filter(key => Number.isInteger(Number(key))).length;
  console.log(realCount); // 输出2，符合预期
  

内容的提问来源于stack exchange，提问作者Eng.Alserhany