5年前，学习Null和Undefined，现在有了新的认知，看看这位人才怎么说？

许多编程语言都有一个称为null的非值。它指示一个变量当前不指向一个对象，例如，当它还没有初始化的时候。

德城ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！

相比之下，JavaScript有两个这样的非值：undefined和null。在这篇博文中，我们将研究它们有什么不同，以及如何最好地使用或避免它们。

1. undefined vs. null

这两种值非常相似，经常互换使用。因此，它们的区别是微妙的。

1.1 ECMAScript语言规范:undefined vs. null

ECMAScript语言规范对其描述如下。

  • undefined是 "当一个变量没有被赋值时使用"
  • null "表示有意不存在任何对象值"

1.2 两个非值--一个无法消除的错误

在JavaScript中拥有两个非值现在被认为是一个设计错误(甚至被JavaScript的创造者Brendan Eich认为)。

那为什么不从 JavaScript 中删除其中的一个值呢?JavaScript 的一个核心原则是绝不破坏向后兼容。这个原则有很多好处。它最大的缺点是，设计上的错误无法被删除。

1.3 undefined和null的历史

在Java中(它启发了JavaScript的许多方面)，初始化值取决于变量的静态类型。

  • 具有对象类型的变量被初始化为null。
  • 每个原始类型都有自己的初始化值。例如，int变量被初始化为0。

在JavaScript中，每个变量都可以容纳对象值和基本类型值。因此，如果null意味着 "不是一个对象"，那么JavaScript也需要一个初始化值，意味着 "既不是一个对象也不是一个原始值"。这个初始化值就是 undefined。

undefined 的出现

如果一个变量myVar还没有被初始化，它的值是undefined。

 
 
 
 
    
  
  
  
  
  1. let myVar; 
    2. 
  
  
  
  
  2. assert.equal(myVar, undefined); 
    3.

如果一个属性.unknownProp丢失，访问该属性会产生undefined的值。

 
 
 
 
    
  
  
  
  
  1. const obj = {}; 
    2. 
  
  
  
  
  2. assert.equal(obj.unknownProp, undefined); 
    3.

