JS数组反转时空位变为undefined？如何保留原数组空位

问题描述 #

我有一个包含空位的数组，执行反转操作后，所有空位都变成了可被遍历的undefined，想知道这是什么原因，以及如何在反转后保留原数组的空位。

代码示例 #

const originalArray = new Array(5);
originalArray[2] = "a";
originalArray.push("b");
originalArray.push("c");

const reversedArray = Array.from(originalArray).reverse();

console.log('');
console.log('original');
originalArray.forEach((el, index) => console.log('el: ', el, ' index: ', index));

console.log('');
console.log('reversed');
reversedArray.forEach((el, index) => console.log('el: ', el, ' index: ', index));

实际输出 #

original:
el:  a  index:  2
el:  b  index:  5
el:  c  index:  6

reversed:
el:  c  index:  0
el:  b  index:  1
el:  undefined  index:  2
el:  undefined  index:  3
el:  a  index:  4
el:  undefined  index:  5
el:  undefined  index:  6

原本预期反转后的数组仍保留空位，不会被forEach遍历到这些位置。

原因分析 #

问题根源不在reverse()方法，而是**Array.from()会将数组空位转为undefined**：

• Array.from()基于数组的迭代器创建新数组，而数组的迭代器会把空位当作undefined处理，所以生成的新数组里已经没有空位，全是undefined。
• 原数组的forEach会跳过空位，但undefined不属于空位，所以反转后的数组用forEach遍历时会输出所有索引对应的undefined。

保留空位的解决方案 #

要保留空位反转数组，核心是创建保留空位的数组副本，再执行反转。

方案1：使用slice()创建副本后反转 #

slice()是数组的浅拷贝方法，会完整保留原数组的空位，不会将其转为undefined。代码如下：

const reversedArray = originalArray.slice().reverse();

测试输出：

reversed:
el:  c  index:  0
el:  b  index:  1
el:  a  index:  4

forEach跳过了空位，说明空位成功保留。

方案2：手动构建反转数组 #

通过遍历原数组索引，反向填充新数组，仅对原数组中存在值的索引赋值：

const reversedArray = new Array(originalArray.length);
for (let i = 0; i < originalArray.length; i++) {
  const originalIndex = originalArray.length - 1 - i;
  // 判断原索引是否存在属性（空位不存在该属性）
  if (originalIndex in originalArray) {
    reversedArray[i] = originalArray[originalIndex];
  }
}

这种方式完全手动控制赋值逻辑，确保未赋值的位置保持空位。

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