?.的用法

 使用场景:

undefined和null是两个比较特殊的数据类型,是不能用点操作符去访问属性的,否则将会报错。

  • 空值合并操作符??

使用 ?? 时用于提供默认值,只有当左侧表达式的结果为 null 或 undefined 时,才会返回右侧表达式的值。

// ??
    console.log(undefined ?? 2);  // 2
    console.log(null ?? 2);   // 2
    console.log(0 ?? 2);  // 0
    console.log("" ?? 2);   // ''
    console.log(true ?? 2);  // true
    console.log(false ?? 2);   // false
 
  • 空值合并赋值操作符??=

用于在左侧操作数为 null 或 undefined 时,将右侧表达式的值赋给左侧操作数。 

  • 可选链操作符 ?. 

?. 允许读取连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。

?. 操作符的功能类似于. 链操作符,不同之处在于,在引用为空,即 null 或者 undefined 的情况时不会抛出异常,而是返回 undefined。

这个符号表示对象后面的属性可以是null或undefined。

来访问对象的属性和调用对象的方法。

  • 非空类型断言!. 

 !.  这是TypeScript的语法

!.  非空类型断言,表示确定某个标识符是有值的

这个符号表示对象后面的属性一定不是null或undefined。

  • 强制类型转换!!

用于将一个值转换为对应的布尔值(强制类型转换)

  • 逻辑非运算符!

逻辑非运算符,用于取反一个布尔值或将一个值转换为布尔类型并取反。

  • 或运算||

使用 || 时,A会先转化为布尔值判断,为true时返回A , false 返回B

// ||
    console.log(undefined || 2);   // 2
    console.log(null || 2);     // 2
    console.log(0 || 2);        // 2
    console.log("" || 2);     // 2
    console.log(true || 2);     // true
    console.log(false || 2);      // 2

3、 

`?.` 是 JavaScript(以及 TypeScript)中的 **可选链操作符**(Optional Chaining),它是 ES2020 引入的一个语法特性。 ### 功能说明: `?.` 的作用是:**在访问对象的嵌套属性时,如果某个中间属性不存在(即为 `null` 或 `undefined`),则整个表达式不会抛出错误,而是返回 `undefined`。** 这在处理深层嵌套的对象结构时非常有用,可以避免因为访问未定义的属性而导致运行时错误。 --- ### 示例说明: 你提到的代码: ```javascript this.supportFeatures = res?.support_feature; ``` #### 含义: - 如果 `res` 是 `null` 或 `undefined`,那么 `res?.support_feature` 会返回 `undefined`,而不会报错。 - 如果 `res` 存在,则正常读取 `res.support_feature` 的值。 #### 对比传统写法: 没有使用 `?.` 之前,我们可能需要这样写来避免错误: ```javascript this.supportFeatures = res && res.support_feature; ``` 或者更安全地: ```javascript if (res && res.support_feature) { this.supportFeatures = res.support_feature; } ``` 使用 `?.` 后,我们可以更简洁地实现相同效果: ```javascript this.supportFeatures = res?.support_feature; ``` --- ### 更多用法示例: 1. **访问嵌套属性:** ```javascript const user = { name: "Alice", address: { city: "Beijing" } }; console.log(user?.address?.city); // 输出: Beijing console.log(user?.phone?.number); // 输出: undefined,不会报错 ``` 2. **调用可能不存在的方法:** ```javascript const obj = { maybeFunc: null }; obj.maybeFunc?.(); // 不会报错,直接返回 undefined ``` 3. **数组索引访问:** ```javascript const arr = [1, 2]; console.log(arr[3]?.toString()); // 不会报错,arr[3] 是 undefined,所以返回 undefined ``` --- ### 兼容性 - `?.` 支持现代浏览器和 Node.js 环境(Node.js 14+)。 - 如果你需要支持老旧环境(如 IE),可以通过 Babel 等工具进行转译。 --- ### 小结 | 写法 | 行为 | |------|------| | `obj?.prop` | 如果 `obj` 存在,则返回 `obj.prop`;否则返回 `undefined` | | `obj?.[expr]` | 安全地访问动态属性名 | | `obj?.method?.()` | 安全地调用方法 | --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值