JavaScript - 运算符

最新推荐文章于 2025-05-03 16:34:39 发布

原创最新推荐文章于 2025-05-03 16:34:39 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了JavaScript中的各类运算符，包括算术运算符、赋值运算符、自增自减运算符、比较运算符及逻辑运算符。通过具体示例展示了不同运算符的功能和用法。

算术运算符

<script>
	console.log( 5 + 2 )  // 5 + 2 = 7
    console.log( 5 - 2 )  // 5 - 2 = 3
    console.log( 5 * 2 )  // 5 X 2 = 10
    console.log( 5 / 2 )  // 5 / 2 = 2.5
    console.log( 5 % 2 )  // 5除以2的余数  5 % 2 = 2 余 1   结果是 1
    // m % n  结果永远在 0 ~ n-1 之间
</script>

赋值运算符

<script>
	var a = 10
	a += 5     // 相当于  a = a + 5    = 15
	a -= 3     // 相当于  a = a - 3    = 7
	a *= 3     // 相当于  a = a * 3    = 30
	a /= 6     // 相当于  a = a / 6    约等于 1.7
	a %= 4     // 相当于  a = a % 4    = 2
</script>

自增 ++

<script>
	let i = 1
	i++                 // 在原有值的基础上加1
	console.log( i )    // 2
    
    let a = 1
    let b = a++        // 先把 a 原来的值赋值给 b, 然后 a 再加1
    console.log(a, b)  // 2 1
    
    let m = 1
    let n = ++m        // 先让 m 加1, 然后再把 m 新的值赋值给 n
    console.log(m, n)  // 2 2
</script>

自减 –

<script>
	let i = 1
	i--                // 在原有值的基础上减1
	console.log( i )   // 0
    
    let a = 1
    let b = a--        // 先把 a 原来的值赋值给 b, 然后 a 再减1
    console.log(a, b)  // 0 1
    
    let m = 1
    let n = --m        // 先让 m 减1, 然后再把 m 新的值赋值给 n
    console.log(m, n)  // 0 0
</script>

比较运算符

比较的结果是布尔值(boolean)

<script>
    console.log( 5 > 2 )    // 大于 (true)
    console.log( 5 < 2 )    // 小于 (false)
    console.log( 5 == 2 )   // 等于 (false)
    console.log( 5 != 2 )   // 不等于(true)
    console.log( 5 >= 2 )   // 大于等于(true)
    console.log( 5 <= 2 )   // 小于等于(false)
    
    console.log( 7 == '7')  // true  字符串转为数字, 再比较,所以相等
    console.log( 7 === '7') // 全等于(false) 要求符号两边类型一致, 左边数值,右边字符串,所以不相等
</script>

逻辑运算符

与 &&

真真为真: 两边同时为真, 结果才为真

一假为假: 只要有一边为假, 结果就为假

<script>
    console.log( true && true )   // true
    
    console.log( false && true )  // false
    console.log( true && false )  // false
    console.log( false && false ) // false 
  
    // 如果两边不是布尔值, 运算结果 就是对结果起最后决定作用的那个值
    console.log( 5 && 7 ) // 7
    console.log( 5 && 0 ) // 0
    console.log( 0 && 7 ) // 0    
</script>

或 ||

一真为真: 只要有一边为真, 结果就为真

假假为假: 两边同时为假, 结果才为假

<script>
	console.log( true || true )  // true
	console.log( true || false ) // true
	console.log( false || true ) // true
	
	console.log( false || false ) // false
	
    // 如果两边不是布尔值, 运算结果 就是对结果起最后决定作用的那个值
    console.log( 0 || 'love' )  // love
    console.log( 'love' || 0 )  // love
</script>

非 !

真变假, 假变真: 取反, 真的反面是假, 假的反面是真

<script>
    console.log( !true )  // false
    console.log( !false ) // true
</script>

逻辑运算的计算结果

1.一般情况下逻辑运算结果是布尔值

2.JS中, 逻辑运算符两边, 哪一边对最终结果起决定作用, 就把那个值作为整个逻辑运算的结果.

<script>
    // 逻辑运算的结果, 是最终起决定作用的那个值
    console.log( true && 7 ); // 7
    console.log( 7 && true ); // true
    console.log( false && 7); // false
    console.log( 7 && false); // false

    // 逻辑运算的结果, 是最终起决定作用的那个值
    console.log( true || 7 ); // true
    console.log( 7 || true ); // 7
    console.log( 7 || false); // 7 
</script>

与短路

案例1:

<script>
    let a = ( 5 < 2 ) && alert('今天不用写作业')
    
    /*
        5<2 为假,  &&后面的代码不管是真或假, 整个结果都是假 (与运算的特点)
        所以, 警告弹窗代码不会执行.
    */
</script>

案例2:

<scrpit>
	let a = 5
    let b = (7<3) && (a = 9);
    console.log( a )  // 5
                  
    /*
        7<3 为 false, 与运算中,一边为假,结果就是假, 右边不用算, 所以(a=9)没有执行 
    */
</scrpit>

或短路

案例1:

<script>
    let a = ( 5 > 2 ) || alert('今天不用写作业')
    
    /*
        5>2 为真,  ||后面的代码不管是真或假, 整个结果都是真 (或运算的特点)
        所以, 警告弹窗代码不会执行.
    */
</script>

案例2:

<scrpit>
	let a = 5
    let b = (7>3) || (a = 9); // let b = true || false
    console.log( a )  // 5
    
    /*
        7>3 为 true, 或运算中,一边为真,结果就是真, 右边不用算, 所以(a=9)没有执行 
    */
</scrpit>