JavaScript中的运算符

JavaScript中的运算符

    // 所谓的运算符,就是操作变量的符号
    // 在计算机程序中,使用特殊的定义好的符号,来对变量中的数据进行操作

    // 运算符的分类

    // 算术运算符 / 数学运算符 
    //   +  -   *   /    %

    // 赋值运算符
    //   =   +=   -=   *=    /=    %=

    // 比较运算符
    //   >    <   >=   <=   ==  ===   !=  !==

    // 逻辑运算符
    //   &&    ||   ! 
    //  |  在回车上方的按键  正常按是 \  反斜杠  shift + 按键 是 | 

// 数学运算符 / 算术运算符

    // + 加号  如果都是数值,执行加法运算
    //        如果有字符串参与,结果是字符串拼接

    // - 减号  加法运算

    // * 乘号  乘法运算

    // / 除号  除法运算
    //         除数,也就是第二个数值,不能为 0
    //         除数是0 , JavaScript中执行结果是  Infinity  表示无穷大

    // % 求余数 / 求模 符号

    // console.log( 2 / 0 );


    // % 求模运算符 / 求余数运算符
    // 余数在计算机中,也称 模

    // console.log(10 % 3);

    //   10 / 3   --- 结果是 商 3  余数 1   1就是我们就余数运算的结果
    
    //   10 %  3   ---  1
    //   10 % -3   ---  1
    //   -10 % 3   ---  -1
    //   -10 % -3  ---  -1

    // 求余数,也叫求模 执行结果 与被除数的符号相同
    // 如果被除数是正数,余数也是正数
    // 如果被除数是负数,余数也是负数

    console.log(10 % 3);
    console.log(10 % -3);
    console.log(-10 % 3);
    console.log(-10 % -3);

    // 如果整除,余数是 0

    console.log( 10 % 2)


    // 总结:
    //   1, +加号,有可能是字符串拼接,有可能是加法运算
    //   2, % 求余数/求模  
    //          余数的正负 与 被除数(第一个数值)的正负相同
    //          如果整除 余数 是 0 

