ES6操作符使用总结

时间:2024-07-15 07:13:57

最近做新项目时候用到了ES6 添加的一些运算符,使用起来很方便,简化了代码,增强了代码容错性。使用感不错,下面做了总结,本文也会持续维护。

1. !!props.useDefaultColor

这个技巧的作用是将任何 JavaScript 值转换为相应的布尔值。当原始值为假值(例如 false、null、undefined、空字符串 ‘’、数字 0、NaN)时,结果为 false;当原始值为真值时,结果为 true。

2. 可选链运算符 ?.

  • 可选链运算符(?.)允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。
  • ?. 运算符的功能类似于 . 链式运算符,不同之处在于,在左侧的对象为空 (null 或者 undefined) 的情况下不会引起错误,返回 undefined
  • 可选链可以帮助我们减少判断有效值的代码,特别是深层嵌套对象下访问某个属性,如果属性不存在,不会引起错误。
  • 另外,可以在使用可选链时设置一个默认值,和下面的Null 判断运算符 ?? 搭配使用:
let useInfo = {
  name: "铁锤妹妹",
  details: { age: 18 }
}
let add = useInfo ?.city ?? '默认值'; // 同等于使用 useInfo ?.city || '默认值'
console.log(add) // '默认值'
  • 链判断运算符?. 有三种写法

1)obj?.prop // 对象属性是否存在
2)obj?.[expr] // 同上
3)func?.(...args) // 函数或对象方法是否存在

使用案例:

const firstName = message?.body?.user?.firstName || 'default';

3. Null 判断运算符 ??

context.$attrs.renderValue ?? '-'
  • 上面代码中,默认值只有在左侧属性值为nullundefined时,才会生效。
  • 可以简化代码并提高可读性,特别是在需要提供默认值的情况下。
  • 上面案例表示如果 context.$attrs.renderValue 不为 null 或 undefined,则返回 context.$attrs.renderValue 的值;否则,返回 '-'。这个表达式的作用是提供一个默认值,以防止 context.$attrs.renderValue 为 null 或 undefined 时引发错误或产生意外结果。
  • 这个运算符的一个目的,就是跟链判断运算符?.配合使用,为nullundefined的值设置默认值。
const animationDuration = response.settings?.animationDuration ?? 300;
  • 上面代码中,如果response.settingsnullundefined,或者response.settings.animationDurationnullundefined,就会返回默认值300。也就是说,这一行代码包括了两级属性的判断。
  • ??本质上是逻辑运算,它与其他两个逻辑运算符 && 和 || 有一个优先级问题,如果多个逻辑运算符一起使用,必须用括号表明优先级,否则会报错。
lhs && middle ?? rhs  // 报错

(lhs && middle) ?? rhs;
lhs && (middle ?? rhs);

使用案例

// 通过计算属性将addReferFee,baseReferFee 值为null或undefined时,默认返回0,然后将两个值进行相加
const totalAmount = computed(()=>{
    const addReferFee = state.baseInfo?.addReferFee ?? 0
    const baseReferFee = state.baseInfo?.baseReferFee ?? 0
    return calulateAdd(addReferFee, baseReferFee )
})
function calulateAdd(num1:Decimal.Value, num2:Decimal.Value){
    return Decimal.add(num1,num2).toNumber()
}

4. ! 是 非空断言操作符

 item!.roleUid === row!.roleUId
  • item!.roleUid:表示从 item 对象中获取 roleUid 属性的值。! 是 TypeScript 中的非空断言操作符,它告诉 TypeScript 编译器,item 对象一定不是 null 或 undefined,可以安全地访问其属性。
  • row!.roleUId:类似地,表示从 row 对象中获取 roleUId 属性的值,同样使用了非空断言操作符。
  • 注意,非空断言操作符 ! 的使用要小心,它会告诉 TypeScript 编译器“我很确定这个值不会是 nullundefined”,因此如果实际上出现了 null 或 undefined 的情况,会导致运行时错误。因此,在使用非空断言操作符时,需要确保对象确实不会为 nullundefined

更详细的请阅读:ES6官方文档 - 运算符的扩展