JavaScript中的null和undefined详解|极客笔记

JavaScript中的null和undefined详解

引言

在JavaScript中，null和undefined是两个特殊的值，它们经常会使初学者产生困惑。本文将详细解释null和undefined的含义、用法和区别，并通过示例代码来帮助读者更好地理解。

null

含义和用法

null是一个表示”无值”或”空”的特殊值，在JavaScript中，它被视为一个空对象指针。通常我们会将null赋值给变量，以表示该变量不引用任何对象。

var myVar = null;

typeof运算符的结果

使用typeof运算符检查null的类型时，会返回”object”。这是由于历史原因造成的，null被错误地认为是一个对象。

console.log(typeof null);  // 输出"object"

示例代码

var person = {
  name: 'John',
  age: 20
};

person = null;

console.log(person);  // 输出null

运行结果：

null

undefined

含义和用法

undefined表示一个未定义的值。当我们声明了一个变量但没有给它赋值时，它的初始值就是undefined。它也是一个特殊的值，用于表示缺失的属性或函数返回值。

var myVar;
console.log(myVar);  // 输出undefined

typeof运算符的结果

与null不同，undefined是一个直接量，使用typeof运算符检查undefined的类型时，会返回”undefined”。

console.log(typeof undefined);  // 输出"undefined"

示例代码

function multiply(a, b) {
  console.log(a * b);
}

var result = multiply(5, 10);
console.log(result);  // 输出undefined

运行结果：

50
undefined

区别和用途

虽然null和undefined都表示”无值”，但它们在以下方面有着明显的区别。

null是一个关键字，而undefined是一个全局变量。
null可以被显式地赋值给变量，而undefined只能作为默认初始值存在。
在判断一个变量是否为null时，应使用严格相等运算符（===）；而在判断一个变量是否为undefined时，可以使用严格相等运算符或typeof运算符。

一个常见的应用场景是，在判断一个对象是否存在某个属性时，如果属性值为null，则表示该属性已定义但为空。而如果属性值为undefined，则表示该属性不存在。

var person = {
  name: 'John',
  age: null
};

console.log(person.age === null);  // 输出true
console.log(person.height === undefined);  // 输出true

运行结果：

true
true

null和undefined的转换

null和undefined可以相互转换，但它们也与其他值之间有一些相应的转换规则。

null转换为其他类型的值

将null与数字相加时，null会被转换为0；将null与字符串相加时，null会被转换为”null”字符串。

console.log(null + 5);  // 输出5
console.log(null + 'hello');  // 输出"nullhello"

undefined转换为其他类型的值

当undefined与数字相加时，结果会变为NaN；而当undefined与字符串相加时，结果则会变为”undefined”字符串。

console.log(undefined + 5);  // 输出NaN
console.log(undefined + 'world');  // 输出"undefinedworld"

补充：严格相等运算符和相等运算符

在JavaScript中，除了严格相等运算符（===）外，还有相等运算符（==）。它们在处理null和undefined时会有一些差异。

调用相等运算符（==）时，如果值的类型不同，JavaScript会尝试将它们转换为相同的类型再进行比较。而调用严格相等运算符（===）时，如果值的类型不同，直接返回false。

以下是一些示例代码来说明相等运算符和严格相等运算符的区别：

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

console.log('5' == 5);  // 输出true
console.log('5' === 5);  // 输出false

console.log(true == 1);  // 输出true
console.log(true === 1);  // 输出false

运行结果：