如何获取JavaScript数组中真正的第一个有值元素的推荐方法

嘿，这个场景我太熟了！之前做项目的时候就碰到过给数组高索引赋值后，要找第一个有效元素的需求，给你几个实用的方案，你可以根据自己的场景选：

• 高效方案：利用对象键遍历特性
  因为JavaScript数组本质上是特殊的对象，只有已赋值的索引才会成为它的实际键。我们可以用Object.keys()或者for...in循环直接获取这些已存在的索引，完全不用管那些空槽：

  用Object.keys()的写法：

  let a = [];
  a[1000] = 1;
  // 获取所有已赋值的索引（字符串形式）
  const existingKeys = Object.keys(a);
  // 取第一个索引转成数字，再拿对应值
  const firstValidValue = a[Number(existingKeys[0])]; // 1
  

  用for...in循环的写法：

  let a = [];
  a[1000] = 1;
  let firstValidValue;
  // 只会遍历数组中实际存在的索引，找到第一个就跳出
  for (const index in a) {
    firstValidValue = a[index];
    break;
  }
  console.log(firstValidValue); // 1
  

  这两个方法的优势在于，它们不会遍历那些大量的空槽，只处理已赋值的元素，性能比遍历整个数组好太多，尤其适合空槽数量远大于已赋值元素的情况。

• 简洁方案：用Array.find()（适合空槽少的场景）
  如果你的数组前面空槽不多，或者对性能要求没那么高，用find()写起来特别简洁：

  let a = [];
  a[1000] = 1;
  // 找第一个不是undefined的元素
  const firstValidValue = a.find(item => item !== undefined); // 1
  

  不过这里要注意一个细节：如果你的数组里有手动赋值的undefined（比如a[5] = undefined），这个方法会把它跳过，因为条件是item !== undefined。如果你的场景里，手动赋值的undefined也算“有值元素”，那可以把判断条件改成检查索引是否存在：

  let a = [];
  a[5] = undefined;
  a[1000] = 1;
  // 找第一个实际存在的索引对应的元素
  const firstValidValue = a.find((_, index) => index in a); // undefined
  

• 额外提醒：区分空槽和手动赋值的undefined
  很多人会把数组的空槽和手动赋值的undefined搞混：空槽是数组从未赋值的位置，访问时返回undefined，但用index in array会返回false；而手动赋值的undefined，index in array会返回true，属于“已存在的键”。所以选方法前，先明确你要找的是“第一个值不是undefined的元素”，还是“第一个实际存在的索引对应的元素”。

内容来源于stack exchange