JavaScript 中安全访问多维数组：利用可选链操作符避免空指针错误

本文旨在解决 JavaScript 中访问多维数组时可能遇到的空指针错误。通过引入可选链操作符，开发者可以安全地访问深层嵌套的数组元素，避免因中间层级不存在而导致的程序崩溃。本文将详细介绍可选链操作符的用法，并提供示例代码，帮助读者掌握在 JavaScript 中安全访问多维数组的技巧。

在 JavaScript 中，访问多维数组时，如果数组的某个层级不存在，会抛出 TypeError: Cannot read properties of null (reading …) 错误。这种错误通常发生在尝试访问深层嵌套的数组元素，而中间层级的数组可能尚未初始化或不存在的情况下。

可选链操作符 ?. 的作用

可选链操作符 ?. 允许开发者安全地访问对象的属性或调用方法，即使该对象或其属性为 null 或 undefined。如果 ?. 左侧的操作数为 null 或 undefined，则整个表达式将立即返回 undefined，而不会抛出错误。

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

使用可选链操作符访问多维数组

要安全地访问多维数组，可以将可选链操作符应用于数组的每个层级。例如，假设有一个多维数组 array，要访问 array[1][1][i][4][0][4][0][2][0]，可以使用以下代码：

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

在这个例子中，array?.[1]?.[1]?.[i]?.[4]?.[0]?.[4]?.[0]?.[2]?.[0] 会依次检查 array、array[1]、array[1][1]、array[1][1][i]、array[1][1][i][4]、array[1][1][i][4][0]、array[1][1][i][4][0][4]、array[1][1][i][4][0][4][0]、array[1][1][i][4][0][4][0][2] 是否存在。如果其中任何一个层级为 null 或 undefined，则整个表达式将返回 undefined，if 语句的条件为假，避免了访问不存在的属性而导致的错误。

示例

const array = [
[
[
[
null,
[
[
[
,
,
[10]
]
]
]
]
]
]
];
for (var i = 0; i < array[0][0][0].length; i++) {
if(array?.[0]?.[0]?.[0]?.[i]?.[1]?.[0]?.[0]?.[2]?.[0]){
console.log("存在");
} else {
console.log("不存在");
}
}

在这个例子中，array[0][0][0][0][1][0][0][2][0] 存在，输出 “存在”。

注意事项

• 可选链操作符只能用于访问属性和调用方法，不能用于赋值操作。
• 在使用可选链操作符时，应该仔细考虑哪些层级可能不存在，并将其应用于所有可能为空的层级。
• 过度使用可选链操作符可能会掩盖代码中的潜在问题，因此应该谨慎使用。

总结

可选链操作符是 JavaScript 中处理多维数组空指针错误的有效工具。通过使用可选链操作符，开发者可以安全地访问深层嵌套的数组元素，避免程序崩溃。但是，应该谨慎使用可选链操作符，避免过度使用，并仔细考虑哪些层级可能不存在。