js的问号(?)操作符的使用总结

在 JavaScript 中，? 操作符有几种不同的用法，每种用法都有其特定的功能。以下是对这些用法的总结：

1. 可选链操作符（Optional Chaining Operator）

可选链操作符（?.）用于安全地访问对象的嵌套属性或方法。如果某个属性不存在，它会短路并返回 undefined，而不会抛出错误。

语法

obj?.property
obj?.[expression]
obj?.method()

示例

const user = {
  name: 'Alice',
  address: {
    city: 'Wonderland'
  }
};

console.log(user?.address?.city); // 输出: 'Wonderland'
console.log(user?.contact?.phone); // 输出: undefined

2. 三元操作符（Ternary Operator）

三元操作符（? :）是一种简洁的条件运算符，用于根据条件表达式的结果返回不同的值。

语法

condition ? expr1 : expr2

示例

const age = 18;
const canVote = age >= 18 ? 'Yes' : 'No';
console.log(canVote); // 输出: 'Yes'

3. 可选参数（Optional Parameters）

在函数参数中使用 ? 表示该参数是可选的。如果不传递该参数，参数值将是 undefined。这种用法主要在 TypeScript 中使用，但在 JavaScript 中也可以通过检查参数是否为 undefined 来实现类似的效果。

语法（TypeScript）

function myFunction(param?: string) {
  // ...
}

示例（JavaScript）

function greet(name) {
  if (name) {
    console.log(`Hello, ${name}!`);
  } else {
    console.log('Hello!');
  }
}

greet('Alice'); // 输出: 'Hello, Alice!'
greet(); // 输出: 'Hello!'

4. 可选属性（Optional Properties）

在对象属性中使用 ? 表示该属性是可选的。这种用法主要在 TypeScript 中使用，但在 JavaScript 中也可以通过检查属性是否存在来实现类似的效果。

语法（TypeScript）

interface User {
  name: string;
  age?: number;
}

示例（JavaScript）

const user1 = { name: 'Alice' };
const user2 = { name: 'Bob', age: 30 };

console.log(user1.age); // 输出: undefined
console.log(user2.age); // 输出: 30

总结

• 可选链操作符（?.）：用于安全地访问嵌套属性或方法，避免 null 或 undefined 引发的错误。
• 三元操作符（? :）：用于简洁的条件表达式，根据条件返回不同的值。
• 可选参数（param?）：在 TypeScript 中用于定义函数的可选参数，使参数可以是 undefined。
• 可选属性（property?）：在 TypeScript 中用于定义接口或类型中的可选属性，使属性可以是 undefined。

理解和正确使用这些操作符可以帮助你编写更健壮和简洁的代码。