05-JavaScript运算符

运算符基本概念

• JavaScript运算符的概念和C语言一样, 都是告诉程序执行特定算术或逻辑操作的符号。

---

运算符分类

• JavaScript运算符的分类和C语言也一样

• 按照功能划分:

  • 算术运算符
  • 位运算符
  • 关系运算符
  • 逻辑运算符

• 运算符根据参与运算的操作数的个数分为

  • 单目运算
  • 双目运算
  • 三目运算

---

运算符的优先级和结合性

• 优先级
  • JavaScript运算符的优先级和C语言也一样
  • JavaScript中,运算符的运算优先级共分为15 级。1 级最高,15 级最低。
  • 在表达式中,优先级较高的先于优先级较低的进行运算。
  • 在一个运算量两侧的运算符优先级相同时,则按运算符的结合性所规定的结合方向处理

运算符	描述
()	表达式分组
++ -- - ~ !	一元运算符
* / %	乘法、除法、取模
+ - +	加法、减法、字符串连接
<< >> >>>	移位
< <= > >=	小于、小于等于、大于、大于等于
== != === !==	等于、不等于、严格相等、非严格相等
&	按位与
^	按位异或
|	按位或
&&	逻辑与
||	逻辑或
?:	条件
= += -= *= /= %=	赋值运算
,	多重求值

• 结合性
  • JavaScript运算符的结合性和C语言也一样
  • 即左结合性(自左至右)和右结合性(自右至左)。

---

算术运算符

• JavaScript算术运算符和C语言也一样

名称	符号	说明
加法运算符	+	对两个值进行加法运算，并将结果返回
减法运算符	-	对两个值进行减法运算，并将结果返回
乘法运算符	*	对两个值进行乘法运算，并将结果返回
除法运算符	/	对两个值进行除法运算，并将结果返回
求余运算符 (模运算符)	%	对两个值进行取余运算，并将结果返回

• 基本使用和C语言一模一样

      var res1 = 1 + 1;
      var res2 = 1 - 1;
      var res3 = 2 * 2;
      var res4 = 10 / 3;
      var res5 = 10 % 3;
      console.log(res1); // 1
      console.log(res2); // 0 
      console.log(res3); // 4
      console.log(res4); // 3.3333
      console.log(res5); // 1
  

---

• 注意点:

  • 和C语言不同的是JavaScript中整数除以整数结果是小数

        var res4 = 10 / 3;
        console.log(res4); // 3.3333
    

  • 任何值和NaN做运算都得NaN

    var result = 2 + NaN;
    console.log(result); //NaN
    

  • 非Number类型的值进行运算时，会将这些值转换为Number然后在运算

    var result = true + 1; // + - * /  %
    console.log(result); // 2
    result = true + false;
    console.log(result); // 1
    result = 2 + null; 
    console.log(result);// 2
    

  • 任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作

    var result = 1 + "123";
    console.log(result); // 1123
    result = 2 + "true";
    console.log(result); // 2true
    

  • 任何的值和字符串做- * / %法运算, 都会先转换为字符串转换为Number

    var result = 2 - "1"; // - * /  %
    console.log(result); // 1
    result = "2" - "1";
    console.log(result); // 1
    

  • 取余运算m%n, n等于0 返回NaN, 其它和C语言一样

    var result = 10 % 0;
    console.log(result); // NaN
    

---

正负运算符

• • 正号
  • + 正号不会对数字产生任何影响

    var num = 123;
    num = +num;
    console.log(num); // 123
    

  • 对于非Number类型的值,会将先转换为Number，然后再运算

    var bool = true;
    var res = +bool;
    console.log(res); // 1
    
    var str = "123";
    res = +str;
    console.log(res); // 123
    
    var str2 = "123abc";
    res = +str2;
    console.log(res); // NaN, 所以内部不是调用parseInt, 而是Number()函数
    
    var temp = null;
    res = +temp;
    console.log(res); // 0
    

• 负号
  • - 负号可以对数字进行负号的取反

    var num = 123;
    num = -num;
    console.log(num); // -123
    

---

赋值运算符

• JavaScript赋值运算符和C语言也一样

优先级	名称	符号	说明
14	赋值运算符	=	双目运算符,具有右结合性
14	除后赋值运算符	/=	双目运算符,具有右结合性
14	乘后赋值运算符 (模运算符)	*=	双目运算符,具有右结合性
14	取模后赋值运算符	%=	双目运算符,具有右结合性
14	加后赋值运算符	+=	双目运算符,具有右结合性
14	减后赋值运算符	-=	双目运算符,具有右结合性

---

自增自减运算符

