JavaScript——运算符

时间：2024-11-21 09:56:15

目录

运算符

算术运算符

1、概念

 2、表达式和返回值

递增和递减运算符

 4、递增运算符

5、递增和递减的小结 

 比较运算符

概述

逻辑运算符 

1、概述

2、逻辑与&&

3、逻辑或 | | 

4、逻辑非 !

 5、逻辑中断逻辑与

6、逻辑中断逻辑或

 赋值运算符

运算符优先级 

运算符

运算符也被称为操作符，是用于实现赋值，比较和执行算术运算等功能的符号

算术运算符

1、概念

概念：算术运算使用的符号，用于执行两个变量或值的算术运算

运算符 描述 实例
+ 加 10+20=30
- 减 10-20=-10
* 乘 10*20=200
/ 除 10/20=0.5
% 取余数(取模) 返回除法的余数9%2=1 
    

  1. 

    

    (1 + 1); // 2

    

    2. 

  2. 

    

    (1 - 1); // 0

    

    3. 

  3. 

    

    (1 * 1); // 1

    

    4. 

  4. 

    

    (1 / 1); // 1

    

    5. 

  5. 

    

    // 1. % 取余 （取模）
    

    6. 

  6. 

    

    (4 % 2); // 0

    

    7. 

  7. 

    

    (5 % 3); // 2

    

    8. 

  8. 

    

    (3 % 5); // 3

    

    9. 

  9. 

    

    // 2. 浮点数 算数运算里面会有问题
    

    10. 

  10. 

    

    (0.1 + 0.2); // 0.30000000000000004

    

    11. 

  11. 

    

    (0.07 * 100); // 7.000000000000001

    

    12. 

  12. 

    

    // 3. 我们不能直接拿着浮点数来进行相比较 是否相等
    

    13. 

  13. 

    

    
var num = 0.1 + 0.2;
    

    14. 

  14. 

    

    (num == 0.3); // false

    

    15.

 2、表达式和返回值

 表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

    

  1. 

    

    // 是由数字、运算符、变量等组成的式子 我们成为表达式 1 + 1
    

    2. 

  2. 

    

    
console.log(1 + 1); // 2 就是返回值

    

    3. 

  3. 

    

    // 1 + 1 = 2
    

    4. 

  4. 

    

    // 在我们程序里面 2 = 1 + 1 把我们的右边表达式计算完毕把返回值给左边
    

    5. 

  5. 

    

    
var num = 1 + 1;
    

    6.

递增和递减运算符

1、前置递增

如果需要反复给数字变晕添加或减去1，可以使用递增（++)和递减(-- )运算符来完成。
在JavaScript中，递增(++)和递减(--)既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变呈后面时，我们可以称为后置递增（递减）运算符。
注意∶递增和递减运算符必须和变量配合使用。
 

先加1，后返回值

    

  1. 

    

    // 1. 想要一个变量自己加1   num = num + 1 比较麻烦
    

    2. 

  2. 

    

    
var num = 1;
    

    3. 

  3. 

    

    num = num + 1; // ++num

    

    4. 

  4. 

    

    num = num + 1;
    

    5. 

  5. 

    

    
console.log(num); // 3

    

    6. 

  6. 

    

    // 2. 前置递增运算符  ++ 写在变量的前面
    

    7. 

  7. 

    

    
var age = 10;
    

    8. 

  8. 

    

    ++age; // 类似于 age = age + 1

    

    9. 

  9. 

    

    
console.log(age);
    

    10. 

  10. 

    

    // 3. 先加1  后返回值
    

    11. 

  11. 

    

    
var p = 10;
    

    12. 

  12. 

    

    
console.log(++p + 10);
    

    13.

 2、后置递增

口诀：先返回原值，后加1

    

  1. 

    

    
var num = 10;
    

    2. 

  2. 

    

    num++; // num = num + 1    ++num;

    

    3. 

  3. 

    

    
console.log(num);
    

    4. 

  4. 

    

    // 1. 前置自增和后置自增如果单独使用 效果是一样的
    

    5. 

  5. 

    

    // 2. 后置自增 口诀：先返回原值 后自加1 
    

    6. 

  6. 

    

    
var age = 10;
    

    7. 

  7. 

    

    
console.log(age++ + 10);//20

    

    8. 

  8. 

    

    
