常用的可选链语法

可选链语法是一种 JavaScript 中的语法，用于方便地访问可能不存在的属性或方法，避免了出现 TypeError 的情况。以下是常用的可选链语法：

1. ?.：在对象属性或方法后面加上问号，表示如果该属性或方法存在，才会执行后面的操作，否则返回 undefined。

例如：

const user = {
  name: 'Alice',
  address: {
    city: 'Shanghai',
    street: 'Nanjing Rd'
  }
};

console.log(user?.address?.city); // 输出 'Shanghai'
console.log(user?.address?.zipcode); // 输出 undefined

2. ??：用于判断一个变量是否为 null 或 undefined，如果是则返回一个默认值。

例如：

const name = null;
console.log(name ?? 'Unknown'); // 输出 'Unknown'

const age = 18;
console.log(age ?? 'Unknown'); // 输出 18

3. ?.[]：用于访问数组中的元素，如果数组不存在或者数组越界，则返回 undefined。

例如：

const arr = [1, 2, 3];
console.log(arr?.[0]); // 输出 1
console.log(arr?.[3]); // 输出 undefined

相关问题

js 可选链操作符

JavaScript 的可选链操作符（Optional Chaining Operator）是一种新的语言特性，它可以让我们在访问对象的属性或方法时，不必担心访问的对象是否为 null 或 undefined。这个操作符是一个问号（?）和一个点号（.）组成的。它的语法形式如下：

obj?.prop           // 访问 obj.prop，如果 obj 为 null 或 undefined，则返回 undefined
obj?.[expr]         // 访问 obj[expr]，如果 obj 为 null 或 undefined，则返回 undefined
arr?.[index]        // 访问 arr[index]，如果 arr 为 null 或 undefined，则返回 undefined
func?.(args)        // 调用 func(args)，如果 func 为 null 或 undefined，则返回 undefined

下面是一个例子：

const user = {
  name: 'Alice',
  address: {
    city: 'Shanghai',
    street: 'Nanjing Road'
  }
};

console.log(user?.address?.city);   // 'Shanghai'

const user2 = null;

console.log(user2?.address?.city);  // undefined

在上面的例子中，我们使用可选链操作符来访问 user 对象的 address 对象的 city 属性。即使 user 对象为 null 或 undefined，也不会抛出异常，而是返回 undefined。

需要注意的是，可选链操作符是 ES2020（也称为 ES11）引入的新特性，因此在一些老的浏览器和 Node.js 版本中可能不支持。如果要使用可选链操作符，需要确保你的运行环境支持它。

vue v-for 可选链

Vue 3中新增了可选链语法，可以在v-for指令中使用可选链语法，以便在遇到undefined或null时不会抛出错误。可选链语法使用问号（?）来表示，例如：v-for="item in items?.subItems"。这样，如果items为undefined或null，就不会遍历subItems，也不会抛出错误。

另外，可选链语法还可以在模板中的其他地方使用，例如：{{ obj?.prop }}。这样，如果obj为undefined或null，就不会抛出错误，而是显示为空。