JavaScript是否存在隐式、显式undefined？数组空槽遍历差异原理是什么？

核心结论 #

• JavaScript 不存在「隐式undefined」和「显式undefined」的区分，undefined是唯一的原始类型值，两种场景下得到的undefined本身没有任何差异
• 该现象本质是JS对象的属性存在性和属性值是完全独立的两个概念，和数组本身的特性无关

具体原理拆解 #

• 数组是JS中的特殊对象，数字索引本质是字符串类型的属性名，数组的empty空槽对应的就是该索引属性不存在
• 当你访问一个对象不存在的属性时，JS会默认返回undefined：这就是第三步console.log(arr[0])输出undefined的原因——此时arr上根本不存在0这个属性，和属性值无关
• for...in遍历的规则是仅遍历对象可枚举的自有属性：只有真实存在于对象上的可枚举属性才会被遍历，所以第四步仅存在5这个属性，仅输出5
• 当你执行arr[0] = undefined时，相当于给arr对象新增了一个名为0的可枚举属性，属性值为undefined：该属性已经真实存在，自然会被for...in遍历到

验证示例 #

可以用普通对象复现完全一致的逻辑，更容易理解：

const obj = {}
// 访问不存在的属性返回undefined
console.log(obj.a) // 输出 undefined
// 检查属性是否存在
console.log('a' in obj) // 输出 false
// for...in不会遍历不存在的属性
for (let key in obj) {
  console.log(key) // 无输出
}

// 显式给属性赋值为undefined
obj.a = undefined
console.log(obj.a) // 仍然输出 undefined
console.log('a' in obj) // 输出 true，属性已经存在
for (let key in obj) {
  console.log(key) // 输出 a
}

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