TypeScript Truthy 與 Falsy

除了明確的 true 和 false 兩個(gè) boolean 類(lèi)型外，JavaScript 可以在需要用到布爾類(lèi)型值的上下文中使用強(qiáng)制類(lèi)型轉(zhuǎn)換將值轉(zhuǎn)換為布爾值。

1. 慕課解釋

Truthy 指的是轉(zhuǎn)換后的值為’真‘的值，F(xiàn)alsy 是在 Boolean 上下文中已認(rèn)定可轉(zhuǎn)換為‘假‘的值。

需要注意下，空函數(shù)、空數(shù)組、空對(duì)象這些都是 Truthy，返回 true。

2. ! 與 !!

操作符 ! 表示取反，得到一個(gè)布爾值：

let fn = () => {}
let obj = {}
let arr: never[] = []

console.log(!fn)  // false
console.log(!obj) // false
console.log(!arr) // false

let num = 10
let str = 'imooc'

console.log(!num) // false
console.log(!str) // false

let n = null
let u = undefined
let N = NaN
let z = 0

console.log(!n)   // true
console.log(!u)   // true
console.log(!N)   // true
console.log(!z)   // true

解釋?zhuān)?/strong> 前三行的變量都是 truthy，為真，取反則得到 false。

操作符 !! 表示變量被強(qiáng)制類(lèi)型轉(zhuǎn)換為布爾值后的值：

let fn = () => {}
let obj = {}
let arr: never[] = []

console.log(!!fn)  // true
console.log(!!obj) // true
console.log(!!arr) // true

let num = 10
let str = 'imooc'

console.log(!!num) // true
console.log(!!str) // true

let n = null
let u = undefined
let N = NaN
let z = 0

console.log(!!n)   // false
console.log(!!u)   // false
console.log(!!N)   // false
console.log(!!z)   // false

3. 小結(jié)

在 Vue.js 源碼中有很多 ! 和 !! 的操作，如果遇到要能明白其表達(dá)的意思。