// 赋值运算符
// = += -= *= /= %=

    // =  赋值运算符  将 符号 右侧的内容,赋值给左侧的内容

    // var int1 = 100 + 2 * 5;  // 将右侧的表达式,执行结果赋值给左侧的int1变量存储

    // console.log(int1);

    // 重复赋值 --- 对一个变量进行多次赋值

    // int1 = 220;   // 新赋值的数据,会覆盖变量之前存储的数据
                  // 一个变量中,只能存储一个数据
    // 原理 : 瓶子里装着水,现在要装油,需要先把水倒掉,再装油
    // console.log(int1); 

    // +=   加等赋值
    // 在左侧存储数值的基础上,加上右侧内容的执行结果,再把最终的数值赋值给左侧变量
    
    // 变量中原始存储的数据是100
    var int2 = 100;
    // 在原始存储数据的基础上,再加上右侧的结果
    // 原始数据100 + 右侧的结果400 最终的结果是500
    // 最后将这个结果500 赋值给变量 int2存储
    // 之前存储的 100 就被新的数据 500 覆盖
    // += 的展开形式 就是  int2 = int2--存储的是100 + 400 
    // 原始数值 + 右侧的内容, 最终再赋值给 原始数值
    int2 += 400;
    // console.log(int2);

    // 要特别注意 , 是将右侧的整体执行结果 , 加上原始数值 , 赋值给左侧内容
    var int3 = 100;
    int3 += 100 + 2*3; 
    // console.log(int3);

    // += 本质上是执行加法操作,
    // 如果是有字符串参与,执行的字符串拼接操作

    var str1 = '北京';
    str1 += '今天天气不错';
    // console.log(str1);

    // 可以利用 += 操作,在字符串中,来拼接变量
    // 我今天考试得了100分; '我今天考试得了'  + 变量 + '分'
    // 复杂内容是有时候会用到这种+=拼接语法
    var res = 100;

    var str2 = '我今天考试得了';
    str2 += res;
    str2 += '分';

    // console.log(str2);

    // -=  减等运算符
    // 在变量存储的原始数据基础上,减去右侧的执行结果,再将最终结果赋值给左侧变量存储
    // 先把右侧的表达式,计算出一个结果,再与左侧变量进行运算

    // 变量 -= 表达式 
    // 展开形式   变量 = 变量 - 表达式

    var int2 = 100;
    
    int2 -= 100 + 100;  // int2 = int2 - (100 + 100)
    
    // int2 本身存储的数值是100 先计算右侧的内容 100+100 结果是200
    // 使用200的结果来参与运算
    // int2 = int2--存储的是100 - 200
    // 最终结果是 -100

    // console.log(int2); 

    // *=  乘等赋值运算符
    // 在变量存储的原始数据基础上,乘以右侧的执行结果,再将最终结果赋值给左侧变量存储

    var int3 = 100;
    int3 *= 2+3;  // int3 = int3 * (2+3)
    // console.log(int3);


    // /=  除等赋值运算符
    // 在变量存储的原始数据基础上,除以右侧的执行结果,再将最终结果赋值给左侧变量存储
    var int4 = 100;
    int4 /= 2+3;  // int4 = int4 / (2+3)

    // %=  模等赋值运算符 / 求余等赋值运算符
    // 将左侧变量存储的原始数值,作为被除数
    // 将右侧的执行结果,作为除数
    // 执行求模 / 求余数运算符
    // 再将最终执行结果赋值给左侧变量存储

    var  int5 =100;
    // int5 %= 2+3;   // int5 = int5 % (2+3)  整除结果是0

    
    // 特别注意:
    // 如果执行 +=  -=  *=  /=  %= 赋值运算符
    // 左侧变量必须被正确定义
    // 如果变量没有被正确定义

    // 没有定义int6,执行执行 += 这样的操作,会报错
    // 在当前行声明也会报错
    // 一定要提前声明好

    // var int6;  
    // 如果只声明不赋值,int6中,存储的是undefined
    // += 操作 就是  int6 = int6--undefined + 100 有NaN参与运算,结果是NaN 

    int6 += 100;
    console.log(int6);

    // 总结:
    // 1, JavaScript语法规定
    //    var int += 100  这样的定义变量,是错误语法
    //    +=  -=   *=  /=  %=  之前不能有关键词 var 

    // 2, 变量必须要提前定义好
    //      如果没有定义,执行结果是 报错
    //      如果只定义没有赋值,执行结果是 NaN

    // 3, 一定是先计算出右侧的执行结果,再与变量的原始数据进行运算