console.log(age);//11

    

    9.

 4、递增运算符

    

  1. 

    

    
var a = 10;
    

    2. 

  2. 

    

    ++a; // ++a 11 a = 11

    

    3. 

  3. 

    

    
var b = ++a + 2; // a = 12 ++a = 12

    

    4. 

  4. 

    

    
console.log(b); // 14

    

    5. 

  5. 

    

     
    

    6. 

  6. 

    

    
var c = 10;
    

    7. 

  7. 

    

    c++; // c++ 11 c = 11

    

    8. 

  8. 

    

    
var d = c++ + 2; // c++ = 11 c = 12

    

    9. 

  9. 

    

    
console.log(d); // 13

    

    10. 

  10. 

    

     
    

    11. 

  11. 

    

    
var e = 10;
    

    12. 

  12. 

    

    
var f = e++ + ++e; // 1. e++ = 10 e = 11 2. e = 12 ++e = 12

    

    13. 

  13. 

    

    
console.log(f); // 22

    

    14. 

  14. 

    

    // 后置自增 先表达式返回原值 后面变量再自加1
    

    15.

5、递增和递减的小结 

  • 前置递增和后置递增运算符可以简化代码的编写，让变量的值 +1 比以前写法更简单
  • 单独使用时，运算结果相同
  • 与其他代码联用时，执行结果会不同
  • 后置：先原值运算，后自加（先人后己）
  • 前置：先自加，后运算（先己后人）
  • 开发时，大多使用后置递增/减，并且代码独占一行，例如：num++；或者num--；

 比较运算符

概述

概念∶比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值( true / false )作为比较运算的结果。

运算符名称 说明 案例 结果
< 小于号 1<2 true
> 大于号 1>2 false
>= 大于等于号（大于或者等于） 2>=2 true
<= 小于等于号（小于或者等于） 3<=2 false
== 预等号（会转型） 37==37 true
!= 不等号 37!=37 false
===         !== 全等 要求值和 数据类型都一致 37===‘37’ false 
    

  1. 

    

    
console.log(3 >= 5); // false

    

    2. 

  2. 

    

    
console.log(2 <= 4); // true

    

    3. 

  3. 

    

    //1. 我们程序里面的等于符号 是 ==  默认转换数据类型 会把字符串型的数据转换为数字型 
    

    4. 

  4. 

    

    //只要求值相等就可以
    

    5. 

  5. 

    

    
console.log(3 == 5); // false

    

    6. 

  6. 

    

    
console.log('数学老师' == '刘德华'); // flase

    

    7. 

  7. 

    

    
console.log(18 == 18); // true

    

    8. 

  8. 

    

    
console.log(18 == '18'); // true

    

    9. 

  9. 

    

    
console.log(18 != 18); // false

    

    10. 

  10. 

    

    // 2. 我们程序里面有全等 一模一样  要求 两侧的值 还有 数据类型完全一致才可以 true
    

    11. 

  11. 

    

    
console.log(18 === 18);
    

    12. 

  12. 

    

    
console.log(18 === '18'); // false

    

    13.

逻辑运算符 

1、概述

 概念︰逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

逻辑运算符 说明 案例
&& "逻辑与""，简称"与” and true && false
| | "逻辑或""，简称"或”or true | | false
! “"逻辑非"，简称""非”not ! true

2、逻辑与&&

两侧都为true 结果才是 true，只要有一侧为false 结果就为false

    

  1. 

    

    // 逻辑与 && and 两侧都为true 结果才是 true 只要有一侧为false 结果就为false
    

    2. 

  2. 

    

    
console.log(3 > 5 && 3 > 2); // false

    

    3. 

  3. 

    

    
console.log(3 < 5 && 3> 2); // true

    

    4.

3、逻辑或 | | 

两侧都为false 结果才是假 false 只要有一侧为true 结果就是true

    

  1. 

    

    // 逻辑或 || or 两侧都为false 结果才是假 false 只要有一侧为true 结果就是true
    

    2. 

  2. 

    

    
console.log(3 > 5 || 3 > 2); // true

    

    3. 

  3. 

    

    
console.log(3 > 5 || 3 < 2); // false

    

    4.

4、逻辑非 !

    逻辑非(!)t也叫作取反符，用来取一个布尔值相反的值，如true的相反值是false

    

  1. 

    

    //逻辑非  not  ！
    

    2. 

  2. 

    

    
