运算符（基础）

r囧r小猫 2022-10-15 12:56 107阅读 0赞

### 运算符 ###

*  含义及分类
 *   *  1、 算术运算符
     *   *  1.1 取余
         *  1.2 自增
         *  1.3 自减
     *  2、 比较运算符
     *   *  2.1 数值和字符串比
         *  2.2 字符串和字符串比
     *  3、逻辑运算符
     *   *  3.1 逻辑与
         *  3.2 逻辑或
         *  3.3 逻辑非
         *  3.4 短路逻辑
     *  4、 位运算符
     *   *  4.1 按位与
         *  4.2 按位或
         *  4.3 按位异或
         *  4.4 按位右移
         *  4.5 按位左移
     *  5、 赋值运算符
     *  6、 三目运算符
     *  7、总练习

# 含义及分类 #

> 由数据本身或者由运算符所连接的操作数据组成的形式  
>   
> 例：1+1.其中1和1是两个操作数据

<table> 
 <thead> 
  <tr> 
   <th>分类</th> 
   <th>划分</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>算术运算符</td> 
   <td>+、-、*、/、%、+ +、- -</td> 
  </tr> 
  <tr> 
   <td>比较运算符</td> 
   <td>&gt;、&lt;、&gt;=、&lt;=、全等于(三个等号)、不全等于(!==)</td> 
  </tr> 
  <tr> 
   <td>逻辑运算符</td> 
   <td>逻辑与、逻辑或、逻辑非</td> 
  </tr> 
  <tr> 
   <td>位运算符</td> 
   <td>按位与、按位或、按位异或、按位右移、按位左移</td> 
  </tr> 
  <tr> 
   <td>赋值运算符</td> 
   <td>=、+=、-=、*=、/=</td> 
  </tr> 
  <tr> 
   <td>三目运算符</td> 
   <td>条件表达式 ？表达式1 ：表达式2</td> 
  </tr> 
 </tbody> 
</table>

## 1、 算术运算符 ##

### 1.1 取余 ###

> 功能：判奇偶 、判闰年等

//第一个数大，第二个数小：正常取余
      console.log(5%3); //2
      //第一个数小，第二个数大：小数本身
      console.log(5%7); //5
      //判奇偶：被2整除则为偶
      console.log(5%2); //1 奇数
      console.log(4%2); //0 偶数
      //判闰年：被4整除
      console.log(2021%4);//1 非闰年
      console.log(2020%4);//0 是闰年
      //隐式转换
      console.log('4'%3);//1
      console.log('4a'%'3');//NaN

### 1.2 自增 ###

> 使用：必须为变量才能自增，是在原数据基础上往上加  
>   
> \++ 单独使用，前置和后置并无区别  
>   
> \++ 赋值中使用，前置和后置有区别

//++单独使用
      var n1=2;
      n1++;//也可写作 ++n1;
      console.log(n1);      //3
    
      //++在赋值中使用
      //① 后置：先使用后加
      var n2=5;
      var n3=n2++;
      console.log(n3);     //5
      //解析：先把n2的值赋值给n3，然后n2再执行自增
      var a='4';
      a++;
      console.log(a);     //5
      //解析：先把a的值转换为数字，再自增
      //② 前置：先加后使用
      var n4=5;
      var n5=++n4;
      console.log(n5);     //6
      //解析：先让n4自增，然后将自增结果赋值给n5

小综述：

① a=b++; 先把b赋值给a，然后b再执行自增；

② a=++b; 先让b执行自增，然后再将自增结果赋值给a

### 1.3 自减 ###

> 使用：必须为变量才能自减，是在原数据基础上往下减

var m1=5;   //3
      var m2=m1--;//5
      var m3=--m1;//3
      console.log(m1,m2,m3);
      //解析：m1先赋值给m2,所以m2=5；然后m1自减为4；
      //     m1先自减，所以m1=3;然后m1赋值给m3,所以m3=3

## 2、 比较运算符 ##

主要看特殊的几个

> == 等于，只比较值是否相同  
>   
> === 全等于，先比较类型，再比较值  
>   
> !== 类型不等或者值不等

### 2.1 数值和字符串比 ###

① 字符串不含字母

//隐式转换：字符串转为数值
      console.log(3>'10');//false

②字符串含字母

//隐式转换：字符串隐式转为数值，因含字母均为NaN
      console.log(3>'10a');//false
      console.log(3<'10a');//false
      console.log(3 =='10a');//false
      console.log(3 === '10a');//true
      console.log(3 !== '10a');//true

小综述：NaN只有和不全等于===及不等于比为true，其它和任何做比包含NaN本身在内的进行运算时，结果都是false