如果一个函数有一个没有参数的返回语句，该函数隐含地返回undefined。

 
 
 
 
    
  
  
  
  
  1. function myFunc() { 
    2. 
  
  
  
  
  2.   return; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. assert.equal(myFunc(), undefined); 
    5.

如果一个参数x被省略了，语言将该参数初始化为undefined。

 
 
 
 
    
  
  
  
  
  1. function myFunc() { 
    2. 
  
  
  
  
  2.   return; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. assert.equal(myFunc(), undefined); 
    5. 
  
  
  
  
  5. myFunc(); 
    6.

通过obj?.someProp的可选链路，如果obj未定义或为空，则返回未定义。

 
 
 
 
    
  
  
  
  
  1. > undefined?.someProp 
    2. 
  
  
  
  
  2. undefined 
    3. 
  
  
  
  
  3. > null?.someProp 
    4. 
  
  
  
  
  4. undefined 
    5.

3.null 出现情况

一个对象的原型要么是一个对象，要么在原型链的末端是null。Object.prototype没有原型。

 
 
 
 
    
  
  
  
  
  1. > Object.getPrototypeOf(Object.prototype) 
    2. 
  
  
  
  
  2. null 
    3.

如果我们将一个正则表达式(如/a/)与一个字符串(如'x')相匹配，我们要么得到一个带有匹配数据的对象(如果匹配成功)，要么得到空(如果匹配失败)。

 
 
 
 
    
  
  
  
  
  1. > /a/.exec('x') 
    2. 
  
  
  
  
  2. null 
    3.

JSON数据格式不支持undefined，只支持null。

 
 
 
 
    
  
  
  
  
  1. > JSON.stringify({a: undefined, b: null}) 
    2. 
  
  
  
  
  2. '{"b":null}' 
    3.

4.特别处理 undefined 或 null 的运算符

4.1 undefined 和参数默认值

在以下情况下，将使用参数默认值。

  • 缺少一个参数。
  • 一个参数的值是undefined。

例如：

 
 
 
 
    
  
  
  
  
  1. function myFunc(arg='abc') { 
    2. 
  
  
  
  
  2.   return arg; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. assert.equal(myFunc('hello'), 'hello'); 
    5. 
  
  
  
  
  5. assert.equal(myFunc(), 'abc'); 
    6. 
  
  
  
  
  6. assert.equal(myFunc(undefined), 'abc'); 
    7.

undefined也触发了参数的默认值，这说明它是一个元值。

下面的例子说明了这一点的用处。

 
 
 
 
    
  
  
  
  
  1. function concat(str1='', str2='') { 
    2. 
  
  
  
  
  2.   return str1 + str2; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. function twice(str) { // (A) 
    5. 
  
  
  
  
  5.   return concat(str, str); 
    6. 
  
  
  
  
  6. } 
    7.

在A行，我们没有为str指定一个参数默认值。当这个参数缺失时，我们把这个状态转发给concat()，让它选择一个默认值。

4.2 undefined 的和解构的默认值

解构中的缺省值与参数缺省值的工作原理类似--如果一个变量在数据中没有匹配，或者它与undefined的变量匹配，就会使用它们。

 
 
 
 
    
  
  
  
  
  1. const [a='a'] = []; 
    2. 
  
  
  
  
  2. assert.equal(a, 'a'); 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. const [b='b'] = [undefined]; 
    5. 
  
  
  
  
  5. assert.equal(b, 'b'); 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. const {prop: c='c'} = {}; 
    8. 
  
  
  
  
  8. assert.equal(c, 'c'); 
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10. const {prop: d='d'} = {prop: undefined}; 
    11. 
  
  
  
  
  11. assert.equal(d, 'd'); 
    12.

4.3 undefined 和 null 以及可选链

当通过 value?.prop 进行可选的链接时

  • 如果value是undefined或null，则返回 undefined。也就是说，只要value.prop会抛出一个异常，就会发生这种情况。
  • 否则，返回value.prop。
 
 
 
 
    
  
  
  
  
  1. function getProp(value) { 
    2. 
  
  
  
  
  2.   // optional static property access 
    3. 
  
  
  
  
  3.   return value?.prop; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5. assert.equal( 
    6. 
  
  
  
  
  6.   getProp({prop: 123}), 123); 
    7. 
  
  
  
  
  7. assert.equal( 
    8. 
  
  
  
  
  8.   getProp(undefined), undefined); 
    9. 
  
  
  
  
  9. assert.equal( 
    10. 
  
  
  
  
  10.   getProp(null), undefined); 
    11.

下面两个操作的效果类似。

 
 
 
 
    
  
  
  
  
  1. obj?.[«expr»] // optional dynamic property access 
    2. 
  
  
  
  
  2. func?.(«arg0», «arg1») // optional function or method call 
    3.

4.4 undefined 和 null 和 nullish 聚结

nullish 合并算子??如果一个值undefined或为null，则允许我们使用默认值：

 
 
 
 
    
  
  
  
  
  1. > undefined ?? 'default value' 
    2. 
  
  
  
  
  2. 'default value' 
    3. 
  
  
  
  
  3. > null ?? 'default value' 
    4. 
  
  
  
  
  4. 'default value' 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. > 0 ?? 'default value' 
    7. 
  
  
  
  
  7. 0 
    8. 
  
  
  
  
  8. > 123 ?? 'default value' 
    9. 
  
  
  
  
  9. 123 
    10. 
  
  
  
  
  10. > '' ?? 'default value' 
    11. 
  
  
  
  
  11. '' 
    12. 
  
  
  
  
  12. > 'abc' ?? 'default value' 
    13. 
  
  
  
  
  13. 'abc' 
    14.

null合并赋值操作符??=:

 
 
 
 
    
  
  
  
  
  1. function setName(obj) { 
    2. 
  
  
  
  
  2.   obj.name ??= '(Unnamed)'; 
    3. 
  
  
  
  
  3.   return obj; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5. assert.deepEqual( 
    6. 
  
  
  
  
  6.   setName({}), 
    7. 
  
  
  
  
  7.   {name: '(Unnamed)'} 
    8. 
  
  
  
  
  8. ); 
    9. 
  
  
  
  
  9. assert.deepEqual( 
    10. 
  
  
  
  
  10.   setName({name: undefined}), 
    11. 
  
  
  
  
  11.   {name: '(Unnamed)'} 
    12. 
  
  
  
  
  12. ); 
    13. 
  
  
  
  
  13. assert.deepEqual( 
    14. 
  
  
  
  
  14.   setName({name: null}), 
    15. 
  
  
  
  
  15.   {name: '(Unnamed)'} 
    16. 
  
  
  
  
  16. ); 
    17. 
  
  
  
  
  17. assert.deepEqual( 
    18. 
  
  
  
  
  18.   setName({name: 'Jane'}), 
    19. 
  
  
  
  
  19.   {name: 'Jane'} 
    20. 
  
  
  
  
  20. ); 
    21.

5. 处理 undefined 和 null

下面分享一下我们自己的代码中处理undefined 和null的最常见方法。

5.1 undefined 或 null 都不能作为实际值使用

举例，我们可能希望一个属性file.title永远存在，并且永远是一个字符串。有两种常见的方法来实现这一点。

这里，只检查undefined和null，而不检查一个值是否是字符串。你必须自己决定是否要把它作为一个额外的安全措施来实施。

5.1 undefined 和 null 都是禁止的

如下所示

 
 
 
 
    
  
  
  
  
  1. function createFile(title) { 
    2. 
  
  
  
  
  2.   if (title === undefined || title === null) { 
    3. 
  
  
  
  
  3.     throw new Error('`title` must not be nullish'); 
    4. 
  
  
  
  
  4.   } 
    5. 
  
  
  
  
  5.   // ··· 
    6. 
  
  
  
  
  6. } 
    7.

为什么选择这种方法?

我们想把undefined和null当作一样的东西，因为JavaScript代码经常这样做--比如说。

 
 
 
 
    
  
  
  
  
  1. // 检测一个属性是否存在 
    2. 
  
  
  
  
  2. if (!obj.requiredProp) { 
    3. 
  
  
  
  
  3.   obj.requiredProp = 123; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. const myValue = myParameter ?? 'some default'; 
    7.

如果我们的代码中出现了问题，出现了undefined或null，我们希望它尽可能快地失败。

5.1.2 undefined 和 null 都会触发默认值

如下所示

 
 
 
 
    
  
  
  
  
  1. function createFile(title) { 
    2. 
  
  
  
  
  2.   title ??= '(Untitled)'; 
    3. 
  
  
  
  
  3.   // ··· 
    4. 
  
  
  
  
  4. } 
    5.

我们不能在这里使用参数缺省值，因为它只由undefined 触发。相反，我们依靠nullish 合并赋值运算符??=。

为什么选择这种方法?

  • 我们想把undefined和null同等对待(见上一节)。
  • 我们希望我们的代码能够稳健地、无声地处理 undefined 和null。

5.2 undefined 或 null 都是“关闭”值

例如，我们可能希望一个属性file.title是一个字符串或 "关闭"(文件没有标题)。有几种方法可以实现这一点。

5.2.1 null是 "关闭的 "值

 
 
 
 
    
  
  
  
  
  1. function createFile(title) { 
    2. 
  
  
  
  
  2.   if (title === undefined) { 
    3. 
  
  
  
  
  3.     throw new Error('`title` must not be undefined'); 
    4. 
  
  
  
  
  4.   } 
    5. 
  
  
  
  
  5.   return {title}; 
    6. 
  
  
  
  
  6. } 
    7.

另外，undefined可以触发一个默认值。

 
 
 
 
    
  
  
  
  
  1. function createFile(title = '(Untitled)') { 
    2. 
  
  
  
  
  2.   return {title}; 
    3. 
  
  
  
  
  3. } 
    4.

为什么选择这种方法?

  • 我们需要一个表示“关闭”的非值。
  • 我们不希望我们的非值触发参数默认值和解构默认值。
  • 我们想把非值字符串化为JSON(这是我们不能用undefined做的)。

5.2.2 undefined 是"关闭的 "值。

 
 
 
 
    
  
  
  
  
  1. function createFile(title) { 
    2. 
  
  
  
  
  2.   if (title === null) { 
    3. 
  
  
  
  
  3.     throw new Error('`title` must not be null'); 
    4. 
  
  
  
  
  4.   } 
    5. 
  
  
  
  
  5.   return {title}; 
    6. 
  
  
  
  
  6. } 
    7.

为什么选择这种方法?

  • 我们需要一个表示“关闭”的非值。
  • 我们确实想让我们的非值触发参数默认值和解构默认值。

5.2.3 为什么不同时使用undefined和null作为 "关闭 "的值?

当接收一个值时，把undefined和null都当作 "不是一个值 "是有意义的。然而，当我们创建值时，我们希望不含糊，以便处理这些值时保持简单。

这指向了一种不同的方法。如果我们需要一个 "关闭"的值，但又不想使用undefined或null作为这样的值，怎么办?请往下看。

5.3 处理“关闭”的其他方式

5.3.1 特殊值

我们可以创建一个特殊的值，每当属性.title被关闭时，我们就使用这个值。

 
 
 
 
    
  
  
  
  
  1. const UNTITLED = Symbol('UNTITLED'); 
    2. 
  
  
  
  
  2. const file = { 
    3. 
  
  
  
  
  3.   title: UNTITLED, 
    4. 
  
  
  
  
  4. }; 
    5.

5.3.2 空对象模式

空对象模式来自于面向对象的编程。

  • 一个共同的超类的所有子类都有相同的接口。
  • 每个子类都实现了一个实例运行的不同模式。
  • 其中一个模式是 "null"。

在下面的例子中，UntitledFile实现了 "null" 模式。

 
 
 
 
    
  
  
  
  
  1. // 抽象的超类 
    2. 
  
  
  
  
  2. class File { 
    3. 
  
  
  
  
  3.   constructor(content) { 
    4. 
  
  
  
  
  4.     if (new.target === File) { 
    5. 
  
  
  
  
  5.       throw new Error('Can’t instantiate this class'); 
    6. 
  
  
  
  
  6.     } 
    7. 
  
  
  
  
  7.     this.content = content; 
    8. 
  
  
  
  
  8.   } 
    9. 
  
  
  
  
  9. } 
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11. class TitledFile extends File { 
    12. 
  
  
  
  
  12.   constructor(content, title) { 
    13. 
  
  
  
  
  13.     super(content); 
    14. 
  
  
  
  
  14.     this.title = title; 
    15. 
  
  
  
  
  15.   } 
    16. 
  
  
  
  
  16.   getTitle() { 
    17. 
  
  
  
  
  17.     return this.title; 
    18. 
  
  
  
  
  18.   } 
    19. 
  
  
  
  
  19. } 
    20. 
  
  
  
  
  20.  
    21. 
  
  
  
  
  21. class UntitledFile extends File { 
    22. 
  
  
  
  
  22.   constructor(content) { 
    23. 
  
  
  
  
  23.     super(content); 
    24. 
  
  
  
  
  24.   } 
    25. 
  
  
  
  
  25.   getTitle() { 
    26. 
  
  
  
  
  26.     return '(Untitled)'; 
    27. 
  
  
  
  
  27.   } 
    28. 
  
  
  
  
  28. } 
    29. 
  
  
  
  
  29.  
    30. 
  
  
  
  
  30. const files = [ 
    31. 
  
  
  
  
  31.   new TitledFile('Dear diary!', 'My Diary'), 
    32. 
  
  
  
  
  32.   new UntitledFile('Reminder: pick a title!'), 
    33. 
  
  
  
  
  33. ]; 
    34. 
  
  
  
  
  34.  
    35. 
  
  
  
  
  35. assert.deepEqual( 
    36. 
  
  
  
  
  36.   files.map(f => f.getTitle()), 
    37. 
  
  
  
  
  37.   [ 
    38. 
  
  
  
  
  38.     'My Diary', 
    39. 
  
  
  
  
  39.     '(Untitled)', 
    40. 
  
  
  
  
  40.   ]); 
    41.

我们也可以只对标题使用空对象模式(而不是对整个文件对象)。

5.3.3 Maybe 类型

Maybe 类型是一种函数编程技术。

 
 
 
 
    
  
  
  
  
  1. function getTitle(file) { 
    2. 
  
  
  
  
  2.   switch (file.title.kind) { 
    3. 
  
  
  
  
  3.     case 'just': 
    4. 
  
  
  
  
  4.       return file.title.value; 
    5. 
  
  
  
  
  5.     case 'nothing': 
    6. 
  
  
  
  
  6.       return '(Untitled)'; 
    7. 
  
  
  
  
  7.     default: 
    8. 
  
  
  
  
  8.       throw new Error(); 
    9. 
  
  
  
  
  9.   } 
    10. 
  
  
  
  
  10. } 
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12. const files = [ 
    13. 
  
  
  
  
  13.   { 
    14. 
  
  
  
  
  14.     title: {kind: 'just', value: 'My Diary'}, 
    15. 
  
  
  
  
  15.     content: 'Dear diary!', 
    16. 
  
  
  
  
  16.   }, 
    17. 
  
  
  
  
  17.   { 
    18. 
  
  
  
  
  18.     title: {kind: 'nothing'}, 
    19. 
  
  
  
  
  19.     content: 'Reminder: pick a title!', 
    20. 
  
  
  
  
  20.   }, 
    21. 
  
  
  
  
  21. ]; 
    22. 
  
  
  
  
  22.  
    23. 
  
  
  
  
  23. assert.deepEqual( 
    24. 
  
  
  
  
  24.   files.map(f => getTitle(f)), 
    25. 
  
  
  
  
  25.   [ 
    26. 
  
  
  
  
  26.     'My Diary', 
    27. 
  
  
  
  
  27.     '(Untitled)', 
    28. 
  
  
  
  
  28.   ]); 
    29.

我们可以通过Arrays对 "just "和 "nothing "进行编码。我们的方法的好处是，它得到了TypeScript的良好支持(通过判别性联合)。

6.我的方法

我不喜欢用undefined作为 "关闭 "的值，有三个原因。

  • undefined经常意外地出现在JavaScript中。
  • ndefined会触发参数和结构化的默认值(出于同样的原因，有些人喜欢undefined)。

因此，如果我需要一个特殊的值，我会使用以下两种方法中的一种。

  • 我使用null作为一个 "关闭 "的值。(作为一个旁观者，这种方法在TypeScript中得到了比较好的支持)。)
  • 我通过上述的技术之一来避免undefined和null。这样做的好处是比较干净，坏处是涉及更多的工作。

作者：Michael Thiessen

译者：前端小智

来源：dev原文：https://2ality.com/2021/01/undefined-null-revisited.html

当前题目：5年前，学习Null和Undefined，现在有了新的认知，看看这位人才怎么说？
网页链接：http://www.shufengxianlan.com/qtweb/news33/407883.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

静态网站知识

行业网站建设

成都网站制作　　 　边坡防护网厂家　　 　重庆网站建设　　 　成都能净科技　　 　做网站公司　　 　成都网站建设　　 　眉山主机托管　　 　东电技服　　 　成都搬家公司　　 　微信小程序　　 　成都网络推广　　 　成都门户网站建设　　 　小谭网创广告　　 　内江广告　　 　成都展柜厂　　 　重庆电信回兴机房　　 　抖音短视频拍摄　　 　手机网站开发　　 　网站设计公司　　 　小谭建站工作室