console.log(!true); // false

    

    3.

 5、逻辑中断逻辑与

1、短路运算（逻辑中断)
短路运算的原理∶当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

2、逻辑与

  • 语法：表达式1 && 表达式2
  • 如果一个表达式的值为真，则返回表达式2
  • 如果一个表达式的值为假，则返回表达式1
    

  1. 

    

    // 1. 用我们的布尔值参与的逻辑运算 true && false == false
    

    2. 

  2. 

    

    // 2. 123 && 456 是值 或者是 表达式 参与逻辑运算？
    

    3. 

  3. 

    

    // 3. 逻辑与短路运算 如果表达式1 结果为真 则返回表达式2 如果表达式1为假 那么返回表达式1
    

    4. 

  4. 

    

    
console.log(123 && 456); // 456

    

    5. 

  5. 

    

    
console.log(0 && 456); // 0

    

    6. 

  6. 

    

    
console.log(0 && 1 + 2 && 456 * 56789); // 0

    

    7. 

  7. 

    

    
console.log('' && 1 + 2 && 456 * 56789); // ''

    

    8. 

  8. 

    

    // 如果有空的或者否定的为假 其余是真的 0 '' null undefined NaN
    

    9.

6、逻辑中断逻辑或

1、逻辑中断（短路操作)

  • 语法：表达式1 || 表达式2
  • 如果一个表达式的值为真，则返回表达式1
  • 如果一个表达式的值为假，则返回表达式2
    

  1. 

    

    //  逻辑或短路运算  如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2
    

    2. 

  2. 

    

    
console.log(123 || 456); // 123

    

    3. 

  3. 

    

    
console.log(123 || 456 || 456 + 123); // 123

    

    4. 

  4. 

    

    
console.log(0 || 456 || 456 + 123); // 456

    

    5. 

  5. 

    

    // 逻辑中断很重要 它会影响我们程序运行结果思密达
    

    6. 

  6. 

    

    
var num = 0;
    

    7. 

  7. 

    

    
console.log(123 || num++);//前面运算，后边不参与运算

    

    8. 

  8. 

    

    
console.log(num); // 0

    

    9.

 赋值运算符

概念：用来把数据赋值给变量的运算符

赋值运算符 说明 案例
= 直接赋值 var usrName=‘我是值’；
+=、-= 加、减一个 数 后在赋值 var age=10；age++；//15
*=、/=、%= 乘、除、取模 后在赋值 var age=2；age*=5；//10 
    

  1. 

    

    
var num = 10;
    

    2. 

  2. 

    

    // num = num + 1; num++
    

    3. 

  3. 

    

    // num = num + 2; // num += 2;
    

    4. 

  4. 

    

    // num += 2;
    

    5. 

  5. 

    

    num += 5;
    

    6. 

  6. 

    

    
console.log(num);//15

    

    7. 

  7. 

    

    
var age = 2;
    

    8. 

  8. 

    

    age *= 3;
    

    9. 

  9. 

    

    
console.log(age);//6

    

    10.

运算符优先级 

  • 一元运算符里面的逻辑非优先级最高
  • 逻辑与比逻辑或优先级高
    

  1. 

    

    
console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true);//true

    

    2. 

  2. 

    

    
var num = 10;
    

    3. 

  3. 

    

    
console.log(5 == num / 2 && (2 + 2 * num).toString() === '22');//true

    

    4. 

  4. 

    

     
    

    5. 

  5. 

    

     
    

    6. 

  6. 

    

    
var a = 3 > 5 && 2 < 7 && 3 == 4;
    

    7. 

  7. 

    

    
console.log(a);//false

    

    8. 

  8. 

    

     
    

    9. 

  9. 

    

    
var b = 3 <= 4 || 3 > 1 || 3 != 2;
    

    10. 

  10. 

    

    
console.log(b);//true

    

    11. 

  11. 

    

     
    

    12. 

  12. 

    

    
var c = 2 === "2";
    

    13. 

  13. 

    

    
console.log(c);//false

    

    14. 

  14. 

    

     
    

    15. 

  15. 

    

    
var d = !c || b && a;
    

    16. 

  16. 

    

    
console.log(d);//true

    

    17.

 

 






 

相关文章