JavaScript中如何正确判断二维数组指定索引的子数组是否为空

问题原因 #

你之前的判断逻辑不生效的核心原因是：空数组不等于undefined。
你通过splice删光子数组的元素时，只是清空了source_array[1]这个子数组的内容，这个子数组本身仍然作为一个合法的数组对象存在，只是长度为0，因此source_array[1] == undefined自然返回false。
只有当你把source_array[1]整个从父数组中移除（比如调用source_array.splice(1,1)删除父数组的1号元素），或是主动给source_array[1]赋值为undefined时，你之前的判断才会返回true。而你判断长度为2的数组的索引2时返回true，是因为父数组本身就没有这个位置的元素，值本身就是undefined，和空数组场景完全不同。

正确实现方法 #

如果你需要同时覆盖「子数组不存在」和「子数组存在但为空」两种场景，可以用以下两种写法：

写法1：兼容ES2020及以上环境（推荐） #

使用可选链操作符简化判断：

if (!source_array[1]?.length) {
  // 满足条件：source_array[1]不存在 / 存在但为空数组
  console.log("1号位置的子数组为空");
}

写法2：兼容所有JS环境 #

if (!source_array[1] || source_array[1].length === 0) {
  // 满足条件：source_array[1]不存在 / 存在但为空数组
  console.log("1号位置的子数组为空");
}

效果验证 #

用你给出的场景测试：

const source_array = [["A","B","C"], [], ["A","B","C"]];
// 判断1号位置
console.log(!source_array[1]?.length); // 输出 true，符合预期
// 判断2号位置（有内容的子数组）
console.log(!source_array[2]?.length); // 输出 false
// 判断3号位置（不存在的索引）
console.log(!source_array[3]?.length); // 输出 true

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