如何安全地检查JavaScript多维数组中的索引是否存在

本文将介绍如何在JavaScript中安全地检查多维数组的索引是否存在，以避免常见的 TypeError: Cannot read properties of null (reading .) 错误。正如摘要所述，我们将利用可选链操作符（Optional Chaining）来优雅地处理可能不存在的数组元素，从而提高代码的健壮性。

使用可选链操作符（Optional Chaining）

当访问深层嵌套的对象属性或数组元素时，如果中间的某个属性或元素不存在，JavaScript会抛出 TypeError。为了避免这种情况，我们可以使用可选链操作符 ?.。 可选链操作符允许我们安全地访问可能为空或未定义的属性。如果链中的某个部分为 null 或 undefined，则表达式将短路并返回 undefined，而不会抛出错误。

示例：

假设我们有以下多维数组：

立即学习“Java免费学习笔记（深入）”；

const array = [
[
[
[
{
value: 10
}
]
]
]
];

如果我们想访问 array[0][0][0][0].value，但某些中间元素可能不存在，我们可以使用可选链操作符：

const value = array?.[0]?.[0]?.[0]?.[0]?.value;
console.log(value); // 输出 10 (如果所有元素都存在) 或 undefined (如果任何元素不存在)

应用到循环中：

回到原始问题，假设我们有以下循环：

for (var i = 0; i < array[1][1].length; i++) {
x[array[1][1][i][1]] =
array[1][1][i][4][0][4][0][2][0];
}

为了避免 TypeError，我们可以使用可选链操作符来检查数组元素是否存在：

for (var i = 0; i < array[1][1].length; i++) {
const value = array?.[1]?.[1]?.[i]?.[4]?.[0]?.[4]?.[0]?.[2]?.[0];
if(value){
x[array[1][1][i][1]] = value;
}
}

在这个修改后的代码中，array?.[1]?.[1]?.[i]?.[4]?.[0]?.[4]?.[0]?.[2]?.[0] 会安全地检查数组元素是否存在。如果任何一个索引不存在，表达式将返回 undefined，if 语句的条件将为假，从而避免了访问不存在的属性。

注意事项：

• 可选链操作符只能用于访问属性或数组元素，不能用于赋值。
• 在使用可选链操作符时，请确保你理解代码的逻辑，并知道哪些属性或元素可能不存在。
• 虽然可选链操作符可以避免 TypeError，但它不会解决所有问题。如果你的代码依赖于某个属性或元素的存在，你仍然需要进行适当的错误处理。

总结：

通过使用可选链操作符，我们可以安全地检查JavaScript多维数组中的索引是否存在，避免因访问不存在的属性而导致程序崩溃。这是一种简单而有效的方法，可以提高代码的健壮性和可维护性。在处理可能为空或未定义的属性时，建议始终使用可选链操作符。