【学习笔记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 );

【学习笔记11】JavaScript赋值运算符和逻辑运算符_第1张图片

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

【学习笔记11】JavaScript赋值运算符和逻辑运算符_第2张图片

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

【学习笔记11】JavaScript赋值运算符和逻辑运算符_第3张图片

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

你可能感兴趣的:(JavaScript,javascript,前端,开发语言)