为何在JavaScript数组中添加键值对后，该键值对不被算作数组元素？

测试代码 #

let arr = [1, 2, 3, 4, 5];
console.log(arr);
console.log(arr.length)
arr.greet = 'Hi';
console.log(arr);
console.log(arr.length)
console.log(arr.pop())

问题现象 #

运行上述代码后出现两个特殊现象：

• 给数组arr添加greet='Hi'键值对后，length属性未改变，调用pop()返回的结果仍是5。
• 浏览器控制台中第二个console.log(arr)会打印[1, 2, 3, 4, 5, greet: 'Hi']，但代码片段运行器中不会显示该自定义属性。

原因解析 #

1. length不变、pop()返回5的原因 #

• JS里数组是特殊的对象，但length属性只和数组的非负整数索引属性绑定。
• 添加greet这种字符串键属于给对象加普通自定义属性，不属于数组的索引体系。数组当前最大索引是4（对应元素5），所以length始终是5。
• pop()方法只操作数组最后一个索引对应的元素，完全不受自定义属性影响，自然返回5。

2. 控制台与代码片段运行器显示差异的原因 #

• 浏览器控制台打印数组时，会把它当作“带额外属性的特殊对象”处理，既展示数组元素，也列出所有附加的自定义属性，所以能看到greet: 'Hi'。
• 多数代码片段运行器在打印数组时，会优先按纯数组格式输出，只遍历非负整数索引对应的元素，忽略非索引型的自定义属性，因此不会显示greet项。

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