JavaScript:神奇的运算及其由来

更多
2019年08月01日 21点24分 作者:叶飞 修改

同类型之间

JavaScript的数据之间可以使用运算符进行运算。按变量类型不同,可大致分为:


字符串

拼接:使用加号(+)

'源栈,'+'欢迎你!'


数字

加(+)减(-)乘(*)除(/)

试试:0.1+0.2?为什么

3 + 2 - 5 * 0   //5


运算符之间是有“优先级”的。当一个表达式中有多个运算符,优先级高的先执行,就像“先乘除后加减”一样。

飞哥推荐优先使用圆括号(()),提高代码的可读性。JavaScript总是首先计算圆括号中的内容,比如:

(3 + 2 - 5) * 0; // 结果是0

PS:牛逼的代码,是别人读不懂的代码,而是别人能读懂的代码!千万千万不要搞反了。



取余(%)

13.5 % 5 //结果是余数,为3.5
13.5 / 5  //结果为2.7 


组合

    var n = 10;
    n = n + 10;
    //可以简写成:
    n += 10;
    //如果是n+=1的话,还可以进一步简写成:
    n++;
    //或者
    ++n;

常见面试题

问:++n和n++的区别?


var n = 10;
console.log(n++); 
这时输出的内容是10;但是,你再去查看n值,就会发现n=11。因为 console.log(n++) 是先执行console.log(n)然后再执行n++。


++n就不一样,是先执行++n,再执行console.log(n)。


比较运算

结果为bool值,包括:

  • 大于(>)小于(<)
  • 等于(==)不等于(!=)
  • 大于等于(>=)小于等于(<=)

主要是用于数值运算。但字符串可以进行等(==)和不等(!=)的比较。


逻辑运算

针对bool值进行,包括:

  • 取反(!):!true => false;!false => true
  • 或(||):true||true => true;true||false => true;false||false => false
  • 且(&&):true&&true => true;true&&false => false;false&&false => false
常见面试题

:||和|,&&和&有什么区别?

  1. 前者本质上是bool值之间的逻辑运算,后者本质上是二进制值之间的位运算。只是当true被转换为二级制1,false被转换成二进制0时,位运算具有和逻辑运算一样的结果;
  2. ||和&&具有“短路运算”的特点,从左到右:
    • ||运算中只要有一个条件表达式结果为true,其他表达式就不用(也不会)计算,可直接返回true
    • &&运算中只要有一个条件表达式结果为false,其他表达式就不用(也不会)计算,可直接返回false
    (演示:待学了函数之后……)
所以,逻辑运算总是要求使用||和&&。


其他

之前我们学习过的作用于对象的点(.)和方括号([])其实也是一种运算符。


混乱开始

但JavaScript允许不同类型的数据间进行运算,o(>﹏<)o


NaN

猜一猜下面这些表达式的值是多少:
1 + '1'
1 - '1'
1 - '1a'
1 + '1' 和 1- '1' 是JavaScript自己进行了类型转换(),不过
  • 1+'1'是把数字1转换成了字符串"1"
  • 1-'1'是把字符串"1"转换成了数字1

至于为什么要这么转?咳咳……

但 1 - '1a' JavaScript是彻底没辙了,所以返回一个:不是数值(NaN)的结果。


@想一想@:这样好不好?

一般来说,1a是由用户输入错误或者其他原因造成的(程序设想的这里应该是一个数字),现在这个错误被掩盖了(没有暴露出来),于是程序会拿着这个NaN继续运算,一直到bug被暴露出来——甚至永远都暴露不出来!因为JavaScript的错误:

  • 不会直接呈现在网页,所以普通用户可能发现不了
  • 不会提交给服务器端,所以开发/维护人员发现不了

这给我们的debug/维护工作带来了巨大的挑战(麻烦)!


那我们来检查一下结果值是否为NaN好不好?

1 - '1a' == NaN
false!咦?
1 - '1a' != NaN
NaN == NaN
NaN != NaN

不告诉你原因你永远想不明白:NaN和所有数(包括它自己)的所有比较,结果都为false。(和SQL中的NULL类似)

如果判断一个值是不是NaN?只能用函数 isNaN()

isNaN(1 - '1a')  //true 
isNaN(888)      //false


薛定谔的猫

