js的三个安全运算符

1.可选链操作符 (?.)

        使用场景： 当我们 不确定 一个对象是否存在时，调用对象属性，可以使用该操作符。

const role= {
  name: 'king',
  cat: {
    name: 'lower',
  },
};

const dogName = role.dog?.name; // 可以简单理解为 role.dog ? role.dog.name : undefined
console.log(dogName); // undefined

在Vue中进行使用的场景，这样当cardId这个属性不存在时，代码也不会报错。如果不使用可选链操作符 (?.) ，代码就无法运行，会报无法找到cardId这个属性值，提醒我们没有对该变量进行初始化操作。

<template>
	<div>
		<span>
			<!-- 使用场景： 当我们 不确定 一个对象是否存在时，调用对象属性，可以使用该操作符  -->
			{{user.info?.cardId}}
		</span>
	</div>
</template>

2.空值合并操作符（??）

使用场景： 当需要把 0 或 '' 作为 真 时，使用 ?? ，否则使用 ||

空值合并运算符（??）是一个逻辑运算符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

const str = null ?? 'default';
console.log(str); // "default"
// 有点类似与 ||（逻辑或），与逻辑或的区别在于 ?? 操作符对 0 和 '' 会判断为真。

?? 和 || 的区别，代码实例如下

const res= 0 ?? 42;
console.log(res); // 0。因为 0 在 ?? 中被判断为 真
----
const res= 0 || 42;
console.log(res); // 42。因为 0 在 || 中被判断为 假
----
const res = '' ?? 66;
console.log(res); // 输出空字符串。 因为''在??中被判断为 真

3.逻辑空赋值（??=）

逻辑空赋值运算符（x ??= y）仅在 x 是空值（null 或 undefined）时对其赋值。 

const res = { num: 99};

res.num ??= 10; // res.num 存在，所以 不赋值
console.log(res.num); //  99

res.example ??= 20; // res.example 不存在，所以 赋值
console.log(res.example); // 20

这个在某些场景下非常有用，比如 为定时器赋值时：

let time = null

function start () {
  // if (!time) {
  //   time = setInterval(() => { ... })
  // }

  time ??= setInterval(() => { ... })
}

据了解在TypeScript中也有一个类似的安全语法，TypeScript语言比JavaScript语言安全很多就是多了很多类型检查机制。JavaScript是弱类型语言，在某些场景下会出现安全问题。

        下面是一个TypeScript的安全语法，该语法可以让password这个变量即可存在也可以不存在。pasword如果存在就是string类型的变量，password不存在代码也不会报错。

password?: string,