JavaScript-运算符，算术运算符，比较运算符，逻辑运算符，三元运算符，运算符的优先级，自增，自减，取余等

女爷i 2022-03-27 01:52 245阅读 0赞

#### 算术运算符：+、-、\*、/、%、++、– ####

var a = 10;
    var b = a + 10;  // b = a+10 = 10+10 =20

注意：

1.  运算时，只能进行同类型运算。如果类型不同，将进行类型转换。
2.  如果 `+` 左右两个操作数都是数值的话，将执行"加法"运算。
3.  如果 `+` 左右有一个操作数是字符的话，那么，另一个值将转成字符串。这两个操作数进行的是"连接"运算。

###### “%” 取余运算符，两个数相除，取余数 ######

var a = 10 % 3;  // a = 1，如果余数不为0，则两个不能整除
    var b = 10 % 2;  // b = 0，如果余数为0，则两个数能除尽

###### "++"自加运算符、自加1 ######

*  "++"可以作前缀(++i)，也可以作后缀(i++)。
 *  如果不赋值的话，i++ 和 ++i 的结果是一样的。
 *  如果要赋值的话，i++ 和 ++i 的结果就不一样了(++在前，先自加再赋值；++在后，先赋值再自加)。

var a = 10;
    var b = a++;//先将 a 的值赋值 10 给 b(b = 10)，a 再自加 a = 11
    var c = ++a;//a先加1(a = 12)，再将值赋值给 c(c = 12)

###### "–"自减运算符，自减1 ######

原理同 “++”

#### 赋值运算符：=、+=、-=、\*=、/= ####

###### “=” 是赋值号，用于变量赋值，将等号右边的 值 或 表达式结果 赋值给 左边的变量（等号右边先运算） ######

例如：

var a = 10 //将数值 10 赋值给 a

###### “+=” 先加后赋值 ######

例如：

a += 10  //展开后 a = a + 10

###### "-="先减后赋值 ######

例如：

a -= 10   //展开后 a = a - 10

###### “\*=” 先乘后赋值 ######

例如：

a *= 10  //展开后 a = a * 10

###### “/=” 先除后赋值 ######

例如：

a /= 10   //展开后 a = a / 10

#### 字符串运算符：+、+= ####

在 JS 中 +、+= 不仅可以用来参与运算也可以用来连接字符串

字符串一般只进行 “连接” 运算，不能进行其它运算

var a = "abc";
    var b = a + "def"; // b = a + "def"; b = "abc" + "def"; b = "abcdef"
    var a = "abc";
    a += 10; // a = a + 10; a = "abc" + 10; a = "abc10"

#### 比较运算符：>、<、>=、<=、**==**、**!=**、**===**、!== ####

比较运算符用于 判断 运算符两边的值是否 符合 运算符的比较关系，比较的结果是布尔值，比较的结果成立时 结果为真（true），比较的结果不成立时 结果为 假（false）

a = 10 > 20;       // a=false
    a = 20 >= 20;       // a=true
    a = 10 % 2 == 0;    // a=true
    a = 10 % 2 == "0";  // a=true
    a = 10 % 3 != 0;    // a=true
    a = 10 % 2 === "0";  //a=false

###### “==” 等于 ######

用于比较运算符左右两边的值是否相等，只比较两个变量的值，而不管类型；只要值一样，结果true，否则结果为 false

var a = 123; // 数值类型变量
    var b = "123"; // 字符串类型变量
    var result = a == b; // 比较 a 与 b 的值是否相等
    console.log(result); // true

###### “===” 全等于 ######

既比较变量，也判断类型。如果类型和值都一样，返回true，否则返回 false

var a = 123; // 数值类型变量
    var b = "123"; // 字符串类型变量
    var result = a === b; // 比较 a 与 b 的 值 和 数据类型 是否相等
    console.log(result); // false

#### 逻辑运算符：&&、||、! ####

逻辑运算符的运算结果有两个 true 或 false

###### “&&” 逻辑与(并且关系) ######

如果运算符左右两个操作数都为 true，则结果即为 true，否则结果为 false