类似的问题还不止一处!再试试:

'飞哥颜值' > 8
'飞哥颜值' < 8
'飞哥颜值' == 8

飞哥的颜值是“薛定谔的猫”啊!

是因为字符串和数值相比总是为false么?看看这个:

'9' > 8
'9.' > 8
'.9' < 8
'9e' > 8

所以我们勉强可以解释成:不能转换成数值的字符串和数值的比较总是为false。但真的有些勉强啊……


undefined和null

他们的运算也值得一看:

undefined == null
undefined == undefined
null + null
null + undefined
null + 1
null + '1'


更多精彩

以上都还是可以解释的,再看看这些:([]是数组,后文详述)

[]+1
[]-1
[]+[]
[]-[]
[]*[]
[]/[]
{}+{}
{}+[]
[]+{}
{}-[]
[''] == ''
[] == ''
[] == ['']

3>2 && 0 
3>2 && '0' 

不要问为什么,问就是:

(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]
我们需要做的是:一开始就要杜绝这种情况出现!


严格比较:===

JavaScript在很早就意识到了这些问题,所以在又推出并推荐了 ===,其特点是:如果不是同一种类型,马上为false:
5 == '5'
5 === '5'
嗯嗯,聊胜于无吧……


昨天今天和明天


生于仓促

1995年,网景公司的Brendan Eich在两周之内设计出了JavaScript语言:所以JavaScript先天不足,缺陷很多。“有哪些bug用久了成了特性的例子?”Javascript里到处都是。

和Java的关系?就北大青鸟和北大的关系一样 —— 完全没有关系,就是蹭Java的热点。

又名ECMAScript:ECMA(European Computer Manufacturers Association)组织定制了JavaScript语言的标准。ES6已经在2015年6月正式发布,但浏览器(尤其是旧版)并没有完全支持,更多参考MDN……

JavaScript之父对JavaScript的评价:

与其说我爱Javascript,不如说我恨它。它是C语言和Self语言一夜情的产物……但是,这个“娘不在爹不爱”的孩子


为什么能够流行?

首先,绝对不是因为JavaScript有多么多么牛逼优雅……

而是没有选择:在Web世界里,只有JavaScript能跨平台、跨浏览器驱动网页,与用户交互。

曾经最强大的对手,前后端通吃的VBScript:只支持IE !!!

借古鉴今:幸亏.NET core 开源跨平台……

同时,得力于Google 等厂商的大力扶植(对抗微软):Firebug / Ajax / V8引擎 / ChomeOS ……

所以,JavaScript最开始啊哈是一头风口上飞上天的猪,但现在因为飞得太久太久,都已经进化出翅膀来了!


TypeScript

废除其弱类型特性,未来JavaScript最有可能的替代者!


作业

  1. 用JavaScript变量pBody存储这行Html代码:
    <a href='http://17bang.ren' target="_blank">源栈·一起帮</a>,助你实现<span style="font-size:16px;">编程</span>梦想!
  2. 用一个变量替换“编程”,以便输出更多内容。比如:助你实现{职业}梦想、助你实现{人生}梦想
  3. 设计一段代码,实现以下逻辑:
    • 某用户有一定数量的帮帮豆(sum)
    • 每点赞一次就会消耗若干帮帮豆(consume)
    • 现在用户点赞若干次(count)
    • 计算用户剩余了多少帮帮豆(banlance)并用bool值显示他是否还有帮帮豆(isAvailable)
    以上皆需设置变量(变量名见圆括号),并代入计算。





JavaScript 入门 运算符
赞: 2 踩: 2

打赏
已收到打赏的 帮帮币

你的 打赏 非常重要!
为了保证文章的质量,每一篇文章的发布,都已经消耗了作者 1 枚 帮帮币
没有“帮帮币”,作者无法发布新的文章。

全系列阅读
评论 / 0

前端基础


HTML和CSS

HTML最常用的标签和属性,含HTML5的语义标签和新属性,但不包含需要JavaScript操作的HTML5 API,以及CSS基础(简述CSS 3动画相关),以及bootstrap.js以外的Bootstrap的内容。

Javascript和JQuery

Javascript的基本语法,JQuery类库(含Ajax),以及Bootstrap的JavaScript组件部分

全部
关键字



帮助

反馈