js中的运算符有什么？

蔚落 2023-06-15 06:49 6阅读 0赞

## js中的运算符大致分为俩种，分别是算数运算符（连接运算符），比较运算符，逻辑运算符，赋值运算符 ##

##### 1.赋值运算符 #####

首先我们先来说一说赋值运算符（=），他只有一个最最基础的作用，就是将 等号 右边的数据，赋值 给等号 左边的变量。 例如：

var a = 10;
    /*  
    var 式声明变量
    a 就是我们的变量
    然后我们将右边的10 赋值给我们的a，这样 我们的a 就是10了
    */
    console.log(a);// 10

##### 2.算数运算符 #####

讲完赋值运算，我们就可以进行比较基础的简单运算了，算数运算符有， + - \* / ，%(取余)， ++(自增)， --(自减) ， += ， -= ， \*\*= ， /= ， %= ，下面我们就讲解一下什么叫做算数运算符， 例：

var b = 1 + 1;
    console.log(b); // 2
    b = 5 - 2;
    console.log(b); // 3
    b = 5 * 2;
    console.log(b); // 10
    b = 6 / 2;
    console.log(b); // 3
    b = 5 % 2;
    console.log(b); // 1
    b++; // 2
    b--; // 1
    b += 10;// b = b + 10 ——> 11
    b -= 10;// b = b - 10 ——> 1

看了上面的代码，我相信加减乘除我们就可以不用去去不过多的阐述了，大家应该都有所了解，下面我来帮大家解释以下什么叫做 %(取余) ， ++(自增) ， --(自减)， += ， -= ， \*\*= ，/= ， %=

首先是%(取余) ，什么是%(取余)呢？取余就是我们小学时候学的除法里面的余数，比如 6 / 2 = 3 …0,我们称为 6 除以 2 商3余0，这个0 就是我们的余数，再比如 上方的 5 / 2 = 2…1,这样来看我们就可以很清除的看到上方b的答案为什么是1了。( b = 5 % 2; console.log(b); // 1 )

下面就是我们的自增和自减，自增代表着自身增加1，但是在自增符号中，有着俩种形式 大家比较容易弄混淆，例如：

var c = 1;
    var d = c++;// d = 1  ， c = 1 + 1 =2(先赋值，后自增)
    var d = ++c;// c = 2 + 1 = 3 ， d = 3(先自增，后赋值)

来，我们来看为什么都是自增但是答案和我们预期的有所不同呢？  
c++，加号 在变量的后面，我们称它为后加加，规则是先赋值，然后再自身+1，++c，加号在变量的前面，我们称他为前加加，规则是先自身+1，然后在赋值，但是不管是前加加还是后加加，我们自身变量在运算后都会自增1。  
下面就让我们来练习一下：

var e = 10;
    var f = e++ + e++ + ++e

我们的答案是34，不知道同学们有没有算对，下面我就来给大家说一下运算的过程。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70]

同理a-- 和 --a，也是这样的逻辑。

\+=和-=之类的你看我上方的注释，应该就能看懂，他就是 自身+后面你输入的值。

###### 拼串 ######

拼串是 + (加号)的一个特殊 用法，并且 当且仅当 在 + 前后 有一个字符串的存在时，他会拼接字符串前后的值，而不是进行计算，例如：

var hello = '你好';
            var address = '北京';
            var time = 2019;
            var res = hello + address +time;
            console.log(res);//'你好北京2019'

并且只要 有 字符串 的 加号，那么 所有类型 都是拼接！所有类型!  
而不是加减

3.比较运算符  
下面的比较运算符还是比较简单的，它有  
> 大于  
< 小于  
>= 大于等于  
<= 大于等于  
== 等于  
=== 全等  
!= 不等于  
! == 不全等于  
上面的大于，小于，大于等于，小于等于，我就不多加阐述了，我相信大家都可以明白，下面我就来解释剩下的比较运算符。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70 1]  
== 相等 ，他有着Number的隐式转换，只要值相等就相等  
===全等，只有全部相同，左右俩边完全相才是true  
!=,不等，只看大小 不看数据类型 true，不等 ，false，相等  
! ==,不全等，只有左右俩边【相同】才能返回false，除了这个全是true