// 逻辑运算符 和 逻辑赋值

    // 逻辑运算符的种类
    
    // 逻辑与  表达式1 &&  表达式2
    // 逻辑与 是 当两个表达式的结果都是 true 时, 整个逻辑与的结果是true
    //          只要有一个表达式的结果是false , 整个逻辑与的结果是false
    // 总结 : 都是 true 才是 true 有一个是 false ,就是false 

    // 逻辑或  表达式1 ||  表达式2
    // 逻辑或 是 当两个表达式的结果都是 false 时, 整个逻辑或的结果是false
    //          只要有一个表达式的结果是true ,整个逻辑或的结果就是true

    // 逻辑非  !表达式 
    // 逻辑非 是对表达式的结果 取反

    // 逻辑运算符 必须要根据 表达式1和表达式2的布尔值 来确定逻辑运算符的最终结果
    // 因此 表达式1 和 表达式2 如果执行结果不是 布尔值 都会自动转化为 布尔值 

    // 举例说明
    
    // 逻辑与 : 你想找个啥样的女朋友~~~  
    //          回答 : 年轻 并且 漂亮 
    //          也就是 年龄和漂亮 两个条件 都要满足,才可以 

    // 逻辑或 : 你想找个啥样的女朋友~~~  
    //          回答 : 年轻 或者 漂亮 
    //           也就是 年龄和漂亮 两个条件 满足一个就可以

    // 逻辑非 : 你想找个啥样的女朋友~~~ 
    //          回答 : 不是男的就行
    //           也就是 对 男 这个结果 取反 

    // 具体怎么应用


    
    // demo1 
    // 有一个数值 如果这个数值 大于 20     就输出  大于20
    //                       小于等于 20  就输出 小于或等于20

    // 总结: 如果是 NaN 参与的 任何与数值的比较判断,结果都是false

    var int = 50;

    if( int > 20 ){
        console.log( int + '大于20' );
    }else{
        console.log( int + '小于或等于20' );
    }


    // demo2
    // 判断一个数值,如果是 20-50 之间,就输出 在20-50之间
    //             如果不是20-50之间,就输出 不再20-50之间
    // 所谓的 在 20-50 之间 是要同时满足两个条件
    // 数值 >= 20  并且 数值 <= 50
    // 转化为 表达式 :   变量 >=20 && 变量 <=50  
    //                        逻辑运算符,且

    var int2 = 60;
    if( int2 >= 20 && int2 <= 50 ){
        console.log( `${int2}在20-50之间` );
    }else{
        console.log( `${int2}不在20-50之间` );
    }


    // demo3
    // 如果数值 小于20 或者 大于50 就输出 在 20-50范围之外
    //                      否则 就输出 在 20-50范围值内

    var int3 = 60;

    if( int3 < 20 || int3 > 50 ){
        console.log(int3 + '不在20-50范围内')
    }else{
        console.log(int3 + '在20-50范围内')
    }

    // 判断 一个数值 在 20-50 范围之内可以写成  变量 >= 20 && 变量 <= 50
    // 判断 一个数值不在 20-50 范围之内,可以写成  !(变量 >= 20 && 变量 <= 50)
    ///                                       变量 < 20 || 变量 > 50
    //                                         是要能实现,哪个理解哪个会写,用那个

// 逻辑运算符的短路求值
// 什么是短路求值? 为了提高程序的执行效果,如果最终的结果已经确定,多余的程序就不会执行

    // 逻辑与 表达式1 && 表达式2
    // 两个表达式的结果,都是true,逻辑与的结果才是true
    // 如果有一个表达式的结果是false,整个逻辑与的结果,就会是false

    // 当 第一个表达式 的结果是 false 时, 不管第二个表达式的结果是什么
    // 整个逻辑与 的结果已经可以确定是 false
    // 此时第二个表达式的执行 已经是 多余的了,就不会再执行了

    // 逻辑与 第一个表达式结果是 false  第二个表达式的内容 不执行


    // 逻辑或 表达式1 || 表达式2
    // 当 两个表达式都是false , 逻辑或的结果是false
    // 如果是一个是true , 逻辑或的结果就是 true

    // 当 第一个表达式的结果是 true , 以及可以决定整个逻辑或的结果是 true
    // 第二个表达式的执行结果,没有意义,表达式2,不会执行

    // 逻辑或 第一个表达式结果是 true  第二个表达式的内容 不执行




    var int1 = 100;

    var int2 = 200;

    // int1 > 10 结果是 true
    // 需要第二个表达式来确定整个逻辑与的结果
    // 此时第二个表达式会执行, int2 会赋值 为 100
    int1 > 10  && ( int2 = 100 )  ;
    console.log(int2);

    // 表达式1,结果是false,已经可以确定,逻辑与的结果是false
    // 表达式2,的执行结果,不会影响整个逻辑与的结果
    // 表达式2不会执行 int2 = '我是北京' 这个赋值操作不会执行, int2仍然是100
    int1 < 10  && ( int2 = '我是北京' )  ;
    console.log(int2);


    // 逻辑或

    var int3 = 300;
    var int4 = 400;

    // 逻辑或,第一个表达式是false,无法确定整个逻辑或的结果
    // 需要执行第二个表达式
    int3 > 1000 || ( int4 = '我执行了' )

    // 逻辑或,第一个表达式是true,已经可以确定整个逻辑或的结果是true
    // 不需要执行第二个表达式 , int4 还是 存储 我执行了
    int3 < 1000 || ( int4 = '我其实没有执行,就这么着吧' )

    console.log( int4 );

