JavaScript null 的本质指南

摘要: 本教程将讲解 JavaScript null 以及如何有效地处理它。

JavaScript 中的 null 是什么

JavaScript null 是一个原始类型，包含一个特殊的值 null。

JavaScript 使用 null 值来表示故意没有任何对象值。

如果你发现一个变量或一个函数返回了 null，这意味着预期创建的对象无法创建。

以下示例定义了 Circle 类，其构造函数接受一个参数 radius。Circle 类有一个名为 create() 的静态方法，它返回一个带有指定半径的新 Circle 对象。

class Circle {
    constructor(radius) {
        this.radius = radius;
    }
    get area() {
        return Math.PI * Math.pow(this.radius, 2);
    }

    static create(radius) {
        return radius > 0 ? new Circle(radius) : null
;
    }
}Code language: JavaScript (javascript)

这将创建一个半径为 10 的新 Circle 对象

let c = Circle.create(10);
console.log(c.area); // 31.41592653589793Code language: JavaScript (javascript)

但是，以下示例将返回 null，因为 radius 参数没有传递到 create() 方法中

let c2 = Circle.create();
console.log(c2); // nullCode language: JavaScript (javascript)

检查值是否为 null

要检查一个值是否为 null，可以使用严格相等运算符 ===，如下所示

value === nullCode language: JavaScript (javascript)

例如

const rect = null;
const square = {
    dimension: 10
};

console.log(rect === null); // true
console.log(square === null); // falseCode language: JavaScript (javascript)

rect === null 评估为 true，因为 rect 变量被赋值为 null 值。另一方面，square === null 评估为 false，因为它被赋值为一个对象。

要检查一个值是否不为 null，可以使用严格不相等运算符 (!==)

value !== nullCode language: JavaScript (javascript)

JavaScript null 特性

JavaScript null 具有以下特性。

1) null 是假值

除了 false、0、空字符串 ('')、undefined、NaN，null 也是一个假值。这意味着 JavaScript 将在条件语句中将 null 强制转换为 false。例如

const square = null;
if (square) {
    console.log('The square is not null');
} else {
    console.log('The square is null');
}Code language: JavaScript (javascript)

输出

The square is nullCode language: JavaScript (javascript)

在本例中，square 变量为 null，因此 if 语句将其评估为 false 并执行 else 子句中的语句。

2) typeof null 是 object

typeof value 返回值的类型。例如

console.log(typeof 10); // 'number'Code language: JavaScript (javascript)

令人惊讶的是，typeof null 返回 'object'

console.log(typeof null); // 'object'Code language: JavaScript (javascript)

在 JavaScript 中，null 是一个原始值，而不是一个对象。事实证明，这是一个来自第一个版本的 JavaScript 的历史错误，可能永远不会被修复。

一个常见的 JavaScript null 错误

在 JavaScript 中，你通常调用一个函数来获取一个对象。然后你访问该对象的属性。

但是，如果函数返回 null 而不是对象，你将得到一个 TypeError。例如

let classList = document.querySelector('#save').classList;Code language: JavaScript (javascript)

在本例中，我们选择了一个 id 为 save 的元素，并访问了它的 classList 属性。

如果页面中没有 id 为 save 的元素，document.querySelector('#save') 将返回 null。因此，访问 null 值的 className 属性会导致错误

Uncaught TypeError: Cannot read property 'classList' of nullCode language: JavaScript (javascript)

为了避免这种情况，可以使用可选链运算符 (?.)。

object ?. property

可选链运算符在尝试访问 null（或 undefined）值的属性时返回 undefined，而不是抛出错误。

以下示例使用可选链运算符，它返回 undefined 而不是错误

let classList = document.querySelector('#save')?.classList;Code language: JavaScript (javascript)

JavaScript null 与 undefined

null 和 undefined 都是原始值。

undefined 是未初始化变量或对象属性的值。

例如，当你声明一个变量而没有初始化值时，该变量将被评估为 undefined

let counter;
console.log(counter); // undefinedCode language: JavaScript (javascript)

null 表示故意没有对象，而 undefined 表示意外没有值。

换句话说，null 表示缺少对象，而 undefined 表示未初始化变量。

当你使用松散相等运算符 (==) 时，null 和 undefined 是相等的

console.log(null == undefined); // trueCode language: JavaScript (javascript)

严格相等运算符 === 区分 null 和 undefined。例如

console.log(null === undefined); // falseCode language: JavaScript (javascript)

总结

Javascript null 是一个原始类型，它只有一个值 null。
JavaScript 使用 null 值来表示缺少对象。
使用严格相等运算符 (===) 来检查一个值是否为 null。
typeof null 返回 'object'，这是 JavaScript 中的一个历史错误，可能永远不会被修复。
使用可选链运算符 (?.) 来访问可能为 null 的对象的属性。

本教程对您有帮助吗？