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