TypeScript中如何通过for循环填充数组且不生成空元素？

这是JavaScript/TypeScript数组的正常特性，不属于异常行为：当你直接给超出当前数组长度的索引位置赋值时，数组会自动扩展长度，中间未赋值的位置会被标记为empty（稀疏数组）。你从i=2开始直接给MyList[i]赋值，就会自动补全索引0、1的空位为empty，最终生成你看到的带空位的数组。

方案1：使用push方法追加元素（最推荐） #

不需要手动指定数组索引，直接把生成的数值追加到数组末尾，自动从索引0开始填充：

MyList: number[] = [];
getList(){
  for(let i = 2; i < 11; i++){
    this.MyList.push(i);
  }
}

最终生成的数组为[2,3,4,5,6,7,8,9,10]，没有空值，可直接用于下拉列表渲染。

方案2：渲染前过滤空值 #

如果你的业务逻辑需要保留数组索引和数值的对应关系，可以在渲染下拉列表前过滤掉空值：

const renderList = this.MyList.filter(item => item != null);

用过滤后的renderList渲染下拉列表即可。

方案3：用Array.from快速生成目标数组 #

不需要写for循环，一行代码生成指定范围的数值数组：

getList(){
  // length对应生成的元素数量，这里2到10共9个元素
  this.MyList = Array.from({length: 9}, (_, index) => index + 2);
}

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