JavaScript 中 Null 与 Undefined 的区别及实际应用

前言

JavaScript 存在两种表示“无”的机制，即 undefined 与 null。

undefined

若声明变量但未赋值，其值即为 undefined。👇

let dog;
console.log(dog);

undefined 指变量已声明但未赋予具体值的状态。

对象属性的访问同理。

一个没有任何属性的 person 对象示例。

let person={
}

在控制台执行person.dog，结果返回 undefined。

原因在于 person 对象内部为空，这体现了 undefined 的特性。

访问已声明但未赋值的变量时，会出现此现象。

若控制台执行 test，报错提示“test is not defined”，表明该变量未声明。

前述狗示例中，变量已创建但未赋值，这便是区别所在。

Null

接下来讨论 null 类型。

null 代表空值，undefined 代表未赋值的变量。

通过以下示例进行说明。

在控制台输入以下代码。

let somethingUndefined;
const somethingNull = null;

注意：const 声明的变量必须初始化，不可不赋值。

somethingUndefined 因未赋值而显示为未定义，somethingNull 赋值为 null，二者皆无值，但机制不同。

以 Cher 和 Teller（真人）为例，用对象表示如下 👇

const zhangsan = {  mane: "zhangsan",};
const lisi = {  name: "lisi",  age: 18,};
lisi.mane = "li";
lisi.age = null;

此例中，zhangsan 对象缺少 age 属性。

另一方面，将 lisi 的 age 属性显式设置为 null。

控制台执行zhangsan.age返回 undefined，执行lisi.age返回 null。

二者区别可概括为：undefined 是变量自然初始状态，null 是人为置空对象的状态。实际使用中，为保证语义清晰，应避免显式赋值 undefined，释放对象时直接赋 null 即可。

附：实际应用

前述理论看似增加复杂性，实则具有实际用途。

以下代码演示两种类型的实际用法，以体会不存在与空值的区别：

var foo = {a:1, b:2};
console.log(JSON.stringify(foo)); // {"a":1,"b":2}
foo = {...foo, a:null};
console.log(JSON.stringify(foo)); // {"a":null,"b":2}
foo = {...foo, a:undefined};
console.log(JSON.stringify(foo)); // {"b":2}

由上述代码可知，将对象属性设为 undefined 后，该属性消失；设为 null 后，属性仍存在但值为 null。

若需使对象中某属性消失，应将其设为 undefined。这或许是 undefined 和 null 并存的最大意义。

总结

至此，关于 Javascript 中 Null 和 undefined 的文章介绍完毕，更多相关 JS Null 和 undefined 内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！