JS生成顺序数字数组代码原理及map返回undefined问题解析

我在网上找到了一段可正常运行的代码，却始终无法理解它的运行逻辑，想知道这段代码的工作原理。
可正常运行的代码片段：

const arr_seq = Array.apply(null, {
  length: 10
}).map(Number.call, Number);

console.log(arr_seq)

代码运行输出结果：

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

另外我原本以为以下代码可以实现完全相同的效果，实际却生成了一个全为undefined的数组，想了解具体原因：

const arr_undef = Array(n).map(Number.call, Number);

可正常生成序列的代码逻辑 #

整段代码分两步执行：

1. Array.apply(null, {length: 10}) 生成可被map遍历的密集数组
   Array构造函数接收多个位置参数时，会把每个参数作为数组元素生成新数组。apply方法的第二个参数接收类数组对象时，会把对象的索引项按顺序拆成位置参数传给目标函数。
   这里传入的{length: 10}只有长度属性，没有任何自定义索引键，相当于给Array传了10个undefined作为入参，等价于执行Array(undefined, undefined, /* 共10个undefined */ undefined)，最终得到长度为10、每个索引位都有真实值（值为undefined）的密集数组，这和直接调用Array(10)的返回值有本质区别。
2. .map(Number.call, Number) 按索引生成连续数字
   先明确map的执行规则：arr.map(回调函数, 回调执行时的this指向)，遍历每个有效元素时，会给回调函数传入三个参数：当前元素值、当前索引、原数组引用。
   这里传入的回调是Number.call，也就是所有函数都继承的Function.prototype.call方法，指定的this指向是Number构造函数。
   每一轮遍历的执行逻辑可以简化为Number(当前索引)：call方法的作用是调用自身this指向的函数（此处就是Number），传入的第一个参数会作为被调用函数的this指向（Number作为普通类型转换函数调用时，this绑定不影响返回值，直接忽略），第二个参数就是当前遍历的索引，多余的原数组参数会被Number自动忽略。最终每一轮都返回当前索引的数字值，正好组成0到9的连续序列。

另一种写法返回全undefined的原因 #

核心问题出在Array(n)的返回值上：这行代码生成的是稀疏数组，仅设置了数组的length属性为n，0到n-1的所有索引位都是空槽，没有创建对应的属性。
而map方法的设计逻辑是直接跳过所有空槽，不会对空槽执行回调，返回的结果数组对应位置也会保留空槽。空槽在控制台打印、JSON序列化时会被显示为undefined，所以最终看起来得到了一个全是undefined的数组。
可以用简单示例验证这个特性：

// 稀疏数组，map直接跳过空槽，返回带3个空槽的稀疏数组，打印显示为[undefined, undefined, undefined]
Array(3).map((_, index) => index)
// 密集数组，每个位置都是真实存在的undefined值，map会正常遍历，返回[0,1,2]
Array.apply(null, {length:3}).map((_, index) => index)

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