JavaScript·随记 Null vs. Undefined

Tychio 发布于2019-08-23 17:12 / 3059人阅读

摘要：刚学了一些的基础语法，试着用一下。相关文档基本语法配合基本使用相同点和都是的基本数据类型扩展的种基本数据类型和都是值扩展的种值空字符串不同点可见代表变量有值，值为空且该值是通过变量赋值获得的代表声明了变量，但没有为其赋值。

刚学了一些 Markdown 的基础语法，试着用一下。

相关文档：Markdown基本语法配合基本使用

相同点：

null 和 undefined 都是js的基本数据类型
扩展：JS的6种基本数据类型

Boolean

String

Number

Symbol

Null

undefined

null 和 undefined 都是falsy值
扩展：JS的6种falsy值

false

"" (空字符串)

NaN (Not a Number)

undefined

null

不同点：

let i = null;
console.log(i);
// null

let j;
console.log(j);
// undefined

可见：
null 代表变量有值，值为空 , 且该值是通过 变量赋值 获得的；
undefined 代表声明了变量，但没有为其赋值。

综上：

undefined == null;
// true
undefined !== null;
// true

使用 typeof 验证一下：

typeof undefined;
// "undefined"
typeof null;
// "object"
typeof NaN;
// "number"

Emm...，有点懵逼，确实验证了undefined !== null，不过...
null的类型是object?! ( 你不是js的基本数据类型吗? )
NaN的类型是number?! ( 你全称不是叫 “Not a Number” 吗? )

事实上就是这么皮，而且你还会发现：

!!NaN === false;
// true
NaN == false;
// false
NaN == 0;
// false

甚至：

NaN == NaN;
// false

NaN的特性就是如此：

NaN是number类型；

NaN不等于任何值；

无效运算时会产生NaN，比如parseInt("abc")

可用isNaN()判断一个值是否是NaN

!!是个很好用的“运算符”，它的用途是判断任意值在做if条件判断时的逻辑值（而非参与逻辑运算时的逻辑值，下文会提到），比如：

!! ""
// false
"" == false
// true

!! 0
// false
0 == false
// true

但是，千万不要觉得!!运算结果为false，== false就成立，比如：

!! undefined;
// false
undefined == false;
// false
!! undefined === false;
// true

!! null;
// false
null == false;
// false
!! null === false;
// true

!! NaN;
// false
NaN == false;
// false
!! NaN === false;
// true

另一点需要注意的是，它不做为参与逻辑运算时的逻辑值，比如：

!! undefined;
// false

/* 结果是undefined，而不是false */
undefined && "a";
// undefined

false && "a";
// false

但愿你还没看蒙。。至于为什么typeof(null) === "object"
Emm。。跑题了，我们接着说 Null vs. Undefined

常见应用场景：

===（严格等于）和 ==（等于）分别在何时使用：

我们都知道在做逻辑判断时，== 会强制转换用于比较的两个值的类型；而在实际开发中，以下情况用 == ，其他时候都用 === 即可

if (obj.a == null) {
  // 这里相当于 obj.a === null || obj.a === undefined;
  // 这也是jquery源码中推荐的写法
}

ES6函数默认参数的实现：
结合上文，null 是有值的，且值为空，可通过赋值赋给变量

let logHi = (param = "hello" ) => {
  console.log(param);
};

/* 默认值生效 */
logHi();
// "hello"

/* 赋值调用 */
logHi("world");
// "world"

/* undefined时,默认值生效 */
logHi(undefined);
// "hello"

/* null作为值,赋值调用 */
logHi(null);
// null

/* NaN作为值,赋值调用 */
logHi(NaN);
// NaN

倘若函数这样写：

let consoleHi = (param) => {
  param = param || "hello";
  console.log(param);
};

/* 默认值生效 */
consoleHi();
// "hello"

/* 赋值调用 */
consoleHi("world");
// "world"

/* undefined时,默认值生效 */
consoleHi(undefined);
// "hello"

/* null作为值为falsy */
consoleHi(null);
// "hello"

/* NaN作为值为falsy */
consoleHi(NaN);
// "hello"

参考文献：JavaScript — Null vs. Undefined

题外话：不免想起一篇文章，虽然联系不大
趣文：编程其实是文科

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103981.html

JavaScript·随记深拷贝 vs. 浅拷贝

摘要：而在这个运算符的相关用例中，往往会涉及到其他知识点，深拷贝和浅拷贝就是其中之一。即对象的浅拷贝会对主对象的值进行拷贝，而该值有可能是一个指针，指向内存中的同一个对象。，可以看到深拷贝和浅拷贝是对复制引用类型变量而言的。在ES6的系列文章中，基本都会提到Spread——扩展运算符(...)。而在这个运算符的相关用例中，往往会涉及到其他知识点，深拷贝和浅拷贝就是其中之一。背景知识在讨...

RyanQ 2019-08-23 17:14 评论0 收藏0
《高性能javascript》随记 - Data Access

摘要：内部属性包含一个函数被创建的作用域中的对象的集合，此集合被称为函数的作用域链。当作用域链销毁时，激活对象一同被销毁。下图展示了函数运行期上下文的作用域和闭包由于闭包的属性包含与运行期上下文作用域链相同的对象引用，会产生副作用。 javascript按照数据存储位置的不同可分为以下四类：直接量（字符串、数字、布尔型、Object、Array、Function、正则表达式、NULL以...

fai1017 2019-08-21 12:24 评论0 收藏0
《高性能javascript》随记 - Loading and Excecution

摘要：此过程中，页面的解析与用户的交互都是阻塞的。非阻塞脚本延时脚本可以给标签添加一个属性，这个属性表明元素中的脚本不打算修改，因此代码可以稍后执行。此技术的重点在于无论在何处启动下载，脚本的下载和运行都不会阻塞页面的处理过程。当浏览器遇到标签时，页面的加载、介些都会停下来，运行此javascript代码，然后再继续加载。这种事情同样会发生在那些以src属性调用的外部脚本，浏览器首先下载外...

DevTTL 2019-08-21 12:25 评论0 收藏0
JavaScript — Null vs. Undefined

JavaScript — Null vs. Undefined 初学者往往搞不清楚null和undefined的区别，本文深入剖析null和undefined的异同。 null是啥？关于null有两点需要掌握： null是一个空值 null是被赋值来的下面是个 Demo, 我们给 a 变量赋值为 null: let a = null; console.log(a); // null ...

tanglijun 2019-08-22 13:52 评论0 收藏0
javascript数据结构与算法 --- 栈 vs 队列 vs 链表 vs 二叉树 vs 图

摘要：数据结构前言随着的兴起将推向的一个前所未有的高度作为为建立高性能的服务端而创建的运行平台随着时间的推移和生态链的完善已经不再局部于服务端包括前端后端桌面正如在年提出的任何可以使用来编写的应用，最终会由编写虽然人们大多或多或少对笔者的文章有点数据结构前言随着node的兴起, 将javascript推向的一个前所未有的高度, node作为为建立高性能的服务端而创建的js运行平台随着时...

why_rookie 2019-08-26 11:33 评论0 收藏0