看过这张图你还记不牢JavaScript的语法和特性,算我输!

逛知乎的时候发现@DDDD转了一张图,这张图对js魔法的吐槽可谓非常到位。下面,我们就从这张图出发来详细讲讲js。

数字类型与精度问题

虽然js是弱类型语言,声明变量时也不需要显式指定类型。但是,数据本身依旧还是有类型的,比如数字和字符串就是以不同形式存在的数据。在js中,所有数字的类型都为number。其中,一个特殊的数字就是NaN(Not a number),虽然名字叫“不是数”,但为了计算的一致性(IEEE745亦规定),NaN依旧是数字类型的。任何NaN参与的数字计算的结果都还是NaN。(NaN-NaN!=0)还需要注意的是,js中被0除非但不会报错,而且结果也不是NaN(只有0/0是NaN),而是Infinity(被除数为正)或-Infinity(被除数为负)。

由于将整数和浮点数统一处理,所以js并不存在整数和浮点数的区别——所有数字都以64位有符号浮点数(IEEE745格式)的形式存储。因此,舍入误差是js数字类型的一个大坑。最经典的当然就是0.1+0.2!=0.3了。其实这不是js的锅,大部分编程语言都有这个问题。简单的解释可以查看http://0.30000000000000004.com。很多人对浮点数都有误解,认为0.1是

,所以可以正确的表示0.1,然而浮点数并不是这样。在2为基数的情况下,0.1=1/10是一个无限循环小数,所以在运算时会产生舍入误差。想要进一步了解可以查阅有关数值计算的材料。

Max、Min与函数参数

在js中,函数参数也是一种魔法。一般编程语言中,形参具有类似“约束”的作用,即实参的数量要与形参相符(默认值除外)。但是js魔法并不需要形参和实参相匹配,多的实参忽略,少的就是undefined。事实上,js还提供了一种访问参数的方法。在函数体上下文中,js提供了arguments(类似Python的*args)以便参数的访问。考虑到没有卵用的形参,js函数的形参更是一个别名。

在Python中,函数重载可以通过默认值实现,而在js中,你可以随心所欲的解析arguments,可以说是很硬核了。

回到我们的max和min。EMCAScript v3之后,max和min就支持任意数量参数的调用了。从逻辑上考虑,既然没有传入任何数,那取最大的函数就不能返回一个能大于任何数的数,所以返回-Infinity不无道理。min亦然。

魔法操作符+、-

为了更好的理解接下来的坑,我们有必要先看看+、-两个操作符。这俩操作符神奇就神奇在,他们不仅仅是双目运算符,也同时是单目运算符!对于+,双目运算时其意义是数字加或字符串拼接。这里有个很坑的地方,就是只要参与运算的值不全是数字,那么+就会被视为字符串拼接(String.concat),从而把所有参数转换为字符串并进行拼接。单目运算时,+被视为取正,所有传入的参数都会被转换为数字并取正。(然而取正并没有任何卵用,所以其实就是转为数字)

相比之下-就和蔼了许多,双目是数值减,单目这是取反。

无奈的解释器

下面这个魔法涉及到的东西很多,不过我还是打算把它归类到解释器的范畴,而且这个锅要丢给REPL。{}+[]具歧义,可以被理解为:

  • (作为值理解)对象{}+数组,+为双目
  • (作为代码块理解){}为代码块,+是单目

而这两种理解下的结果也是不同的。而在REPL的上下文下,js解释器采用了第二种理解。而一旦上下文变化,提示解释器这是表达式时,解释器就会采用第一种理解。比如console.log({}+[])的结果就不再是0了。

隐式类型转换

之前在说+、-的时候,我提到了一些隐式的转换,其实这样的转换远不止出现在+、-。比如取反!,就会转成布尔型再取反。所以!+[]就是true,![]是false。考虑到运算优先级,最后得到”truefalse”。

作为一个弱类型语言,js的逻辑是,如果类型不对,那就转过去。

==与===

这是个老生常谈的东西了。这里不多讲,只要知道==可能会隐式转换类型就行。

最后

我写这篇文章的目的并不是解释这张图,因为这张图里的很多知识并不是实际编程所需要的(就像i+++++i,这些是我认为不重要的知识)。我是希望借这张图聊到一些js的语法特性,以加深对js的理解。这两点在我看来有本质的区别。

自己只是个做了几年全栈开发的老码农,希望本文能对大家有所帮助帮助。

如果你依然在编程的世界里迷茫,不知道自己的未来规划,可以加入web前端学习交流群:767273102 里面可以与大神一起交流并走出迷茫。新手可免费领取学习资料,看看前辈们是如何在编程的世界里傲然前行不停更新最新的教程和学习方法(详细的前端项目实战教学视频),有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入

点击:前端学习圈

原文地址:https://blog.51cto.com/14284898/2384838

时间: 2024-10-07 06:33:09

