#Ts篇：符号`?.` 、`??` 、 `!` 、 `?: `的用法和区别

?.

• 定义 可选属性操作符 例如：obj?.prop。 如果 obj = null || undefined ====> undefined，

interfacePerson{name: string;
  age?: number;}constperson1: Person ={name:'Alice',age:20};constperson2: Person ={name:'Bob'};
console.log(person1.age);// 20
console.log(person2.age);// undefined
console.log(person1.job?.title);// undefined
console.log(person2.job?.title);// undefined

在上面的示例中，
person1.age 和 person2.age 都可能为 undefined，
因为 age 属性是可选的。
而在访问 job.title 属性时，我们使用了可选属性访问操作符

?.

，
如果 person1.job 或 person2.job 为 null 或 undefined，
那么整个表达式的值就是 undefined。
需要注意的是，可选属性访问操作符

?.

只能用于访问属性，不能用于调用方法。

??

• 定义 空值合并操作符
• 作用 这个操作符可以用于判断一个变量是否为 null 或 undefined， 如果是， 则返回一个默认值， 否则返回该变量的值。
• 返回 可以将两个表达式用??连接起来， 例如：a ?? b。 这样， 如果 a 为 null 或 undefined， 那么整个表达式的值就是 b， 否则表达式的值就是 a。 示例：

const a =null;const b =10;const c = a ?? b;
console.log(c);// 10

在上面的示例中，
a 的值为 null，
因此 c 的值为 b，即 10。
需要注意的是，空值合并操作符 ?? 仅判断变量是否为 null 或 undefined，
对于其他假值（例如 0、‘’、false 等），仍然会被视为真值。
如果需要判断其他假值，
可以使用逻辑或操作符 ||：

const a ='';const b ='default';const c = a || b;
console.log(c);// 'default'

在上面的示例中，
由于 a 的值为 ‘’，被视为假值，
因此表达式 a || b 的值为 b，即 ‘default’。

!

• 定义 非空断言操作符
• 作用 这个操作符可以用于断言一个变量 一定 不为 null 或 undefined， 从而避免出现类型错误。

functionprintLength(str?: string){
  console.log(str!.length);// 断言 str 一定不为 null 或 undefined}printLength('hello');// 输出 5printLength();// 抛出 TypeError 异常

在上面的示例中，
printLength 函数接受一个可选的字符串参数 str，
如果 str 不为 null 或 undefined，
则输出其长度，否则会抛出 TypeError 异常。
由于使用了非空断言操作符 !，因此在访问 str.length 时不会出现编译错误。
需要注意的是，
非空断言操作符 ! 可能会隐藏潜在的错误，因此应该谨慎使用。
如果不能确定一个变量或属性是否为 null 或 undefined，
最好使用安全访问操作符 ?. 或 nullish 合并操作符 ?? 来进行判断，从而避免出现运行时异常。

?：

• 定义 条件运算符
• 作用 这个操作符可以用于根据一个条件来返回不同的值。
• 返回

interfacePerson{name: string;   
        age?: number;}letp1: Person ={name:'Tom'};// age是可选属性 let p2: Person = { name: 'Jerry', age: 20 }; // age是可选属性

在上面的示例中，
我们定义了一个 Person 接口，
它有两个属性 name 和 age。
其中 age 属性使用

?: 

定义为可选属性。
在使用时，我们可以不传入 age 属性，
或者传入一个数字类型的 age 属性。