ECMAScript 2021：了解 null 和 undefined 的区别及使用方法

在 JavaScript 中，null 和 undefined 都表示没有值，但它们之间存在一些区别。在本文中，我们将深入探讨 null 和 undefined 的区别，并介绍它们的使用方法。

null 和 undefined 的区别

undefined

undefined 表示一个变量已经被声明但未被初始化，或一个对象属性不存在。例如：

let foo;
console.log(foo); // undefined

const obj = {};
console.log(obj.bar); // undefined

另一个常见的 undefined 的情况是函数的参数未被传递：

function foo(param) {
  console.log(param); // undefined
}
foo();

null

null 表示一个变量被初始化为一个空值，或意味着一个对象不包含任何值。例如：

let foo = null;
console.log(foo); // null

const obj = { bar: null };
console.log(obj.bar); // null

使用 null 还可以表示一个变量不允许有默认值。

如何使用

在许多情况下，使用 null 和 undefined 都是非常方便的。然而，在一些情况下，它们之间的区别可能会导致问题。

显式地检查 null 和 undefined

在某些情况下，您需要显式地检查一个变量是否为 null 或 undefined。例如，这通常在处理表单输入时很有用：

function handleFormInput(input) {
  if (input === null || input === undefined) {
    console.log("Input empty");
  } else {
    // process input
  }
}

使用默认值

有时候，您需要为变量设置默认值。如果您允许使用 null，您可以使用 null 作为默认值：

function foo(value = null) {
  console.log(value);
}

如果您不允许使用 null，您可以使用 undefined 作为默认值：

function foo(value = undefined) {
  console.log(value);
}

避免错误

在某些情况下，undefined 和 null 可能会导致错误，例如当您尝试访问一个不存在的属性时：

const obj = {};
console.log(obj.nonexistent); // undefined
console.log(obj.nonexistent.foo.bar); // TypeError: Cannot read property 'foo' of undefined

要避免这种情况，您可以使用短路运算符（&&）检查属性是否存在：

const obj = {};
console.log(obj.nonexistent && obj.nonexistent.foo && obj.nonexistent.foo.bar); // null

这将您在属性不存在时返回 null 而不是抛出 TypeError。

结论

在 JavaScript 中，null 和 undefined 都表示没有值，但它们之间有一些区别。了解这些区别并知道如何正确使用它们可以帮助您编写更强大和安全的代码。记住，在许多情况下，使用 null 和 undefined 都是非常方便的，但在某些情况下需要显式地检查它们。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670d02355f551281025c3333