大白话：就是运算符两边的结果都为 真（两个条件同时满足）时，则结果为 true，只要有一个条件不满足（结果为假），运算符的结果即为假

示例：

var a =5, b = 7, c = 9;
    (a<b && b<c) ? document.write('结果为真！') : documen.write('结果为假！');//a<b成立 且 b<c成立，所以结果为真

###### “||” 逻辑或 ######

该运算符的左右两边的值，只要有一个为真，则运算的结果为 true，否则结果为 false

示例：

var a =5, b = 7, c = 9;
    (a>b || b<c) ? document.write('结果为真！'):documen.write('结果为假！');// a > b 不成立，b < c成立；所以运算的结果为真

扩展：

*  运算 && 与 运算符 || 具有惰性运算的特点；
 *  当 && 运算符左侧的值为 假（false）时，运算符右侧的表达式则不会再进行运算；
 *  同理当 || 运算符左侧的值为 真（true）时，运算符运算符右侧的表达式则不会再进行运算
 *  在 JS 中使用逻辑运算符时，比较的数值如果非零即为真，为零时即为假
 *  在 JS 中 `0==false` 的结果为 true，这是因为 JS 中存在隐式转换；false 会转换成 0
 *  在 JS 中 `0+true` 的结果为 1，这是因为 true 被隐式转换成了 1
 *  使用 && 运算符时，如果运算符的右侧的值不是布尔值，则最终运算符的结果也可能不是布尔值
    
     *  左侧的值不为假（true、非零数值、字符串等）且右侧值为字符串时，结果为右侧字符串
        
            var a = '这是一个字符串'
             var result = 3 < 5 && a
             console.log(result) // 这是一个字符串
     *  左侧的值不为假，右侧的值为数值 ，结果为右侧数值
        
            var a = 123
            var result = '这是一个字符串' && a
            console.log(result) // 123

###### “!” 取反运算 ######

该运算符为 一元运算符，对运算符右侧的结果进行取反；右侧的结果为 true 时取反为 false，右侧结果为 false 时取反为 true

!true// flase
    !false // true
    !100 // flase
    !0 // true

#### ? : 三元运算符 ####

所谓 “三元运算符” 就是指三个操作数

语法：条件表达式 ? 结果1 : 结果2

含义：如果 条件表达式 的结果为 true，则执行 “结果1” 的代码；如果条件为 false，则执行 “结果2” 的代码。

其实：三元运算符，就是if else的变形形式。

示例：

var age = 18;
    // age >= 18 条件成立所以执行 结果1 的代码
    age >= 18 ? document.write('成年了！') : document.write('你还小！'); // 成年了！

#### 运算符优先级(由上到下递减) ####

<table> 
 <tbody> 
  <tr> 
   <th>优先级</th> 
   <th>运算符</th> 
   <th>分类</th> 
  </tr> 
  <tr> 
   <td>高</td> 
   <td> ()、.、[]、new </td> 
   <td> 圆括号、 成员访问、<br>需计算的成员访问、new </td> 
  </tr> 
  <tr> 
   <td> |<br>|<br>↓ </td> 
   <td> !、++、-- *、/、% +、- </td> 
   <td> 逻辑非，算术运算符 </td> 
  </tr> 
  <tr> 
   <td> &lt;、&lt;=、&gt;、&gt;= ==、!=、===、!== </td> 
   <td> 比较运算符 </td> 
  </tr> 
  <tr> 
   <td> &amp;&amp;、||、?: </td> 
   <td> 逻辑运算符，条件运算符 </td> 
  </tr> 
  <tr> 
   <td>低</td> 
   <td> =、+=、-=、*=、/=、%= </td> 
   <td> 赋值运算符 </td> 
  </tr> 
 </tbody> 
</table>

.、[]、new、()
     // 逻辑非，算术运算符
     !、++、--
     *、/、% 
     +、- 
     // 比较运算符
     >、<、>=、<= 
     ==、!=、===、!== 
     // 逻辑运算符，条件运算符
     &&、||、?:
     // 赋值运算符
     =、+=、-=、*=、/=、%=

常见运算符的优先级总结：算术运算符 > 比较操作符 > 逻辑运算符 > 赋值运算符