Javascript中Null和undefined的简单理解

 更新时间:2022年04月06日 15:34:40   作者:搞前端的半夏  
在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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js判断undefined变量类型使用typeof

    js判断undefined变量类型使用typeof

    js判断undefined变量类型使用typeof可以轻松实现,不了解的朋友可以参考下哈,希望对你有所帮助
    2013-06-06
  • ES6中Object.assign方法使用详解

    ES6中Object.assign方法使用详解

    这篇文章主要给大家介绍了关于ES6中Object.assign方法使用的相关资料,Object.assign可以用来处理数组,但是会把数组视为对象,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-06-06
  • 等待指定时间后自动跳转或关闭当前页面的js代码

    等待指定时间后自动跳转或关闭当前页面的js代码

    本文为大家详细介绍下如何通过js实现等待指定时间后自动跳转或关闭当前页面的脚步代码,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • JS中的Replace()传入函数时的用法详解

    JS中的Replace()传入函数时的用法详解

    这篇文章主要介绍了JS中的Replace()传入函数时的用法详解,replace方法的语法是:stringObj.replace(rgExp, replaceText)关于js replace 传入函数的用法,大家通过本文学习吧
    2017-09-09
  • 5 种JavaScript编码规范

    5 种JavaScript编码规范

    编码规范就是指导如何编写和组织代码的一系列标准,下面通过本文给大家带来了5 种JavaScript编码规范,需要的朋友参考下
    2018-01-01
  • JavaScript数组reduce常见实例方法

    JavaScript数组reduce常见实例方法

    reduce方法在数组的每个元素上执行用户提供的回调函数,即"reducer",它传入对前一个元素进行计算的返回值,结果是单个值,它是在数组的所有元素上运行reducer的结果,下面这篇文章主要给大家介绍了关于JavaScript数组reduce常见实例方法的相关资料,需要的朋友可以参考下
    2022-05-05
  • JS实现页面超时后自动跳转到登陆页面

    JS实现页面超时后自动跳转到登陆页面

    这篇文章主要介绍了JS实现页面超时后自动跳转到登陆页面,需要的朋友可以参考下
    2015-01-01
  • js闭包的9个使用场景

    js闭包的9个使用场景

    这篇文章主要介绍了js 闭包的9个使用场景,帮助大家更好的理解和学习JavaScript 闭包的使用,感兴趣的朋友可以了解下
    2020-12-12
  • JS 创建对象的模式实例小结

    JS 创建对象的模式实例小结

    这篇文章主要介绍了JS 创建对象的模式,结合实例形式总结分析了JS 创建对象的各种常用模式,包括工厂模式、构造函数模式、原型模式、组合构造和原型模式、动态原型模式、寄生构造函数模式、稳妥构造模式等,需要的朋友可以参考下
    2020-04-04
  • webpack多入口文件页面打包配置详解

    webpack多入口文件页面打包配置详解

    本篇文章主要介绍了webpack多入口文件页面打包配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01

最新评论