1、?.(可选链运算符)
在JavaScript中,"?.“是一种叫做"Optional Chaining”(可选链)的新操作符。它允许我们在访问一个可能为null或undefined的属性或调用一个可能不存在的方法时,避免出现错误。
使用?.操作符可以安全地访问对象的属性和方法,而不会发生错误并导致程序停止执行。当对象的属性或方法不存在时,表达式返回undefined,而不是抛出TypeError异常。
1.1 访问对象属性
const person = {
name: 'John',
address: {
city: 'New York'
}
};
console.log(person.address?.city); // 输出:'New York'
// 输出:undefined,因为person对象没有age属性
console.log(person.age?.toString());
1.2 调用对象方法
const calculator = {
add: function(a, b) {
return a + b;
}
};
console.log(calculator.add?.(2, 3)); // 输出:5
// 输出:undefined,因为calculator对象没有subtract方法
console.log(calculator.subtract?.(5, 2));
1.3 链式使用?.
const user = {
profile: {
name: 'Alice',
email: 'alice@example.com'
}
};
console.log(user?.profile?.name); // 输出:'Alice'
// 输出:undefined,因为user对象没有address属性
console.log(user?.address?.city);
注意事项:
- 使用?.操作符时,如果目标属性或方法存在且可调用,它们将按照正常方式执行。
- 如果目标为null或undefined,则表达式将立即返回undefined,不会继续尝试访问后续的属性或方法。
- 操作符不能与[](方括号)一起使用。例如:obj?.[index] 是无效的语法。
2、??(空值合并运算符)
在JavaScript中,"??"是空值合并运算符的用法。它用于判断一个表达式是否为null或undefined,并返回一个默认值。
const name = null;
/*
使用??运算符来判断name的值是否为空,如果为空,则赋予默认值"Unknown"
*/
const displayName = name ?? "Unknown";
console.log(displayName); // 输出: Unknown
/*
经常在表格或者数据渲染时可以用到,当表格数据为空时,直接显示 -
const data = null?? '-'
*/