26.【TypeScript 教程】Truthy 与 Falsy

简介: 26.【TypeScript 教程】Truthy 与 Falsy

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 = 'mybj'
 
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 = 'mybj'
 
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 源码中有很多 !!! 的操作,如果遇到要能明白其表达的意思。

相关文章
|
3月前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
3月前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
3月前
|
JavaScript 前端开发 安全
TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第9天】TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
5月前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
3月前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
67 0
|
3月前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
46 0
|
5月前
|
资源调度 JavaScript 前端开发
TypeScript实战教程(一):表单上传与后端处理
本文是TypeScript实战教程的第一部分,介绍了使用TypeScript进行表单上传和后端处理的完整流程,包括环境配置、前端表单创建、使用TypeScript和Express框架搭建服务端、处理表单数据,并提供了详细的代码示例和运行测试方法。
TypeScript实战教程(一):表单上传与后端处理
|
7月前
|
JavaScript Java API
30.【TypeScript 教程】Reflect Metadata
30.【TypeScript 教程】Reflect Metadata
149 4
|
7月前
|
JavaScript 编译器
31.【TypeScript 教程】混入(Mixins)
31.【TypeScript 教程】混入(Mixins)
51 3
|
7月前
|
JavaScript
28.【TypeScript 教程】生成器(Generator)
28.【TypeScript 教程】生成器(Generator)
94 3