// 在实际项目中,往往经常使用逻辑运算符,给 变量 进行 赋值 , 赋值默认值

    // 定义变量但是没有赋值,int中存储的是undefined
    var int = 100 ;

    // int本身没有赋值,str,也没有赋值

    // 执行逻辑运算符 int 是 undefined 转化为布尔类型 是 false
    // 逻辑或的一个表达式是 fasle , 就会执行第二个表达式
    // 也就是先个str 赋值 undefined 在给str 赋值 500 
    // 那么 str 最终存储的数值 是 500

    // 当 int 没有 数值存储时, 给变量赋值的是默认值 

    // 如果 int 中有数值 是100 , 转化为 布尔值 是true
    // 逻辑或第一个表达式是 true, 不会执行第二个表达式
    // 只会给 str 赋值100
    var str = int || 500 ;

// 逻辑运算符

    // 逻辑运算符的作用:
    //   多个条件 通过 逻辑运算符 来执行一个最终的判断结果

    // 逻辑与  表达式1 && 表达式2
    // 逻辑或  表达式1 || 表达式2
    // 逻辑非  !(表达式)

    // 逻辑与:
    //   都是 true 才是 true , 见 fasle 就是 false 

    // 逻辑或:
    //   都是 false 才是 false , 见 true 就是 true

    // 逻辑非:
    //   对结果取反

    // 逻辑表达式,一定要根据 每个表达式的布尔值 来判断,逻辑表达式的最终结果
    // 因此 如果 表达式 内容不是布尔值,会自动转化为布尔类型
    
    // 短路求值
    // 逻辑与 : 第一个表达式 结果是 false , 第二个表达式不会执行
    // 逻辑或 : 第一个表达式 结果是 true  , 第二个表达式不会执行

    // 逻辑赋值 / 短路赋值

    // 逻辑或的赋值  变量 = 变量1 || 默认值(根据项目需求而定的数值)
    
    // 当 变量1 的内容, 转化为布尔值是 false 
    // 此时默认值 , 也会执行
    // 也就是 给 变量 会进行两次赋值 第一次赋值 变量1 第二次赋值默认值
    // 最终 变量中 存储的是 默认值

    // 当 变量1 的内容, 转化为布尔值是 true
    // 此时默认值 , 不会执行
    // 变量中只会赋值 变量1 的内容

// 三元运算符
// 所谓的 三元 / 三目 运算符
// 值得是有 三个表达式来参与程序的执行

    // 有一个表达式参与程序的执行,称为 一元 / 一目运算符
    //     ++  --  !   
    // 有二个表达式参与程序的执行,称为 二元 / 二目运算符
    //     大部分运算符都是 二元运算符

    // 有三个表达式参与程序的执行,称为 三元 / 三目运算符
    //     表达式1 ? 表达式2 : 表达式3  

    // 通过 表达式1 的 执行结果的布尔值来进行判断
    //    如果 表达式1 执行结果是 true  执行 表达式2
    //    如果 表达式1 执行结果是 false 执行 表达式3 

    // 三元运算符,就是简单的if判断

    // 如果 数值 大于 20, 输出 数值大于20
    //        小于等于20, 输出 数值小于等于20
    
    var int = 2;

    if(int > 20){

        console.log( int + '大于20' );

    }else{

        console.log( int + '小于或等于20' );

    }

    int > 20 ? console.log( int + '大于20' ) : console.log( int + '小于或等于20' );