JavaScript数组打印显示的empty与访问返回的undefined有何区别？

核心原因是你创建的是稀疏数组，数组空位（empty）和赋值为undefined的索引是完全不同的两种情况。 #

• 首先JS数组本质上是特殊的对象，索引就是对象的数字类型属性名。你没有给arr[4]赋值过，所以4这个属性根本不存在于数组对象上，你的测试数组是标准的稀疏数组：数组的length是6，但实际存在的索引属性只有1、2、3、5四个。
• 单独访问arr[4]返回undefined，是JS访问对象不存在属性时的默认返回规则，不是说这个位置的值是undefined，只是访问不存在属性的统一返回结果。你可以用arr.hasOwnProperty(4)验证，返回结果是false，证明该索引属性本身不存在。
• 控制台打印整个数组时显示empty，是控制台特意做的区分标识：用来明确告诉开发者这个位置是不存在的索引空位，和「索引属性存在、但值被显式设为undefined」的情况做区分，避免两种场景混淆。

你可以用以下代码验证两种场景的差异：

// 对比：显式赋值undefined的密集数组 和 有空位的稀疏数组
const denseArr = [undefined, 1, 2, 3, undefined, 5]
const sparseArr = []
sparseArr[1] = 1
sparseArr[2] = 2
sparseArr[3] = 3
sparseArr[5] = 5

// 单独访问索引0结果相同
console.log(denseArr[0]) // undefined
console.log(sparseArr[0]) // undefined

// 打印整个数组的显示完全不同
console.log(denseArr) // [undefined, 1, 2, 3, undefined, 5]
console.log(sparseArr) // [empty, 1, 2, 3, empty, 5]

// 用hasOwnProperty判断属性是否存在
console.log(denseArr.hasOwnProperty(0)) // true，索引属性存在，值为undefined
console.log(sparseArr.hasOwnProperty(0)) // false，索引属性不存在，是空位

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