JavaScript梗图详解

前几天我看到了一张JavaScript的梗图，虽然看完之后哈哈大笑，但是有些东西我并不知道为啥是这样，只是知道了有这么一件事，但是不知道其中的原理，所以我今天来开坑把这个图上的JavaScript知识点整理一下

开坑一时爽，填坑火葬场，看我这个坑要多久才能填上 (2020/05/12开坑)

截至发送事件 (2020/06/29) 这个坑我才填上，我的拖延症没救了吧

1. typeof NaN == “number”

NaN 是一种特殊的 number 类型，所以 typeof 之后求得的是 number 类型。
NaN 的意思是说明这个值不是数字，例如我们在把字母转换成整数或者浮点数时，他返回的值就是 NaN。NaN 与任何值都不相等，与他自己也不相等
所以在判断某个值不是数字的时候不能使用==NaN，这样的话无论他是不是数字都返回 false ，这里应该使用isNaN()函数来判断他是否是 NaN 值
另外附上其他类型的 typeof 返回值
1. undefined:undefined
2. null:object
3. string:string
4. number:number
5. boolean:boolean
6. function:function
7. object:object

typeof 另一个有意思的题

在查找 nan 的资料的时候正好看到这个题，也是十分有意思的题
原帖里的凯斯的答案已经解释的相当清晰了，感谢凯斯的讲解！
下面我只是简单复述一下他的答案，感兴趣的可以去原帖仔细了解

typeof 1/0; //NaN（这个NaN不是字符串类型，是数值类型）
typeof typeof 1/0; //NaN（这个NaN不是字符串类型，是数值类型）
typeof(1/0); //"number"
typeof typeof(1/0); //"string"
typeof(typeof 1/0); //"number"

第一个是运算符优先级的问题，大家可以去MDN上的运算符优先级去查看
这里我直接给出结论，typeof 的优先级比除号高，所以其实这个计算是这样的

(typeof 1)/0

typeof 1计算出来结果等于字符串 “number” 再除以 0，所以这里就变成 NaN 了

第二个用到 typeof 是右结合型的，所以就是从右往左开始计算，这个计算就是这样的

(typeof (typeof 1))/0

先typeof 1返回字符串 “number”，再 typeof 返回字符串 “string”，字符串除以数字0，所以结果还是 NaN

第三个感觉比较简单了，Infinity 是数字类型，所以typeof输出的是字符串 “number”
第四个和第三个一脉相承，第三个返回的是字符串 “number”，在typeof输出的就是字符串 “string”

第五个是第一个的加强版，第一个算出的结果是 NaN ，正好就是我们梗图的第一个，直接输出 “number”

JavaScript精度问题

下面的笔记根据 JavaScript小数精度问题及查找的资料来讲解
JavaScript 对于数据储存使用的是 IEEE754 标准里的双精度存储数字 (64位)
IEEE754 标准里面有符号位 1 位，指数位 11 位，有效数 52 位，这样就导致在十进制和二进制转化的时候会出现问题

大数精度问题

9999999999999999 == 10000000000000000 16个9等于一兆
这个是JavaScript的大数精度问题，因为如下图 16个9 转换成二进制后所占用的有效数就已经达到了 53 位，有效数字已经放不下了，所以才会造成大数精度问题
就此我们也可以推知我们不发生大数精度的问题最大存储的数字大小 2^53 = 9007199254740992，大于这个数都有可能发生大数精度问题
解决办法：把数字转化为字符型，这样肯定不能发生精度的问题了

小数精度问题

0.1+0.2 == 0.3 false 也就是 0.1 + 0.2 != 0.3
这道题我刚看到的时候感觉是精度的问题，很多编程语言里的小数都有精度的问题
十进制小数转化为二进制小数的时候也会出现误差，例如
0.1 => 0.0001 1001 1001 1001 (1001的循环)
0.2 => 0.0011 0011 0011 0011 (0011的循环)
所以相加之后会出现误差
解决办法：可以使用 toFix() 四舍五入保留到小数后几位 (注意，toFix 后的结果是字符串类型的，需要转化为数字)

精度问题小结

其实精度问题比较好理解，在十进制里也有精度的问题
例如 0.3333… + 0.3333… + 0.3333… = 0.9999… 和 1/3 + 1/3 + 1/3 = 1 这里是分数转化为小数的时候丢失了精度
在计算机中是二进制与十进制的转化中丢失的精度

Math 里的 max方法和 min 方法

求最大值的方法没有参数的时候返回的是 -Infinity，但是最小值的方法没有参数的时候返回的是 Infinity
但是在网上找的的结果 (MDN, W3school, 菜鸟教程) 里都只是给出了一个结论，并没有给出为什么是这个值
然后我找到了 Google JS 引擎下载了源代码，查找了 math.js
貌似源码也没有给出注释

js 中的符号特性

后面几个基本上都是一些 JavaScript 的运算符号的特性，而且顺序比较乱，所以这里归为一大类

js 里的加号

// 1. 两个空数组相加等于一个空字符串
[] + [] = ""
// 2. 数组加对象等于 "[object Object]"
[] + {} = "[object Object]"
// 3. 对象加数组等于 0
{} + [] = 0
// 4. 三个 true 相加和 3 全等
true + true + true === 3
// 5. !+[]+[]+![]
(!+[]+[]+![]).length = 9
// 6. 数字加字符串
9 + "1" = "91"

1 的情况
- 在js遇到不能计算的情况时，就会进行默认转换
- 这时 [] 就会被替换成 ‘’ ，所以两个相加也为空字符串
2，3 的情况 (这里我引用贺师俊的回答，他写的十分清楚了)

