JavaScript数组中空位(empty items)与undefined的差异解析

这个问题问得很到位！数组空位（empty items）和undefined的差异确实容易让人踩坑，我结合你给出的REPL例子来拆解一下核心区别：

1. 本质：未初始化占位符 vs 实际存在的元素 #

• 用new Array(10)创建的数组，只是把length设为了10，但0到9这些索引位置根本没有被定义——这些“空位”是数组里纯粹的占位符，没有对应的属性。
• 而new Array(10).fill(undefined)创建的数组，每个索引位置都被显式赋值为undefined：undefined是JavaScript里的一个原始值，这些位置是实实在在存在元素的，只是元素的值是undefined。

2. 迭代方法的处理差异（你的例子就是最好的证明） #

这是最直观的区别：

• 像map()、forEach()、filter()这类数组迭代方法，会直接跳过空位，不会执行回调函数。比如你的数组a调用map(e => 1)后，依然返回10个空位的数组——因为回调根本没被触发过。
• 但对于填充了undefined的数组b，这些方法会正常遍历每一个元素，回调被执行10次，所以最终得到全1的数组。

再补充几个常见方法的表现：

• for...in循环：会跳过空位（因为空位对应的索引不是数组的可枚举属性），但会遍历值为undefined的元素的索引。
• Array.from()和扩展运算符...：会把空位自动转为undefined，比如Array.from(new Array(3))或[...new Array(3)]都会得到[undefined, undefined, undefined]。

3. 属性存在性的差异 #

你可以用hasOwnProperty()来验证两者的本质区别：

let a = new Array(10);
a.hasOwnProperty(0); // false —— 索引0根本不存在，是空位
let b = new Array(10).fill(undefined);
b.hasOwnProperty(0); // true —— 索引0存在，只是值是undefined

4. 特殊场景的表现差异 #

• 对象赋值：Object.assign({}, new Array(2))会得到空对象{}，因为空位没有对应的属性；而Object.assign({}, [undefined, undefined])会得到{0: undefined, 1: undefined}。
• includes()方法：[,,].includes(undefined)返回false（空位不是undefined），而[undefined, undefined].includes(undefined)返回true。

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