ECMAScript 2021：null 和 undefined 的区别及其在判断中的使用注意-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，null 和 undefined 是两个特殊的数据类型，它们都表示某个值的缺失或不存在。虽然它们看起来很相似，但是在实际应用中它们有着不同的用途和含义。本文将介绍 null 和 undefined 的区别，并指导如何在判断中正确使用它们。

null 和 undefined 的定义和区别

null

null 表示一个值被明确地定义为空，即它不包含任何值或对象引用。在程序中，我们可以将某个变量或属性的值设置为 null，以表明它现在不包含任何有价值的信息。null 是一个关键字，表示空指针或空对象指针。

let x = null;
console.log(x); // 输出：null

undefined

undefined 表示一个变量存在，但尚未被初始化。在使用一个没有赋值的变量时，其值为 undefined。undefined 是一个全局变量，表示缺少值。

let x;
console.log(x); // 输出：undefined

null 和 undefined 的值相等但类型不同：

console.log(null == undefined); // 输出：true
console.log(null === undefined); // 输出：false

null 和 undefined 在判断中的使用

在编写 JavaScript 代码时，我们常常需要判断某个值是否为 null 或 undefined，以此来进行相应处理。在这种场景下，null 和 undefined 往往被混淆使用，这导致程序的语义和效率都受到一定的影响。下面我们将详细介绍如何正确地使用 null 和 undefined。

判断变量是否为 null 或 undefined

在判断一个变量是否为 null 或 undefined 时，我们可以使用全等操作符（===）：

let x = null;
let y;
console.log(x === null); // 输出：true
console.log(y === undefined); // 输出：true

另一种常见的方式是使用 typeof 运算符：

let x = null;
let y;
console.log(typeof x === 'object'); // 输出：true
console.log(typeof y === 'undefined'); // 输出：true

需要注意的是，typeof null 的结果是 'object'。这是一个历史遗留问题，在 ECMAScript 2021 中并没有修正，如果需要判断一个值是否为 null，应该使用 === 运算符。

安全地访问对象属性

在访问对象属性时，如果该属性的值为 null 或 undefined，程序将出现异常。为了避免这种情况，我们可以使用可选链操作符（?.）：

let person = {
  name: '张三',
  address: {}
};
console.log(person.address.city); // 输出：Uncaught TypeError: Cannot read property 'city' of undefined
console.log(person.address?.city); // 输出：undefined

可选链操作符（?.）将在 person.address 不为 null 或 undefined 时访问它的属性 city。否则，将直接返回 undefined，避免程序异常。

使用空合并运算符

空合并运算符（??）用于判断变量是否为 null 或 undefined，如果是，则返回指定的默认值。例如：

let x = null;
let y;
console.log(x ?? 'default'); // 输出：default
console.log(y ?? 'default'); // 输出：default

空合并运算符左侧的表达式如果为 null 或 undefined，则返回右侧的表达式，否则返回左侧的表达式。

总结

null 和 undefined 是 JavaScript 中的两个特殊数据类型，它们都表示某个值的缺失或不存在。在实际应用中，我们要注意它们的不同用途和含义，避免混淆使用。在判断中，我们应该使用全等操作符（===）或 typeof 运算符来判断一个变量是否为 null 或 undefined；使用可选链操作符（?.）来安全地访问对象属性；使用空合并运算符（??）来给变量指定默认值。这些技巧能够提高程序的语义和效率，帮助我们编写更加优秀的 JavaScript 代码。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a9e3e9add4f0e0ff3580bf

ECMAScript 2021：null 和 undefined 的区别及其在判断中的使用注意