先说 [] + {} 。一个数组加一个对象。
加法会进行隐式类型转换，规则是调用其 valueOf() 或 toString() 以取得一个非对象的值（primitive value）。如果两个值中的任何一个是字符串，则进行字符串串接，否则进行数字加法。
[] 和 {} 的 valueOf() 都返回对象自身，所以都会调用 toString()，最后的结果是字符串串接。[].toString() 返回空字符串，({}).toString() 返回“[object Object]”。最后的结果就是“[object Object]”。
然后说 {} + [] 。看上去应该和上面一样。但是 {} 除了表示一个对象之外，也可以表示一个空的 block。在 [] + {} 中，[] 被解析为数组，因此后续的 + 被解析为加法运算符，而 {} 就解析为对象。但在 {} + [] 中，{} 被解析为空的 block，随后的 + 被解析为正号运算符。即实际上成了：
{ // empty block }
+[]
即对一个空数组执行正号运算，实际上就是把数组转型为数字。首先调用 [].valueOf() 。返回数组自身，不是primitive value，因此继续调用 [].toString() ，返回空字符串。空字符串转型为数字，返回0，即最后的结果。

参考文章：Javascript中{}+[]===0为true,而[]+{}===0为false，因为啥，精彩的javascript对象和数组混合相加，JS中{}+[]和[]+{}的返回值情况是怎样的贺师俊的回答
4 的情况
- boolean 遇到 + 会转化为 number
5 长度为 9 是因为他们相连接后是 “truefalse”
- ! + [] 为 true
- 中间的 [] 让两个字符串相连接
- 最后的 ![] 为 false
6 比较简单了，加号只要左右有一个字符串，加号就会变成字符串的拼接

js 里的减号

js里的减号默认是转化为 Number 类型然后计算的

// 1.
true - true = 0
// 2.
91 - "1" = 90

js 里面的相等

== 只要值相等就好 (转换后相等也算，例如 true==1)，而 === 既要数值相等，又要类型相等 (不做类型转换值也相等)

// 1.
true == 1 true
true === 1 false
// 2.
[] == 0 true
{} == 0 false

1 是相等和全等的区别
2 的第二行也是把 {} 解析成了 block 类型，所以其实是{}; ==0，所以会报错
要是写成 ({}==0)，或者 0=={} 都可以

最后的最后

当然是感谢这位老爷子发明了这门语言

布兰登·艾奇（Brendan Eich，1961年～），JavaScript的发明人，2005年至2014年期间，在Mozilla公司担任首席技术长（Chief Technology Officer）。

这门语言和其他语言带来的感觉是不一样的，这种语言有一种放松的感觉，不想 c 和其他语言一样感觉很正式很刻板的感觉，JavaScript感觉就是很松弛的感觉，写起来一点也不会紧张

JavaScript梗图详解相关推荐

JavaScript 运行机制详解(理解同步、异步和事件循环)
1.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Java ...
36 张图详解应用层协议：网络世界的最强王者
上帝视角应用层我们前面介绍过 TCP/IP 模型的下三层,分别是网络接入层.网络层和传输层.它们都是为应用层服务的,传输应用层的各种数据,现在我们就来看看最高层的应用层. 应用层在 TCP/IP ...
多图详解教程：Eclipse 3.6连接Tomcat 7
多图详解教程:最新版本Java环境Eclipse 3.6连接最新版本开源Web服务器Tomcat 7.假如我们想将Java 的项目自己配环境浏览的话可以来看一下本文. 本文总共分为3大步分别为配置JR ...
Android-Binder进程间通讯机制-多图详解
本系列: Android-Binder进程间通讯机制-多图详解一次Binder通信最大可以传输多大的数据? 关于Binder (AIDL)的 oneway 机制概述最近在学习Bin ...
python 制作gif-利用Python如何制作好玩的GIF动图详解
前言之前我们分享过用Python进行可视化的9种常见方式.其实我们还能让可视化图形逼格更高一些,今天就分享一下如何让可视化秀起来:用Python和matplotlib制作GIF图表. 假如电脑上没有 ...
javascript BOM对象详解
javascript BOM对象详解目标:本章节将分为9点详细介绍有关BOM对象的知识点 1.什么是BOM 2.BOM的构成 3.顶级对象window 4.window对象常见事件(页面加载事件和体 ...
python变量命名规则思维导图_Python思维导图详解
Python思维导图 Python思维导图详解第一阶段:学习Python基础语法,主要学习变量的使用以及类型.变量的计算和输入输出.变量的命名.运算符.if判断语句.while循环语句.字符串.常量 ...
spi四种工作模式时序图_SPI总线协议及SPI时序图详解
嵌入式linux QQ交流群:175159209,欢迎爱好者加入交流技术问题! SPI,是英语Serial Peripheral Interface的缩写,顾名思义就是串行外围设备接口.SPI,是一种 ...
python二维图颜色函数_Python绘图之二维图与三维图详解
各位工程师累了吗? 推荐一篇可以让你技术能力达到出神入化的网站"持久男" 1.二维绘图 a. 一维数据集用 Numpy ndarray 作为数据传入 ply 1. import ...
UML(Unified Modeling Language)统一建模语言--类图详解
UML(Unified Modeling Language)统一建模语言--类图详解 2010-05-12 作者:fenglin1985 来源:fenglin1985的blog 类图是面向对象 ...

JavaScript梗图详解

JavaScript梗图详解

1. typeof NaN == “number”

typeof 另一个有意思的题

JavaScript精度问题

大数精度问题

小数精度问题

精度问题小结

Math 里的 max方法和 min 方法

js 中的符号特性

js 里的加号

js 里的减号

js 里面的相等

最后的最后

JavaScript梗图详解相关推荐

最新文章

热门文章