JavaScript真假值知多少

JavaScript变量是弱类型并且语言本身不关心一个值如何声明和改变。

let x;

x = 1; // x是一个数字

x = '1'; // x是一个字符串

x = [1]; // x是一个数组

当用`==`比较的时候，似乎不同的值和true都是相等的。因为在比较前JavaScript会把每个值转换成字符串形式：

// all true

1 == '1';

1 == [1];

'1' == [1];

当用`===`(全等)比较的时候，结果都是`false`，因为值的类型被考虑在内：

// all false

1 === '1';

1 === [1];

'1' === [1];

在JavaScript里，会将值设定为六种原始数据类型其中的一种：

· Undefined(没有定义值的变量)

· Null(空值)

· Boolean(true或者false)

· Number(包括Infinity和NaN)

· String(文本数据)

· Symbol(独一无二的值)

其它一切都是对象 - 包括数组

真假值

除了本身类型，每个值都有一个固有的布尔类型，通常被称为真假值，一些规则有点奇怪，所以在比较时理解那些概念和影响有助于调试JavaScript应用程序。

以下的值都是假值：

· false

· 0

· ''或者""

· null

· undefined

· NaN

其它的值都是真值。包括：

· '0'

· 'false'

· []

· {}

· function(){}

因此单个值可用于条件判断等。

if (value) {

// value是真值

} else {

// value是假值

// 可以是false, 0, '', null, undefined或者NaN

}

用==比较

当用`==`运算符比较的时候，意外的情况可能会发生：

规则是：

1. `false`,0和空字符串都是相等的.

2. `null`和`undefined`和他们自己是相等的，和其它值都不等.

3. `NaN`和任何值都不相等.

4. `Infinity`和自己比返回真值，和其它值比返回false.

5. 空数组是一个真值，和true比较返回false,和false比返回true?!

例子：

// 返回true

false == 0;

0 == '';

null == undefined;

[] == false;

!![0] == true;

// 返回false

false == null;

NaN == NaN;

Infinity == true;

[] == true;

[0] == true;

用===比较

当用全等运算符比较的时候，情形很明显，因为值的类型必须匹配：

仅有的一个例外`NaN`和任何值都不相等

建议

通过真假值判断可以了解最有经验的开发人员。新手或者从其它语言转过来的开发者会碰到一些问题！幸运的是，在处理真假值变量的时候有一些简单的步骤可以捕获最难发现的错误。

1. 避免直接比较

当一个值和true或者false相等的时候，比较两个真假值不是必须的。

// 不这样使用

if (x == false) // ...

// 如果x是false, 0, '',或者[]执行

// 这样写

if (!x) // ...

// 如果x是false, 0, '', NaN, null or undefined执行

2. 使用`===`运算符

使用全等运算符比较两个值，避免类型转换问题：

// 不这样写

if (x == y) // ...

// 如果x和y都是真值或者都是假值，执行

// 例如: x = null y = undefined

// 这样写

if (x === y) // ...

// 如果x和y完全相同，执行

// 除非他们都为NaN

3. 必要时转换为真正的布尔值

使用双重否定(false, 0, "", null, undefined和NaN会被转换为false)，任何一个值都可以被转换成一个真正的布尔值。

// 不这样写

if (x === y) // ...

// 如果x和y完全相同，执行

// 除了两个值都是NaN

// 这样写

if (!!x === !!y) // ...

// 如果x和y完全相同执行

// 包括有一个NaN或者都是NaN

结论

真假值允许你写出简单的JavaScript条件判断和三元运算。然而，我们总是得考虑这些边界情况。一个空数组或者一个NaN变量都会导致很长时间的调试！

小手一抖，资料全有。长按二维码关注京程一灯，阅读更多技术文章和业界动态。