循环首次迭代出现null：我的JavaScript代码存在什么问题？

嘿，我来帮你看看这个问题～你遇到的首个元素为null的情况，核心原因是JavaScript数组的索引是从0开始的，但你的循环逻辑没考虑到这一点：

你的原代码里，循环从i=1开始直接给options[i]赋值，这就导致数组的第0位（也就是第一个元素）完全没被赋值，默认就是null，而且最终数组的长度会是21（索引0到20），和你预期的20个元素不符。

来看下你的问题代码：

generateRewardOptions = () => { 
  let options = [] 
  const max = 20 
  for(let i = 1; i <= max; i++){ 
    options[i] = { key: i, value: i, text: i } 
  } 
  return options 
}

两种修复方案 #

方案一：使用数组push方法（推荐） #

这是最简洁稳妥的方式，不用手动管理索引，直接把元素添加到数组末尾：

generateRewardOptions = () => { 
  let options = [] 
  const max = 20 
  for(let i = 1; i <= max; i++){ 
    options.push({ key: i, value: i, text: i }) 
  } 
  return options 
}

方案二：调整循环索引逻辑 #

如果想手动控制数组索引，可以把循环起始改为0，同时调整元素的数值：

generateRewardOptions = () => { 
  let options = [] 
  const max = 20 
  for(let i = 0; i < max; i++){ 
    options[i] = { key: i+1, value: i+1, text: i+1 } 
  } 
  return options 
}

修复后再调用console.log(JSON.stringify(generateRewardOptions()))，就能得到一个包含20个元素的数组，再也不会出现开头的null啦～

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