JavaScript中的?.和??的用法

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: '[e-mail]'}};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?? '-'*/