TypeScript Truthy 与 Falsy
除了明确的 true 和 false 两个 boolean 类型外,JavaScript 可以在需要用到布尔类型值的上下文中使用强制类型转换将值转换为布尔值。
1. 慕课解释
Truthy 指的是转换后的值为’真‘的值,Falsy 是在 Boolean 上下文中已认定可转换为‘假‘的值。
变量类型 | Truthy | Falsy |
---|---|---|
boolean | true | false |
string | 非空字符串 | ‘’ |
number | 其他数字 | 0 / NaN |
null | 总是为假 | |
undefined | 总是为假 | |
object | 总是为真,包括 {}、[]、() => {} |
需要注意下,空函数、空数组、空对象这些都是 Truthy,返回 true。
2. ! 与 !!
操作符 !
表示取反,得到一个布尔值:
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
解释: 前三行的变量都是 truthy,为真,取反则得到 false。
操作符 !!
表示变量被强制类型转换为布尔值后的值:
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. 小结
在 Vue.js 源码中有很多 !
和 !!
的操作,如果遇到要能明白其表达的意思。