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 ?? '-'
  • 上面代码中，默认值只有在左侧属性值为null或undefined时，才会生效。
  • 可以简化代码并提高可读性，特别是在需要提供默认值的情况下。
  • 上面案例表示如果 context.$attrs.renderValue 不为 null 或 undefined，则返回 context.$attrs.renderValue 的值；否则，返回 '-'。这个表达式的作用是提供一个默认值，以防止 context.$attrs.renderValue 为 null 或 undefined 时引发错误或产生意外结果。
  • 这个运算符的一个目的，就是跟链判断运算符?.配合使用，为null或undefined的值设置默认值。
const animationDuration = response.settings?.animationDuration ?? 300;
  • 上面代码中，如果response.settings是null或undefined，或者response.settings.animationDuration是null或undefined，就会返回默认值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 编译器“我很确定这个值不会是 null 或 undefined”，因此如果实际上出现了 null 或 undefined 的情况，会导致运行时错误。因此，在使用非空断言操作符时，需要确保对象确实不会为 null 或 undefined。

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

相关文章