• JavaScript自增自减运算符和C语言也一样

优先级	名称	符号	说明
2	自增运算符(在后)	i++	单目运算符,具有左结合性
2	自增运算符(在前)	++i	单目运算符,具有右结合性
2	自减运算符(在后)	i--	单目运算符,具有左结合性
2	自减运算符(在前)	--i	单目运算符,具有右结合性

---

关系运算符

• JavaScript关系运算符和C语言也一样
• 和C语言不同的是, JavaScript中的关系运算符只会返回true或false

优先级	名称	符号	说明
6	大于运算符	>	双目运算符,具有左结合性
6	小于运算符	<	双目运算符,具有左结合性
6	大于等于运算符	>=	双目运算符,具有左结合性
6	小于等于运算符	<=	双目运算符,具有左结合性
7	等于运算符	==	双目运算符,具有左结合性
7	不等于运算符	!=	双目运算符,具有左结合性
7	不等于运算符	===	双目运算符,具有左结合性
7	不等于运算符	!==	双目运算符,具有左结合性

• 注意点:
  • 对于非数值进行比较时，会将其转换为数字然后在比较

    console.log(1 > true); //false
    console.log(1 > false); //true
    console.log(1 > "0"); //true
    console.log(1 > null); //true
    

  • 如果符号两侧的值都是字符串时，不会将其转换为数字进行比较, 而会分别比较字符串中字符的Unicode编码
  • Unicode编码转换地址

    // a的Unicode编码是:0061
    // b的Unicode编码是:0062
    console.log("a" < "b");//true
    
    // 比较多位时则是从前往后一位一位比较
    // 第一位相同比较第二位, 直到比较到不一样或者结束为止
    // c的Unicode编码是:0063
    // 类似于C语言strcmp函数, 只不过JavaScript中比较的是Unicode编码
    console.log("ab" < "ac");//true
    

  • null、undefined 、NaN比较

    console.log(null == 0); // false
    console.log(undefined == 0); // false
    // 永远不要判断两个NaN是否相等
    console.log(NaN == NaN); // false
    
    /*
     * 可以通过isNaN()函数来判断一个值是否是NaN
     *    如果该值是NaN则返回true，否则返回false
     */
    var num = NaN;
    console.log(isNaN(num)); // true
    
    // undefined 衍生自 null, 所以返回true
    console.log(null == undefined); // true;
    console.log(null === undefined); // false;
    
    // == 判断值是否相等
    // == 会进行数据类型转换
    console.log("123" == 123); // true
    // === 判断值和类型时候同时相等
    // === 不会进行数据类型转换
    console.log("123" === 123); // false
    

---

逻辑运算符

• JavaScript逻辑运算符和C语言也一样

优先级	名称	符号	说明
2	逻辑非运算符	!	单目运算符,具有右结合性
11	逻辑与运算符	&&	双目运算符,具有左结合性
12	逻辑或运算符	||	双目运算符,具有左结合性

• 注意点:

  • 对于非Boolean类型的数值, 逻辑运算符会将其悄悄咪咪转换为Boolean类型来判断

  • 逻辑与

    • 如果条件A不成立, 则返回条件A的数值本身
    • 如果条件A成立, 不管条件B成不成立都返回条件B数值本身

    result =  null && 0;
    console.log(result); // null
    var result =  "123" && "abc";
    console.log(result); // "abc"
    result =  "123" && 0;
    console.log(result); // 0
    

  • 逻辑或

    • 如果条件A不成立, 则不管条件B成不成立都返回条件B数值本身
    • 如果条件A成立, 则返回条件A的数值本身

    var  result =  null || 0;
    console.log(result); // 0
    result =  "123" || "abc";
    console.log(result); // "123"
    result =  "123" || 0;
    console.log(result); // "123"
    

---

逗号运算符

• JavaScript逗号运算符和C语言也一样
• 逗号运算符会从左至右依次取出每个表达式的值, 最后整个逗号表达式的值等于最后一个表达式的值
• 格式: 表达式1，表达式2，… …，表达式n;

  var a, b, c, d;
  /*
  1.先计算表达式1, a = 2
  2.再计算表达式2, b = 12
  3.再计算表达式3, c = 5
  4.将表达式3的结果返回给d
  */
  d = (a = 1 + 1,b = 3 * 4, c = 10 / 2);
  console.log(d); // 5
  

---

三目运算符(条件运算符)

• JavaScript三目运算符和C语言也一样
• 格式: 条件表达式 ? 语句1 : 语句2;

  // 弹第一个
  true?alert("语句1") : alert("语句2");
  // 弹第二个
  false?alert("语句1") : alert("语句2");