javascript赋值、算术、逻辑运算符

js里的运算符分为赋值运算符、算术运算符和逻辑运算符。
赋值运算符：=、+=、-=、*=、/=
算术运算符：+、-、*、/、%、++、–
逻辑运算符：大于(>)，等于(=)，小于(<)，大于等于(>=)，小于等于(<=)，不等于(!=)，true,false,或(||),且(&&)
首先，我们来看一个案例：

这里的输出效果可能很多人都会认为是20，我们来看一下：

我们发现，结果并不是我们预期的20，而是1010，那么这个1010是怎么来的呢?
注意，这里的 + 号并不是用做加号，而是被当成了连接符。因为a 被打上了双引号，js引擎默认是作为一个字符串来解析，所以，”10” + 10 的结果就被当成了2个字符串连接。得出了最后的结果1010，那么a-b呢？

效果如下：

我们会发现，这里又变成了数字-数字的形式，因为字符串中没有减号连接符一说，js引擎在发现执行了减号以后，首先判定了a的数据类型，发现a能被解析为一个number类型与b相减，所以这个时候，a变成了number类型。
那么我们如何在做加法的时候也让a变成一个number类型呢？这个时候就要用到我们的parseInt()方法
parseInte(String str) 的作用是把一个字符串变成一个number类型：

效果如下：

因为我们把a变成了一个number类型，这个时候， + 号的作用就是加法而不是连接符。所以，最后的出来的结果是20。
那么我们再来看个例子：

这里面，打印结果分别是11,10,20。那么这些运算符都是什么意思呢？
首先我们来看a++ , a++的意思相当于 a = a+1;同理，a– 就相当于 a= a-1;
a *=2 的意思相当于 a = a*2;同理，+= 、-=、/=都是一个道理。
大致的原理都了解的差不多了，其实不难，关键是要灵活运用。接下来我们来做一个简单的计算器，巩固一下我们上面所学的知识点。
我们首先定义好html的样式：

效果如下：

这里的button中，onclick属性代表的是点击这个button按钮时，会触发变量名为add的函数。
随后，我们定义JS，由于代码比较简单，我直接上全代码：

这里的document.getElementById(“a”).value是获取到id = a 的元素的value 值，获取到input id = a 和 input id = b 的值，随后相加，document.getElementById(“answer”).innerText 是获取到id = answer 的元素的文本。注意，这里的value 和innerText可能大家会有点混淆。value 是 元素中的一个属性，而innerText是元素的开始标签和结束标签中间的文本。
我们来运行一下这段代码，效果如下：

我们会发现，点击了等于以后，效果并不是我们所想象的那样，在上文中我们提到过，加号不仅可以作为加法使用，也可以作为字符串的连接符使用，由于document.getElementById(“a”).value获取到的是一个string字符串类型，所以我们要对这个获取到的值进行转换，转换成number类型。在上文中我们也提到过，转换成number类型的一种方式是parseInt(String str),在这里，我们用更简便的一种方式:

在这里，我们把一个纯数字的String 字符串 * 1 以后，js引擎就会自动的把String 转换成number类型，我们再来看效果：

发现已经如我们预期的所想了一样。那么，接下来大家的想法是不是 加减乘除取余都是同样的代码去定义一下呢?我们来看一下：

js代码如下：

效果如下：

我们会发现，虽然实现了功能，但是这样的代码显得非常的冗余和复杂，因为很多地方的代码其实都是一样的，我们需要对他进行一下简化。
首先，我们来看JS代码：

这2段js函数代码，只有我标出红圈的地方是不一样的，其他地方都是一样的。那么，我们是否可以把一样的地方提取出来，整合一下呢？
我们把代码封装一下：

这里面，参数first_id 就是我们第一个input框的id,second_id就是我们第二个input框的id,answer_id就是我们需要写答案的id,op就是我们的运算符号。
随后，我们在html元素里调用这个方法，并进行传参：

效果如下：

我们会发现，运算符被当做一个字符串连接了起来，那么这种情况怎么办呢？需要用到我们的js引擎自带的一个方法：eval() 计算方法：

这个时候，再来看一下效果：

ok，js代码我们封装到这儿。那么html代码我们是否也能够整合一下呢？答案是可以的。
其实，我们的html变化的地方更少，只有一个地方：

就是运算符号不一样，那么我们之前学过一个select 就是选择下拉框，我们将使用select 来简化html代码的编写：

这样，我们可以把其他多余的html代码删掉。随后我们也要稍微的改一下js代码：

多了一个获取运算符的代码。
最终，我们的简化代码效果如下：