#### 4.逻辑运算符 优先级（!>&&>||） ####

最后就是我们的逻辑运算符了，他有 !(非),&&(且),||(或)，其中比较有技巧和难度的就是&&和||了，首先我们从最简单的！开始讲起。

###### !(非)，就是取反，!true = false , !false = true; ######

var a = !true == false;//true
             var b = !false == true;//true

###### &&和|| ######

接下来我们就开始我们的&&和||，如果你们有学习过js或者其他编程语言的，那么请你们先忘记之前所学，因为我讲的可以和你们之前学到的可能会有所不同，因为他不仅仅是 判断，他同样可以输出！例如：

var a = 1 && 2;
    console.log(a);//2
    var a = 0 && 2;
    console.log(a);//0
    --------------------
    var b = 1 || 2;
    console.log(b);//1
    var b = 0 || 2;
    console.log(b);//2

大家是否很奇怪，为什么判断true和false的运算符可以这样，下面我就给大家讲一下原理。  
其实在计算机中，&&的原理就是当第一个值为 true 的时候，他就直接返回 第二个值，当第一个值为false时，就返回第一个：

###### && ######

var z = x && y;
    当x转Boolean时，为true，则直接输出y
    当x转Boolean时，为false，则直接输出x

###### || ######

||的原理就是当第一个值为 true 的时候，他就直接返回 第一个值，当第一个值为false时，就返回第二个：

var z = x || y;
    当x转Boolean时，为true，则直接输出x
    当x转Boolean时，为false，则直接输出y

##### 最后小练习 #####

// 1:求值。要求写出运算过程》
        var x = 0; 
        var y = 0;
        var z = 1;
        x = (y++ + ++y)*z;
        z += ++y
    
        // 2:求下面那个数列发生的类型转化；转化结果是什么？
        var num = ''+1;
        var num2 ='wangjiaru' - 250;
        var num3 = 'wangiaru' + true + {
        }
        var num4 = 'wangjiaru' + false -2;
        var num5 = 1-'';
        var num6 = '123'-undefined;
    
        // 3: 求下面变量保存的结果是什么？ 要求过程
        var res = 1<2 && '';
        var res1 = {
        } && '王加入';
        var res2 = {
        } && {
        name:'wangjiaru'};
        var res3 = 'wangjairu'&&1&&{
        }&&0;
        var res4 = ''||true;
        var res5 = true || 'wang' || false;
        var rese6  = {
        } || {
        name:'a'};
    
        var res7 = (1>2)||(true>false)&&(!0);
        var res8 = !'wangajiru';

下方是答案和解析

// 1:求值。要求写出运算过程》
            var x = 0;
            var y = 0;
            var z = 1;
            x = (y++ + ++y) * z;
            //   (0 + 2)*1  
            //x = 2  y =2  z = 1
            z += ++y
            // z = 3 + z = 3 + 1
            // z = 4
    
    
            // 2:求下面那个数列发生的类型转化；转化结果是什么？
            var num = '' + 1;                       // '1' 拼接
            var num2 = 'wangjiaru' - 250;           // NaN  Number
            var num3 = 'wangiaru' + true + {
        }       // 'wangiarutrue{object Object}'  拼接
            var num4 = 'wangjiaru' + false - 2;     // NaN 拼接和Number
            var num5 = 1 - '';                      // 1    Number
            var num6 = '123' - undefined;           // NaN Number
    
    
            // 3: 求下面变量保存的结果是什么？ 要求过程
            var res = 1 < 2 && '';                          // ''
            var res1 = {
        } && '王加入';                      // '王加入'
            var res2 = {
        } && {
         name: 'wangjiaru' };         // { name: 'wangjiaru' }
            var res3 = 'wangjairu' && 1 && {
        } && 0;         // 0
            var res4 = '' || true;                          // true
            var res5 = true || 'wang' || false;             // true
            var rese6 = {
        } || {
         name: 'a' };                // {}
            var res7 = (1 > 2) || (true > false) && (!0);   // (!0)——> true
            var res8 = !'wangajiru';                        // false     Boolean

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191120203107397.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191120205759685.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzIzMDU3,size_16,color_FFFFFF,t_70