• 技术文章 >web前端 >js教程

    全面解析JavaScript中null

    WBOYWBOY2022-09-13 19:47:00转载404
    本篇文章给大家带来了关于javascript的相关知识,null是一种原始类型,表示有意不包含任何对象值,下面就来看一下 JavaScript 中的 null 的一切: 它的含义,如何检测它,null 和 undefined 之间的区别,以及为什么大量使用 null 会造成代码维护困难等,希望对大家有帮助。

    大前端成长进阶课程:进入学习

    【相关推荐:javascript视频教程web前端

    JavaScript 有两种类型:原始类型(strings, booleans, numbers, symbols)和对象

    对象是一个复杂的数据结构。最简单的 JavaScript 对象是普通对象 —— 键和相关值的集合

    let myObject = {
      name: 'Eric Cartman'
    };

    但是很多情况下不能创建一个对象。在这种情况下,JavaScript 提供了一个特殊的值 null —— 表示缺少对象

    let myObject = null;

    在这篇文章中,你将学习关于 JavaScript 中的 null 的一切: 它的含义,如何检测它,nullundefined 之间的区别,以及为什么大量使用 null 会造成代码维护困难等

    1.null 的概念

    JavaScript 规范中这么描述 null

    null 是一种原始类型,表示有意不包含任何对象值

    如果您看到 null(分配给变量或由函数返回),那么在那个位置原本应该是一个对象,但由于某种原因,一个对象没有创建

    比如,函数 greetObject() 创建对象,但也可以在无法创建对象时返回 null:

    function greetObject(who) {
      if (!who) {
        return null;
      }
      return { message: `Hello, ${who}!` };
    }
    
    greetObject('Eric'); // => { message: 'Hello, Eric!' }
    greetObject();       // => null

    当上面的函数中传入一个字符串参数时,如预期的,函数返回一个对象 { message: 'Hello, Eric!' }

    但是,函数中不传任何参数时,该函数返回 null。返回 null 是合理的,因为 who 参数没有值,导致 greeting 对象无法创建

    1.1 null 的一个比较贴切的比喻

    考虑关于 null 的一个比较贴切的比喻,你可以把变量想象成一个盒子。就像变量可以容纳对象一样,盒子也可以容纳像茶壶等的物品

    但一旦你收到一个盒子,打开它,什么也没有!有人弄错了,给了你一个空盒子。该盒子不包含任何内容,或者换句话说,它包含一个 null

    2. 如何去检测 null

    检查 null 好方法是使用严格相等运算符

    const missingObject = null;
    const existingObject = { message: 'Hello!' };
    
    missingObject  === null; // => true
    existingObject === null; // => false

    missingObject === null 的结果为 true,因为 missingObject 变量包含一个 null 值。如果变量包含非空值,比如对象,则表达式 existingObject === null 的结果为 false

    2.1 null 是一个假值

    nullfalse、0、"、undefinedNaN 都是假值。如果在条件语句中遇到它们,那么 JavaScript 将把它们强制为 false

    Boolean(null); // => false
    
    if (null) {
      console.log('null is truthy');
    } else {
      console.log('null is falsy'); // logs 'null is falsy'
    }

    2.2 typeof null

    typeof value 类型操作符可以确定值的类型。例如,类型为 15 的是 numbertypeof { prop: 'Value' } 等于 object

    有趣的是,null 值类型的结果是什么

    typeof null; // => 'object'

    一个缺失的对象类型怎么被判断为 object? 原来 typoef null 作为 object 是早期 JavaScript 实现中的一个错误

    不要使用 typeof 操作符检测 null 值。如前所述,使用严格的相等运算符 myVar === null

    如果你想使用 typeof 去检查一个变量是否是一个对象,你必须排除掉 null 的情况

    function isObject(object) {
      return typeof object === 'object' && object !== null;
    }
    
    isObject({ prop: 'Value' }); // => true
    isObject(15);                // => false
    isObject(null);              // => false

    3. null 的陷阱

    null 通常会在你希望使用对象的情况下意外出现。然后,如果尝试从 null 中提取属性,JavaScript 会抛出一个错误

    让我们再次使用 greetObject() 函数并尝试从返回的对象中访问 message 属性

    let who = '';
    
    greetObject(who).message; 
    // throws "TypeError: greetObject() is null"

    因为 who 变量是一个空字符串,所以函数返回 null。当从 null 访问 message 属性时,将抛出类型错误错误

    你可以通过使用 可选链操作符 来处理 null

    let who = '';
    
    greetObject(who)?.message ?? 'Hello, Stranger!';  
    // => 'Hello, Stranger!'

    或者使用下一节中描述的两种选择。

    4. null 的替代方案

    当你不能构造一个对象时,很容易返回 null。但这种做法也有缺点

    一旦 null 出现在执行堆栈中,你总是必须检查它

    我们尽量避免返回 null

    让我们回忆一下 greetObject() 函数返回 greeting 对象

    当缺少参数时,可以返回一个默认对象,而不是返回 null

    function greetObject(who) {
      if (!who) {
        who = 'Stranger';
      }
      return { message: `Hello, ${who}!` };
    }
    
    greetObject('Eric'); // => { message: 'Hello, Eric!' }
    greetObject();       // => { message: 'Hello, Stranger!' }

    或者抛出一个错误

    function greetObject(who) {
      if (!who) {
        throw new Error('"who" argument is missing');
      }
      return { message: `Hello, ${who}!` };
    }
    
    greetObject('Eric'); // => { message: 'Hello, Eric!' }
    greetObject();       // => throws an error

    这些实践可以让你完全避免处理 null

    5. null vs undefined

    undefined 就是未初始化的变量或对象属性的值

    例如,如果在声明变量时没有赋初值,那么访问该变量的结果为 undefined

    let myVariable;
    
    myVariable; // => undefined

    nullundefined 之间的主要区别是,null 表示丢失了的对象,而 undefined 表示未初始化的状态

    严格相等运算符 === 区分 nullundefined

    null === undefined; // => false

    而松散相等运算符 == 则认为 nullundefined 相等

    null == undefined; // => true

    我使用松散相等运算符检查变量是否为 nullundefined

    function isEmpty(value) {
      return value == null;
    }
    
    isEmpty(42);                // => false
    isEmpty({ prop: 'Value' }); // => false
    isEmpty(null);              // => true
    isEmpty(undefined);         // => true

    6. 总结

    nullJavaScript 中的一个特殊值,表示丢失的对象

    严格相等运算符判断变量是否为空: variable === null

    typoef 操作符用于确定变量的类型(number, string, boolean)。但是,typeofnull 情况下会引起误解: typeof null 结果为 object

    nullundefined 在某种程度上是等价的,但null 表示一个丢失的对象,而 undefined 表示未初始化状态

    尽可能避免返回 null 或将变量设置为 null。因为这种做法会导致 null 值的扩展和需要对 null 的验证。相反,尝试使用具有默认属性的对象,或者甚至抛出错误会是更好的实践

    你会使用什么方法来检查 null?

    【相关推荐:javascript视频教程web前端

    以上就是全面解析JavaScript中null的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:脚本之家,如有侵犯,请联系admin@php.cn删除
    专题推荐:javascript
    上一篇:jquery+swiper实现时间轴tab滑动切换显示效果 下一篇:浅析Node处理CPU密集型任务的方法
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• 5个常见的JavaScript内存错误• JavaScript介绍之手写异步加法asyncAdd方法• JavaScript事件循环同步任务与异步任务• javascript怎么判断两个数组是否有重复的元素• 关于JavaScript中的数组方法和循环
    1/1

    PHP中文网