JavaScript中关于null的一切

开发 前端
JavaScript有2种类型:基本类型(string, booleans number, symbol)和对象。

 [[346109]]

本文已经作者@Dmitri Pavluti授权翻译

JavaScript有2种类型:基本类型(string, booleans number, symbol)和对象。

对象是复杂的数据结构,JS 中最简单的对象是普通对象:一组键和关联值:

  1. let myObject = { 
  2.   name'前端小智' 

但是在某些情况下无法创建对象。 在这种情况下,JS 提供一个特殊值null —表示缺少对象。

  1. let myObject = null 

在本文中,我们将了解到有关JavaScript中null的所有知识:它的含义,如何检测它,null与undefined之间的区别以及为什么使用null造成代码维护困难。

1. null的概念

JS 规范说明了有关null的信息:

值 null 特指对象的值未设置,它是 JS 基本类型 之一,在布尔运算中被认为是falsy。

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

  1. function greetObject(who) { 
  2.   if (!who) { 
  3.     return null
  4.   } 
  5.   return { message: `Hello, ${who}!` }; 
  6.  
  7. greetObject('Eric'); // => { message: 'Hello, Eric!' } 
  8. greetObject();       // => null 

但是,在不带参数的情况下调用函数greetObject()时,该函数返回null。 返回null是合理的,因为who参数没有值。

2. 如何检查null

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

  1. const missingObject = null
  2. const existingObject = { message: 'Hello!' }; 
  3.  
  4. missingObject  === null; // => true 
  5. existingObject === null; // => false 

missingObject === null的结果为true,因为missingObject变量包含一个null 值。

如果变量包含非空值(例如对象),则表达式existObject === null的计算结果为false。

2.1 null 是虚值

null与false、0、''、undefined、NaN都是虚值。如果在条件语句中遇到虚值,那么 JS 将把虚值强制为false。

  1. Boolean(null); // => false 
  2.  
  3. if (null) { 
  4.   console.log('null is truthy'
  5. else { 
  6.   console.log('null is falsy'

2.2 typeof null

typeof value运算符确定值的类型。 例如,typeof 15是'number',typeof {prop:'Value'}的计算结果是'object'。

有趣的是,type null的结果是什么

  1. typeof null; // => 'object' 

为什么是'object',typoef null为object是早期 JS 实现中的一个错误。

要使用typeof运算符检测null值。 如前所述,使用严格等于运算符myVar === null。

如果我们想使用typeof运算符检查变量是否是对象,还需要排除null值:

  1. function isObject(object) { 
  2.   return typeof object === 'object' && object !== null
  3.  
  4. isObject({ prop: 'Value' }); // => true 
  5. isObject(15);                // => false 
  6. isObject(null);              // => false 

3. null 的陷阱

null经常会在我们认为该变量是对象的情况下意外出现。然后,如果从null中提取属性,JS 会抛出一个错误。

再次使用greetObject()函数,并尝试从返回的对象访问message属性:

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

因为who变量是一个空字符串,所以该函数返回null。 从null访问message属性时,将引发TypeError错误。

可以通过使用带有空值合并的可选链接来处理null:

  1. let who = '' 
  2.  
  3. greetObject(who)?.message ?? 'Hello, Stranger!' 
  4. // => 'Hello, Stranger!' 

4. null 的替代方法

当无法构造对象时,我们通常的做法是返回null,但是这种做法有缺点。在执行堆栈中出现null时,刚必须进行检查。

尝试避免返回 null 的做法:

  • 返回默认对象而不是null
  • 抛出错误而不是返回null

回到开始返回greeting对象的greetObject()函数。缺少参数时,可以返回一个默认对象,而不是返回null:

  1. function greetObject(who) { 
  2.   if (!who) { 
  3.     who = 'Stranger'
  4.   } 
  5.   return { message: `Hello, ${who}!` }; 
  6.  
  7. greetObject('Eric'); // => { message: 'Hello, Eric!' } 
  8. greetObject();       // => { message: 'Hello, Stranger!' } 

或者抛出一个错误:

  1. function greetObject(who) { 
  2.   if (!who) { 
  3.     throw new Error('"who" argument is missing'); 
  4.   } 
  5.   return { message: `Hello, ${who}!` }; 
  6.  
  7. greetObject('Eric'); // => { message: 'Hello, Eric!' } 
  8. greetObject();       // => throws an error 

这两种做法可以避免使用 null。

5. null vs undefined

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

  1. let myVariable; 
  2.  
  3. myVariable; // => undefined 

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

严格的相等运算符===区分null和undefined :

  1. null === undefined // => false 

而双等运算符==则认为null和undefined 相等

  1. null == undefined // => true 

我使用双等相等运算符检查变量是否为null 或undefined:

  1. function isEmpty(value) { 
  2.   return value == null
  3.  
  4. isEmpty(42);                // => false 
  5. isEmpty({ prop: 'Value' }); // => false 
  6. isEmpty(null);              // => true 
  7. isEmpty(undefined);         // => true 

6. 总结

null是JavaScript中的一个特殊值,表示丢失的对象,严格相等运算符确定变量是否为空:variable === null。

typoef运算符对于确定变量的类型(number, string, boolean)很有用。 但是,如果为null,则typeof会产生误导:typeof null的值为'object'。

null和undefined在某种程度上是等价的,但null表示缺少对象,而undefined未初始化状态。

作者:Dmitri Pavluti 译者:前端小智 来源:dmitripavlutin原文:https://dmitripavlutin.com/javascript-null/#comments

本文转载自微信公众号「 大迁世界」,可以通过以下二维码关注。转载本文请联系 大迁世界公众号。

 

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2020-09-11 10:55:10

useState组件前端

2021-02-28 09:47:54

软件架构软件开发软件设计

2021-02-19 23:08:27

软件测试软件开发

2018-11-23 11:17:24

负载均衡分布式系统架构

2021-05-28 07:12:59

Python闭包函数

2022-08-21 17:35:31

原子多线程

2023-04-20 10:15:57

React组件Render

2018-01-17 09:15:52

负载均衡算法

2023-04-12 14:04:48

光纤网络

2022-08-17 06:25:19

伪共享多线程

2022-04-02 09:38:00

CSS3flex布局方式

2023-07-10 10:36:17

人工智能AI

2018-01-05 14:23:36

计算机负载均衡存储

2023-02-10 08:44:05

KafkaLinkedIn模式

2021-08-09 14:40:02

物联网IOT智能家居

2015-06-24 09:54:38

Git撤销

2024-08-26 11:59:35

2022-07-15 14:58:26

数据分析人工智能IT

2022-04-24 09:00:00

渗透测试安全数字时代

2018-06-15 23:00:56

点赞
收藏

51CTO技术栈公众号