在 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。