在 ES12 中，如何使用 Optional Chaining 避免 null 或 undefined 成员引用错误？-FunTeaLearn Online Web Tutorials

在 ES12 中，Optional Chaining 技术是一项非常实用的功能，它可以通过避免 null 或 undefined 成员引用错误来提高代码的健壮性和可靠性。在本文中，我们将深入研究 Optional Chaining 技术的基本原理和实际应用，为前端开发人员提供全面的指导。

Optional Chaining 的基本原理

在传统的 JavaScript 语言中，如果我们需要访问一个对象或数组的成员，通常都需要使用点号或方括号来引用。例如：

const obj = { foo: { bar: { baz: 42 } } };
const baz = obj.foo.bar.baz;
console.log(baz); // 输出 42

在这个例子中，我们通过点号来访问 obj 对象的成员。但如果在这个链式引用中有一个成员是 null 或 undefined，那么就会出现引用错误：

const obj = { foo: { bar: { baz: 42 } } };
const baz = obj.foo.qux.baz; // TypeError: Cannot read property 'baz' of undefined
console.log(baz);

这种错误非常常见，尤其是在对象深层嵌套的情况下。为了避免这种错误，ES12 引入了 Optional Chaining 技术，它允许我们在访问成员的时候添加问号（?）来判断该成员是否存在。例如：

const obj = { foo: { bar: { baz: 42 } } };
const baz = obj.foo.qux?.baz;
console.log(baz); // 输出 undefined，而不是抛出错误

在这个例子中，我们使用了 ?. 运算符来访问 obj.foo.qux.baz 成员，但由于 obj.foo.qux 不存在，所以返回的值是 undefined，而不是抛出错误。这可以显著降低代码的出错率，提高代码的可靠性和健壮性。

Optional Chaining 的实际应用

除了避免 null 或 undefined 成员引用错误，Optional Chaining 技术还可以用于一些实际的场景中，例如：

访问 DOM 元素的属性或方法

在传统的 JavaScript 中，我们通常会使用 getElementById 和 querySelector 等方法来访问 DOM 元素。但如果我们需要访问的元素不存在，就会出现引用错误。例如：

const div = document.getElementById('myDiv');
const text = div.innerText;
console.log(text); // TypeError: Cannot read property 'innerText' of null

为了避免这种错误，我们可以使用 Optional Chaining 技术来访问 DOM 元素的属性或方法：

const div = document.getElementById('myDiv');
const text = div?.innerText;
console.log(text); // 输出 undefined，而不是抛出错误

在这个例子中，如果 div 元素不存在，返回的值将是 undefined，而不是抛出错误。这可以有效地提高代码的健壮性和可靠性。

处理深层嵌套的 JSON 数据

在处理复杂的 JSON 数据时，经常需要访问深层嵌套的成员。但由于不同版本的 JSON 数据结构不同，有时会出现某些成员不存在的情况。例如：

const data = { foo: { bar: [{ baz: 1 }, { baz: 2 }] } };
const baz = data?.foo?.bar?.[2]?.baz;
console.log(baz); // 输出 undefined，而不是抛出错误

在这个例子中，我们使用 Optional Chaining 技术来访问 data.foo.bar[2].baz 成员。由于 data.foo.bar[2] 不存在，返回的值是 undefined，而不是抛出错误。这可以使我们更加轻松地处理复杂的 JSON 数据，提高代码的可维护性和可读性。

处理动态生成的数据

在一些前端应用中，数据通常是动态生成的。这意味着某些成员可能不存在，而访问这些成员时可能会出现错误。例如：

const data = { foo: 'bar' };
const key = 'baz';
const value = data[key]; // TypeError: Cannot read property 'baz' of undefined
console.log(value);

在这个例子中，我们尝试访问 data.baz 成员，但由于该成员不存在，导致出现错误。为了避免这种错误，我们可以使用 Optional Chaining 技术来访问动态生成的成员：

const data = { foo: 'bar' };
const key = 'baz';
const value = data?.[key];
console.log(value); // 输出 undefined，而不是抛出错误

在这个例子中，如果 data[key] 不存在，返回的值将是 undefined，而不是抛出错误。

示例代码

最后，我们提供一些使用 Optional Chaining 技术的示例代码，供大家参考：

// www.javascriptcn.com code example
// 检查对象属性是否存在
const obj = { foo: { bar: { baz: 42 } } };
const exists = obj?.foo?.bar?.baz !== undefined;

// 访问数组元素是否存在
const arr = [1, 2, 3];
const value = arr?.[5];

// 检查函数是否存在并调用
const fn = obj?.foo?.bar?.baz?.();
const result = fn?.();

// 访问动态生成的属性
const data = { foo: 'bar' };
const key = 'baz';
const value = data?.[key];

以上是一些基本的使用 Optional Chaining 技术的示例代码，希望有助于大家更好地理解该技术的优势和应用。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d739d3a941bf7134d121a0

在 ES12 中，如何使用 Optional Chaining 避免 null 或 undefined 成员引用错误？

程序员教程

程序员面试题库