最近做新項目時候用到了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 ?? 0const baseReferFee = state.baseInfo?.baseReferFee ?? 0return 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官方文檔 - 運算符的擴展