JavaScript 可选链操作符

<div class="main">
  <h1></h1>
  <p></p>
  <p></p>
  <div class="article">
    <h2>什么是可选链操作符？</h2>
    <p>可选链操作符（?.）是一种新的 JavaScript 操作符，允许您在不显式检查对象链中的引用是否为 null 或 undefined 的情况下访问对象属性。这使得代码更加简洁且易于维护。</p>
    <p>例如，以下代码使用可选链操作符来访问对象 user 的 name 属性：</p>
    <pre><code>const name = user?.name;
</code></pre>
    <p>如果 user 为 null 或 undefined，name 将被赋值为 undefined，而不会抛出错误。</p>
    <h2>可选链操作符的优点</h2>
    <p>可选链操作符具有以下优点：</p>
    <ul>
      <li>代码更加简洁</li>
      <li>代码更易于维护</li>
      <li>减少错误的可能性</li>
    </ul>
    <h2>可选链操作符的局限性</h2>
    <p>可选链操作符也存在一些局限性：</p>
    <ul>
      <li>不支持旧版本的 JavaScript</li>
      <li>不支持嵌套的对象链</li>
    </ul>
    <h2>如何使用可选链操作符</h2>
    <p>要使用可选链操作符，只需在要访问的属性前面加上 ?. 操作符即可。例如，以下代码使用可选链操作符来访问对象 user 的 name 属性：</p>
    <pre><code>const name = user?.name;
</code></pre>
    <p>如果 user 为 null 或 undefined，name 将被赋值为 undefined，而不会抛出错误。</p>
    <p>您还可以将可选链操作符与其他 JavaScript 操作符结合使用。例如，以下代码使用可选链操作符来访问对象 user 的 name 属性，并将其转换为大写：</p>
    <pre><code>const name = user?.name?.toUpperCase();
</code></pre>
    <p>如果 user 为 null 或 undefined，name 将被赋值为 undefined，而不会抛出错误。</p>
    <h2>结论</h2>
    <p>可选链操作符是一种新的 JavaScript 操作符，允许您在不显式检查对象链中的引用是否为 null 或 undefined 的情况下访问对象属性。这使得代码更加简洁且易于维护。</p>
  </div>
</div>