javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS Null和undefined

Javascript中Null和undefined的简单理解

作者:搞前端的半夏

在JavaScript中存在这样两种原始类型:Null与Undefined,这两种类型常常会使JavaScript的开发人员产生疑惑,在什么时候是Null,什么时候又是Undefined,下面这篇文章主要给大家介绍了关于Javascript中Null和undefined的相关资料,需要的朋友可以参考下

前言

在 JavaScript 中有两种表达“无”的方式,那就是使用undefined和null。

undefined

如果您创建一个变量并且不对其进行任何设置,它将是undefined. 👇

let dog;
console.log(dog);

image-20220330223218079

undefined是已经创建(变量)但尚未定义(给定值)的东西。

对象的属性也是如此。

一个不具有任何属性的person对象。

let person={
}

如果在控制台中输入person.dog,它将返回undefined。

image-20220330223355043

为什么?因为person什么都没有。这就是undefined的。

当尝试访问已创建但未赋予值的变量时,就会出现这种情况。

如果在控制台中输入test,您会看到返回的错误消息说*“test is not defined”*,这意味着您没有创建名为test的变量.

image-20220330223452230

对于我们上面使用的狗示例,我们已经创建了变量,但我们没有设置值。这就是区别。

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 的值。

image-20220330223916282

用一句话总结两者的区别就是: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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文