【学习笔记11】JavaScript赋值运算符和逻辑运算符

一、赋值运算符

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

（一）赋值运算符的概念

赋值运算符	意义
= （等于赋值）	将右侧表达式结果赋值给左侧变量储存 等于赋值执行的是覆盖赋值效果，后赋值的数据会覆盖之前存储的数据
+= (加等赋值）	1、左侧变量储存原始数据的基础上累加，右侧表达式执行结果 再将最终的运算结果赋值给左侧变量储存 2、计算右侧表达式 ，左侧变量储存的原始数据的基础上，累加右侧表达式结果 最终的结果再赋值给左侧变量储存
*= (乘等赋值)	在左侧变量储存原始数据的基础上累乘，右侧表达式执行结果 再将最终的运算结果赋值给左侧变量储存
/= (除等赋值)	在左侧变量储存原始数据的基础上累除，右侧表达式执行结果 再将最终的运算结果赋值给左侧变量储存
%= (模等赋值)	左侧变量储存的原始数值是被除数右侧，表达式的执行结果是除数 将余数赋值给左侧变量储存
-= (减等赋值)	在左侧变量储存原始数据的基础上累减，右侧表达式执行结果 再将最终的运算结果赋值给左侧变量储存

1、加等赋值

        var a = 100 ;
        // 展开语法 a = a + (50) ;
        a += 50 ;

        console.log( a );    //150

2、减等赋值

        var b = 100 ;

        // 展开 b = b - (40) ;
        b -= 40 ;
        console.log( b );   //60

        var c = 100 ;

        // 1、展开语法 c = c - (40+20) ;
        // 2、先计算右侧表达式的结果是 40+20 也就是 60
        // 3、左侧变量储存原始值是100, 减去右侧表达式的结果60
        // 4、最终结果是40, 赋值给左侧变量储存 
        c -= 40 + 20 ;
        console.log( c );   //40

3、模等赋值

        var d = 100 ;

        // 展开 d = d % 50 ;
        d %= 50 ;
        console.log( d );   //0

4、重点

1、如果有字符串参与 += 执行的是字符串拼接效果

        // += 有字符串参与执行的是字符串拼接操作
        var str = '' ;

        str += '
';
            str += '我是js程序拼接的内容';

            str += '
';
                str += '
我是第一个li
';
                str += '
我是第二个li
';
                str += '
我是第三个li
';
                str += '
我是第四个li
';
                str += '
我是第五个li
';
            str += '
';
        str += '
';

        console.log( str );
        document.write( str );

2、执行 += -= *= /= %= 操作的标签要赋值原始值

        // 变量要赋值存储原始值 
        var a = 100 ;
        a += 50 ;

        // 只定义变量b,没有给变量b赋值存储的数据
        var b ;
        b += 50 ;                  //+=  -=  *=   /=    %= 都是NaN
        console.log( b );          //NaN

3、为什么结果是NaN？

1. 变量b只是定义，没有赋值数据， JavaScript自动给没有赋值的变量赋值 undefined
2. b += 50 展开就是 b = b + 50 ; 也就是 b = undefined + 50 ;
3. 没有字符串参与，执行的是加法运算
4. undefined + 50是将undefined自动转化为数值类型 — NaN，也就是 NaN + 50
5. 有NaN参与的运算结果任然是 NaN

（二）自增自减运算符（++ --）

• 自增自减运算符，每次执行，变量储存的原始数据都会自增1或者自减1
• 可以理解为 ++ 就是 +=1 的效果
• 可以理解为 – 就是 -=1 的效果

• 但是 ++ 和 – 和 +=1 -=1 的执行原理完全不同

	var a = 100 ;
	
	// 相对于执行累加1的效果 
	// 每次执行++操作都会累加1
	a++;
	a++;
	a++;
	a++;
	a++;
	a++;
	console.log( a );                对应结果为：106

	var b = 100 ;
	
	// 相对于执行累减1的效果
	// 每次执行--操作都会累减1
	b--;
	b--;
	b--;
	b--;
	b--;
	console.log( b );            对应结果为：95

自增自减 和 +=1 -=1 的区别

1、+=1和 -=1

• 直接执行算数运算
• 在变量储存原始数据的基础上，累加或者累减操作

	var a = '100' ;
	// 加等操作有字符串参与，执行的是字符串拼接操作
	// 字符串'100' 拼接数值100 结果是 100100
	a += 100 ;
	console.log( a );

2、++ 和 –

• 先将变量储存的原始数据，转化为数值类型
• 对转化结果，执行累加1或者累加1的操作
• 也就是变量储存的原始数据，可以自动转化为数值类型 就支持 ++ – 的操作

	var b = '100';
	// ++操作，先将变量储存的数值转化为数值类型，再执行加1操作
	// 变量b存储的是字符串'100'，专业为数值类型是数值100
	// 对数值100执行+1操作，执行结果是 101
	b++;
	console.log( b );  

	// 变量存储的原始数据，只要可以转化为数值类型就支持 ++ -- 操作
	var a = '2e3' ;
	a++ ;
	console.log( a );    //2001

二、逻辑运算符

（一）逻辑与 &&

表达式1 && 表达式2

• 口诀：两真且为真
• 如果两个表达式结果都是true，整个逻辑运算符的结果是true
• 如果有一个表达式的结果是false，整个逻辑运算符的结果是false

（二）逻辑或 ||

表达式1 || 表达式2

• 口诀：有真或为真
• 如果两个表达式结果都是false，整个逻辑运算符的结果是false
• 如果有一个表达式的结果是true，整个逻辑运算符的结果是true

（三）逻辑非 !

! ( 表达式 )

• 口诀：假非真，真非假
• 如果表达式结果是true，!(表达式)取反的结果就是false
• 如果表达式结果是false，!(表达式)取反的结果就是true

（四）逻辑运算案例

案例要求：

判断 10 - 50 范围之间
条件1大于等于10
条件2小于等于50
两个条件之间的关系是都要满足，也就是并且的关系，也就是逻辑与
数值 >= 10 && 数值 <= 50
​计算机程序判断在 10 - 50 范围之内

// 通过输入框输入数据，判断输入数值的范围是 10-50 之间
        var num = Number( window.prompt('请您输入数据') );

        if( num >= 10 && num <= 50 ){
            // 如果逻辑与的整体结果是true 
            // 证明两个表达式的结果都是true 
            // 也就是数值同时满足大于等于10和小于等于50两个条件，即数值在10 - 50范围内 
            console.log( `您输入的数值${num}在10-50范围内` );
        
        }else{
            // 如果逻辑与的整体结果是false
            // 证明两个表达式至少有一个结果是false
            // 也就是大于等于10和小于等于50有一个不满足，即数值不在10 - 50范围内
            console.log( `您输入的数值${num} 不在 10-50 范围内` );
        }

（五）逻辑运算符短路求值

• 所谓的短路求值，是逻辑运算符的一种执行机制或者执行原理
• 为了提高计算机程序的执行效率
• 如果第一个表达式已经可以决定整个逻辑运算符的结果，第二个表达式不触发执行

1、逻辑与

• 第一个表达式结果是false
• 第二个表达式不会执行

        var a = 100 ;
        var b = 200 ;

        // 第一个表达式的结果是 true,不能决定整个逻辑运算符的结果 
        // 第二个表达式会触发执行,也就是会执行 b++ > 10 ,即会执行b++ 操作 
        a > 10 && b++ > 10 ;
        // 执行结束 b 执行 b++ 变成 201
        console.log(a);     //100
        console.log( b );   //201

	/*变形*/
	    var c = 100 ; 
        var d = 200 ;
        // 第一个表达式 c < 10 的结果是 false ;
        // 第一个表达式已经可以决定整个逻辑运算符的结果 
        // 第二个表达式不会触发执行, 也就是 d++ > 10不会触发执行
        // 也就是 d++ 不会执行
        c < 10 && d++ > 10 ;
        // 执行之后d仍然是 200 
        console.log( d );

2、逻辑或

第一个表达式结果是 true
第二个表达式不会执行

（六）逻辑运算符的赋值操作

逻辑运算符的赋值操作是使用逻辑云算符，执行赋值的一种特殊语法

逻辑运算符执行赋值操作的原理

1、逻辑与

有短路求值现象，也就是第一个表达式结果是false，第二个表达式不会触发执行

赋值原理

• 第一个表达式，如果自动转化为布尔值 false，整个逻辑运算符，赋值第一个表达式的值
• 第一个表达式，如果自动转化为布尔值 true ，整个逻辑运算符，赋值第二个表达式的值

        var d = 50 && 100 ;
        console.log( d );    // 100

        var e = null && 100 ;
        console.log( e );   //null

2、逻辑或

有短路求值现象，也就是第一个表达式结果是true，第二个表达式不会触发执行

赋值原理

• 第一个表达式如果自动转化为布尔值true，整个逻辑运算符，赋值第一个表达式的值
• 第一个表达式如果自动转化为布尔值 false ，整个逻辑运算符，赋值第二个表达式的值

        // 第一个表达式是50,自动转化为 true
        // 给变量b赋值的是第一个表达式的值50
        var b = 50 || 100 ;
        console.log( b );

        // 第一个表达式是0,自动转化为false
        // 给变量c赋值的是第二个表达式的值100
        var c = 0 || 100 ;
        console.log( c );

3、三元运算符

三元运算符也可以达到相同的效果，应用效果更好。使用更多

        var a = null ;
        var f = a === null ? a : 100 ;
        console.log(f);   //null