0%

JavaScript中布尔值为false的几种情况

发表于 更新于 分类于
本文字数： 3k 阅读时长 ≈ 3 分钟

前端开发经常需要用到if判断，下文归纳JavaScript中布尔值为false的几种情况，便于今后开发使用。

1 一共六种情况

  1. undefined：未定义
  2. null：空值
  3. false：布尔值false，注意字符串'false'为true
  4. 0：数字0，注意字符串'0'为true
  5. NaN：非数值，例如Math.log(-1)，注意typeof NaN为number
  6. ""或''：空字符串，注意空格字符串' '为true

2 不同数据类型转换为false的情况

数据类型 转换为true 转换为false
Boolean true false
String 任何非空字符串 ''（空字符串）
Number 任何非零数值（包括Infinity，如1/0） 0和NaN
Object 任何对象（包括空数组[]、空对象{}） null
Undefined / undefined

说明：

  1. 使用取反运算符!和!!可将任何数据类型转换为布尔值，!!为本身代表的布尔值，!为相反布尔值。

    例如1-2为-1，!(1-2)为false，!!(1-2)为true。

  2. 以下是一些数据的求布尔值结果：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    console.log(false);	// false
    console.log(!!0);	// false
    console.log(!!'');	// false
    console.log(!!null);	// false
    console.log(!!undefined);	// false
    console.log(!!NaN);	// false
    console.log(!!Infinity);	// true
    console.log(!!{});	// true
    console.log(!![]);	//true

3 对空数组和空对象做判断

有时候需要对某个数组或对象做判断，判断其是否为空，可以通过如下方式：

  1. 使用length属性，适用于数组，如：

    1
    2
    3
    4
    let array1 = [];
    let array2 = [1, 2];
    if (array1.length) console.log('array1 not empty');
    if (array2.length) console.log('array2 not empty');	// array2 not empty

  2. 使用for-in遍历和hasOwnProperty判断，并把遍历结果写成函数，适用于数组和对象，如：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    let array1 = [];
    let array2 = [1, 2];
    let obj1 = {};
    let obj2 = {x: 1, y: 2};
    function isEmpty(obj) {
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          return false;
        }
      }
      return true;
    }
    if (isEmpty(array1)) console.log('array1 is empty');	// array1 is empty
    if (isEmpty(array2)) console.log('array2 is empty');
    if (isEmpty(obj1)) console.log('obj1 is empty');	// obj1 is empty
    if (isEmpty(obj2)) console.log('obj2 is empty');

4 出现undefined的几种情况

  1. 变量未定义，注意这种情况现在会报错

    1
    console.log(a);	// ReferenceError: a is not defined

  2. 变量定义后未赋值

    1
    2
    let x;
    console.log(x);	// undefined

  3. 函数形参未传值

    1
    2
    3
    4
    5
    6
    7
    function fun(x, y) {
      console.log('x = ' + x);
      console.log('y = ' + y);
    }
    fun(1);
    // x = 1
    // y = undefined

  4. 函数未return

    1
    2
    function fun() {}
    console.log(fun());	// undefined

  5. 函数return没有值

    1
    2
    3
    4
    function fun() {
      return;
    }
    console.log(fun());	// undefined

  6. 对象的属性或方法不存在

    1
    2
    let obj = {x: 1, y: 2};
    console.log(obj.z);	// undefined

  7. 数组下标越界

    1
    2
    3
    4
    let array = [1, 2, 3];
    console.log(array[5]);	// undefined
    console.log(array[1.5]);	// undefined
    console.log(array[-1]);	// undefined

  8. 数组find方法未找到元素

    1
    2
    let array = [{id: 1, name: 'a'}, {id: 2, name: 'b'}];
    console.log(array.find(item => item.id === 3));	// undefined

5 出现null的几种情况

  1. 获取DOM元素时未获取到指定元素对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Title</title>
    </head>
    <body>
    </body>
    <script>
      let element = document.getElementById('x');
      console.log(element);	// null
    </script>
    </html>

  2. 原型链的顶点，即Object.prototype.__proto__

    1
    console.log(Object.prototype.__proto__);	// null

  3. 正则捕获时未捕获到结果，包括：正则对象的exec方法未匹配、字符串的match方法未匹配。

    1
    2
    3
    4
    5
    6
    7
    const string = "xyz123ABC2";
    const re1 = /[a-zA-Z]+(\d)/g;
    const re2 = /[a-c]+/g;
    console.log(re1.exec(string));	// [ 'xyz1', '1', index: 0, input: 'xyz123ABC2', groups: undefined ]
    console.log(re2.exec(string));	// null
    console.log(string.match(re1));	// [ 'xyz1', 'ABC2' ]
    console.log(string.match(re2));	// null