### 2.2 字符串和字符串比 ###

//字符串和字符串比：比首个字符的Unicode码，若相同比下一个
      console.log('3'>'10');//true
      console.log('3'>'20');//true
      console.log('3'>'30');//false
      console.log('3'>'40');//false
      console.log('3'.charCodeAt(),'2'.charCodeAt(),'1'.charCodeAt());//51  50  49

## 3、逻辑运算符 ##

> && 逻辑与（并且）:全真为真  
>   
> || 逻辑或（或者）:一真全真  
>   
> ！ 逻辑非（取反）:true取反false,false取反true

### 3.1 逻辑与 ###

> 练习：声明变量保存用户输入的用名和密码，若用户名是root且密码为123456,打印true，否则打印false。

var uname='root';
      var upwd='123456';
      console.log(uname ==='root' && upwd ==='123456' );//true true 三个等于，类型和数值都相同才行

### 3.2 逻辑或 ###

> 练习：声明变量保存用户输入的值，若是邮箱是yu@126.com，或者手机号是12345678945，又或者用户名是yusang，打印true，否则打印false

var email='yu@126.com';
      var phone='12345678965';
      var uname='yusang';
      console.log(email==='yu@126.com' || phone='12345678965' || uname='yusang');
      //三者有一个为真即可

### 3.3 逻辑非 ###

> 取反即可

console.log(!true);//false
      console.log(!false);//true

### 3.4 短路逻辑 ###

> && 当第一个条件为false的时候，不再执行第二个条件  
>   
> || 当第一个条件为true的时候，不再执行第二个条件

//练习1：查看以下程序是否报错
      var a=5;
      a>10 && console.log(b);//不报错，没结果，不执行
      a<6 || console.log(c);//不执行

//练习2：使用短路逻辑声明一个变量，保存一个和个人的年龄，若满18  打印成年人
      //正确打印
      var age=61;
      age>=18 && console.log('成年人');//成年人
    
      //错误打印-短路逻辑
      var age=10;
      age>=18 && console.log('成年人');//不执行，短路

小综述

短路逻辑的重点是看第二个条件（表达式）是否执行，无需关注整体结果是true还是false.

## 4、 位运算符 ##

> 模拟计算机底层的运算，先将运算的值转为2进制然后运算，当运算完以后再将结果转会成10进制

### 4.1 按位与 ###

> & 从右往左 - 上下对齐后比较。上下都是1，结果1，否则0

console.log(3&5); //1
    console.log(5&7); //5

### 4.2 按位或 ###

> | 从左往右 - 上下对齐。上下都含1，结果1，否则0

console.log(7|10);//15

### 4.3 按位异或 ###

> ^ 从左往右 - 上下对齐。上下都不同，结果1，否则0

console.log(9^13);//4

上述解析：

3&5 5&7 7|10 9^13  
011 101 111 1001  
101 111 1010 1101

--------------------

001 101 1111 0100  
1 5 15 4

### 4.4 按位右移 ###

> 箭头朝哪按位哪移。删除末尾的位数。移动几位删几位

⑤ 10>>1 删除二进制最后1位，即

1010变101，结果为5

② 10>>2 删除二进制最后两位，即

1010变10，结果为2

### 4.5 按位左移 ###

> 在末尾补0，移动几位补几个0

① 5<<1 向左移1位，然后在末尾补一个0

101变1010，结果为10

② 10<<2 向左2位，然后在末尾补两个0

1010变101000，结果为40

## 5、 赋值运算符 ##

> = += -= \*= /= %= 等

//示例1
    var a=1;
    a+=1;//等价于 a=a+1; 
    console.log(a);
    
    //示例2
    var str='a';
    str+='b';//str=str+'b';
    atr+=c;//str=str+'c';
    console.log(str);//abc

## 6、 三目运算符 ##

> 由两个运算符连接的三个操作数据或者表达式  
>   
> 语法：条件表达式 ？表达式1 ：表达式2  
>   
> 若条件表达式为true，执行表达式1，否则执行表达式2

//练习：判断一个人是否满18岁，若是打印成年人，否则打印未成年人
      var age=22;
      var res=age>=18?'成年人':'未成年人';
      console.log(res);

## 7、总练习 ##

> 声明一个变量，保存任意一个年份。判断这个年份是否为闰年。使用短路逻辑，如果是闰年打印’闰年’（优先级：&& > ||）

var year=2020;
      console.log(year%4===0 && year%100!==0 || year%400===0);//true
      (year%4===0 && year%100!==0 || year%400===0) && console.log('闰年');//优先级&&>||