系统概括javaScript运算符

news2024/9/25 11:12:58

一.前言

二.算术运算符

三.前置后置递增运算符

四.比较运算符

五.逻辑运算符

六.各类运算符的优先级

一.前言

运算符通常被称为操作符，是用于实现赋值，比较和执行算术运算等功能的符号。

主要包括算术运算符，比较运算符，逻辑运算符，赋值运算符。

二.算术运算符

用于执行两个变量或者值的算术运算，如+，-，*，/，%。

运算的顺序一般是先加减后乘除，有小括号先算小括号。值得注意的是，我们一般不直接将浮点数拿来进行运算，因为编译器需要将浮点数转化为二进制数字，会有精度误差。

下面我们以一个简单加法器为案例，来解释下算术运算符。

简单加法器的源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    var num1=prompt('请输入要操作的第一个数：')
    var num2=prompt('请输入要操作的第二个数：')
    var result=parseFloat(num1)+parseFloat(num2)
    alert(result)
  </script>
</head>
<body>
  
</body>
</html>

如图所示，因为我们使用prompt获取到的数据是字符串型的，而我们在进行加法计算的时候，首先就得将其转化为数字型，即用到了parseFloat这个方法，且支持浮点型数字。

执行结果如下所示：

三.前置后置递增运算符

当++放在变量的前面时称为前置递增运算符。而当++放在变量的后面时称为后置递增运算符。两者在单独使用的时候是没有区别的，结果都一样。但当它们与其他代码连用的时候，结果可能就会产生不一样。下面我们来看几个案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    var num=0;
    num++;
    console.log(num);
    var num1=0;
    ++num1;
    console.log(num1)
  </script>
</head>
<body>
  
</body>
</html>

由图可见，num和num1初始值都为0，当它们分别进行前置递增跟后置递增的时候结果是不是相同的呢？我们来看运行结果:

如图可以看到两者结果是一样的，都为1，也就是都进行递增1的操作。

当它们与其它代码连用的时候又会产生怎么样的效果呢？我们来看一下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>  
    var num=10
    console.log(++num + 2)
    var num1=10
    console.log(num1++ + 2)
  </script>
</head>
<body>
  
</body>
</html>

结果如下：

如图我们可以发现第一个的值为13,而第二个的值却发生了改变，是12。这是因为我们的++num是先进行自加操作，再返回值的，也就是10加1之后再加的2，所以结果为13。而我们的num++却是先返回值，再进行自加操作，因此也就还是10加上2,结果为12。

四.比较运算符

是两个数据进行比较时所使用的运算符，比较运算之后，会返回一个布尔值作为比较运算的结果。

值得注意的是我们程序里面的等于符号是==,它默认转换数据类型，比如比较的两者，一个为字符型，一个为数字型，则会把字符串型的数据转为数字型来进行比较。

另外，有三个===等于号的，需要两边的值和数据类型完全一样才会返回True。

如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>  
    console.log(4 > 3)           //两个数字型之间的比较
    console.log(20 == '20')      //数字型与字符串型的两个等号比较
    console.log(32 === '32')     //数字型与字符串型的三个等号比较
  </script>
</head>
<body>
  
</body>
</html>

结果如下：