看过这张图你还记不牢JavaScript的语法和特性,算我输!的相关文章

一张图告诉你,只会JavaScript还不够!

会了JavaScript语法,你就真的会了JavaScript吗,来看这张图!是超实用的JavaScript代码段一书的导览!熊孩子们,赶紧学习去吧!

一张图让你明白canvas的径向渐变

我相信在径向渐变中,如果一个圆包含另一个圆,没有会不知道渐变的样子,但是如果两个圆相交或者是相分离呢?看完这张图你就明白了 渐变都是从红色向蓝色, createRadialGradient(x1,y1,r1, x2,y2,r2) 左图为小圆向大圆渐变,中图为大院向小圆渐变,右图为相离两个圆的渐变,从图中可以很清楚的看到圆相离或相交时的渐变方式,渐变总是从起始圆开始(包括起始圆内部),朝着结束圆方向,直到遇到结束圆(不包括结束圆内部).

一张图搞懂容器所有操作 - 每天5分钟玩转 Docker 容器技术(26)

前面我们已经讨论了容器的各种操作,对容器的生命周期有了大致的理解,下面这张状态机很好地总结了容器各种状态之间是如何转换的. 如果掌握了前面的知识,要看懂这张图应该不难.不过有两点还是需要补充一下: 可以先创建容器,稍后再启动. ① docker create 创建的容器处于 Created 状态.② docker start 将以后台方式启动容器. docker run 命令实际上是 docker create 和 docker start 的组合. 只有当容器的启动进程 退出 时,--rest

一张图彻底了解Unity脚本的生命周期

以前没好好看Unity的脚本手册,原来写的是这么的全...尤其起yield  www  协同 这部分看了这张图彻底的懂了..

一张图搞懂Ajax原理

本文整理在,我的github上.欢迎Star. 原理 说起ajax,就不得不说他背后的核心对象XMLHttpRequest,而说到XMLHttpRequest我觉得,从它的readyState状态说起是最好的切入点. 个人觉得,只要弄清楚了readyState的这几个状态,其实ajax的原理也就算弄清楚了.为了更方便您理解,笔者特意画了一张状态图. 您只需要看懂这张图ajax原理,您就算通关了:并且很难忘记. 首先let xhr = new XMLHttpRequest();,新建一个XMLHt

一张图看懂原码、反码、补码、移码

前言 原码.反码.补码其实两年前就讲过,只是当时的理解太过肤浅或者直接说就是没有理解,因为对于数学比较发怵的我看到那么多的公式很是脑袋大,所以想要硬记也记不住.这次讲课的时候好歹知道了运算规则,但别人一问为什么,立马那个冏啊~好了,废话不多说了,开始进入正题(如果我的理解有偏差,恳请各位大虾不吝指出): 一张图胜过千言万语,下面的这张是本篇想要说的大概内容 原码 我们知道,计算机是以0和1进行运算的,而且内部只有加法运算器,但日常生活中使用的却是十进制,并且有正负之分.于是我们发明了原码:最高位

一张图看懂Function和Object的关系及简述instanceof运算符

我在写一篇图解prototype和__proto__的区别时,搜资料搜到了一个有意思的现象,下面这两个运算返回的结果是一样的: Function instanceof Object;//true Object instanceof Function;//true 这个是怎么一回事呢?要从运算符instanceof说起. 一.instanceof究竟是运算什么的? 我曾经简单理解instanceof只是检测一个对象是否是另个对象new出来的实例(例如var a = new Object(),a i

Nodejs学习笔记(三)——一张图看懂Nodejs建站

前言:一条线,竖着放,如果做不到精进至深,那就旋转90°,至少也图个幅度宽广. 通俗解释上面的胡言乱语:还没学会爬,就学起走了?! 继上篇<Nodejs学习笔记(二)——Eclipse中运行调试Nodejs>之后,代码编写环境就从Sublime转战到Eclipse下,感觉顺手多了.于是就跟着Scott老师学起了Nodejs建站的课程(推荐大家点进去看看),踏上了未爬先走的路子. 作为一个白里透白的小白来说,今天主要记录下如何用Nodejs搭建一个小小的网站,以及自己对于这种Nodejs建站的运

一张图告诉你,只会这些HTML还远远不够!!!!!

不知道自己HTML水平如何,不知道HTML5如何进化?看这张图 如果一半以上的你都不会,必须看这本书,阿里一线工程师用代码和功能页面来告诉你每一个技术点. 都会一点,但不知道如何检验自己,看看本书提供的面试题: Doctype? 严格模式与混杂模式,如何触发这两种模式? 什么是Semantic HTML(语义HTML)? 表格的的语义化可以用哪个标签? <img>标签上title与alt属性的区别是什么? 你如何对网站的文件和资源进行优化? 在网页中的应该使用奇数还是偶数的字体? 什么是HTM