ECMAScript 2021 中的 Optional Chaining：从 undefiend 值获取属性值
随着 JavaScript 的发展，ECMAScript 每年都会发布新版本，这些新版本的功能不断增加，使得 JavaScript 更加强大和灵活。在 ECMAScript 2021 中，通过 Optional Chaining 这一新特性，我们可以更加轻松地从 undefiend 值获取属性值。
所谓 Optional Chaining，就是可以在访问一个对象的属性或方法前面添加一个问号（?），如果该属性或方法不存在，那么不会引发程序崩溃，而是返回 undefined。这样，我们就可以轻松地处理可能出现的 undefined 值，避免程序崩溃。下面，我们来看一些示例代码。
// 没有使用 Optional Chaining 的代码 if (person && person.address && person.address.street) { console.log(person.address.street); }
// 使用 Optional Chaining 重写的代码 console.log(person?.address?.street);
在上面的示例代码中，我们定义了一个 person 对象，它有一个 address 属性，并且该属性还有一个 street 属性。如果我们要获取 person.address.street 的值，由于 person 对象可能不存在或者 address 属性可能不存在，我们就需要使用传统的 if 判断语句来保证这种情况下程序不会崩溃。但是，在使用 Optional Chaining 之后，我们可以通过在访问属性前面加上问号的方式来避免程序崩溃。
当然，Optional Chaining 不仅仅可以用于属性访问，也可以用于函数调用。如果一个函数不存在，我们可以使用 Optional Chaining 来避免程序崩溃。
// 没有使用 Optional Chaining 的代码 if (person && person.sayHello) { person.sayHello(); }
// 使用 Optional Chaining 重写的代码 person?.sayHello?.();
在上面的示例代码中，我们定义了一个 person 对象，它有一个 sayHello 方法。如果我们要调用 person.sayHello() 的方法，由于 person 对象可能不存在或者 sayHello 方法可能不存在，我们就需要使用传统的 if 判断语句来保证这种情况下程序不会崩溃。但是，在使用 Optional Chaining 之后，我们可以通过在函数调用前面加上问号的方式来避免程序崩溃。
这里还需要注意的是，Optional Chaining 只能用于 undefined 值的情况，如果我们要处理 null 或者空字符串等情况，就不能使用 Optional Chaining。在这种情况下，我们还需要使用传统的 if 判断语句来避免程序崩溃。
总结
Optional Chaining 是 ECMAScript 2021 中的一个新特性，它可以轻松地从 undefiend 值获取属性值，避免程序崩溃。通过在访问属性或者调用函数前面加上问号的方式，我们可以更加方便地处理可能存在的 undefiend 值。但是，需要注意，Optional Chaining 只适用于 undefiend 值的情况，如果要处理 null 或者空字符串等情况，还需要使用传统的 if 判断语句。
在实际开发中，我们可以结合 Optional Chaining 和 Nullish Coalescing 运算符（??）等新特性来编写更加简洁、灵活和安全的代码。学习和掌握 ECMAScript 2021 中的新特性是我们作为前端开发人员必须要做的事情，我相信这些新特性将帮助我们更好地提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664c1376d3423812e4ae78ae