JavaScript运算符

JavaScript运算符

运算符是JavaScript的语法基础，它是后面JavaScript语句章节的前奏部分。JavaScript有丰富多样的运算符

一元操作符

只能操作一个值的操作符叫做一元操作符。一元操作符是 ECMAScript 中最简单的操作符。一元操作符的结果一定是一个Number类型

递增递减操作符

递增操作符

var a = 3;
var b = 3;

a = a + 1;  //4
b++;		//4

经过上面的对比我们发现a=a+1与a++所得到的结果就是一模一样的

递增操作符每次都是对自己加1，递增操作符的符号可以放在变量的前面，也可以放在变量的后面，如下所示

var a = 3;
var b = 3;

a++;
++b;
console.log(a);
console.log(b);

上面的代码运算以后，我们发现，两个变量a与b最后的结果都是4。难道符号在前与符号在后是一样的吗？

现在我们将上面的代码进行一个改动

var a = 3;
var b = 3;

console.log(a++);		 //3
console.log(++b);		 //4

1. 符号在后，先使用这个变量，使用完以后，再去变化这个变量
2. 符号在前，先将当前变量变化以后，再使用这个变量

😑 小算式：现在我们就根据上面的特点去完成下面一个算式的运算

var a = 11;
var b = 12;
var c = 13;

a++;		//11 
			//12
++a;		//13
		//13  13 +  13    15
var d = a++ + ++b + c++ + ++a;
//请说出最后a,b,c,d的值各是多少
//a:15,b:13,c:14

递减操作符

递减操作符与递增操作符的原理是一样的

var a = 8;
var b = 8;
a--;
b=b-1;

上面的两个原理是一样的，同时它的操作方式与递增也是一样的，在此不过多的赘述

特殊类型值的递增递减操作

递增与递减操作符不仅可以适用于数字，还可以在其它的数据类型里面操作，如下

var a = "1";
var b = "hello";
var c = "";
var d = true;
var e = false;
var f = null;
var g = undefined;

对于上面的这种情况，我们使用按照递增或增减的操作来进行

操作原则

1. 一元操作符的结果一定是一个Number类型
2. 如果是非数字执行递增与增减操作，则先将这个值进行Number()转换
3. NaN不参于运算，即使参于运算，结果也一定是NaN
4. 符号在后，先使用自己，再进行变化，符号在前，先变化自己，再使用自己

一元加减操作符

var a = "01";
var b = "1.1";
var c = "z";
var d = false;
var e = 1.1;
var f = NaN;
var g = null;
var h = undefined;

我们现在将上面的数据执行一元加减操作符

一元加法操作符

a = +a; 		//1
b = +b; 		//1.1
c = +c; 		//NaN
d = +d; 		//0
e = +e; 		//1.1
f = +f; 		//NaN
g = +g; 		//0
h = +h; 		//NaN

一元减法操作符

a = -a;     //-1
b = -b;     //-1.1
c = -c;     //NaN
d = -d;     //-0
e = -e;     //-1.1
f = -f;     //NaN
g = -g;     //-0
h = -h;     //NaN
i = -i;     //2

操作原则

1. 结果一定是Number类型

2. 非数字类型的直接通过Number去转换

3. NaN不参于计算

4. 如果是递减操作，则通过Number转换以后，再乘以-1

布尔操作符

在一门编程语言中，布尔操作符的重要性堪比相等操作符。如果没有测试两个值关系的能力，那么诸如 if…else 和循环之类的语句就不会有用武之地了。布尔操作符一共有 3 个：非（NOT）、与（AND）和或（OR）。

在布尔操作符里面经常会涉及到Boolean的操作转换，所以我们一定要知道6个明确的false条件 ，它们分别是0,""(空字符串),false,NaN,null,undefined

逻辑非操作符

逻辑非操作符使用!来进行操作，执行的是非真即假，非假即真的过程。它的结果一定是一个布尔类型

我们现在可以通过下面的例子来完成一个简单的学习

var a = true;
var b = !a;				//false
var c = !(1<2);			//false

因为JavaScript是一个弱类型的语句，所以在进行逻辑非的操作的时候，所以类型的的值都可以进行

console.log(!false);            //true
console.log(!123);              //false
console.log(!NaN);              //true
console.log(!undefined);        //true
console.log(!null);             //true
console.log(!"");               //true
console.log(!0);                //true
console.log(!"hello");          //false
console.log(!!"abc");           //true

操作原则

1. 结果一定是布尔类型
2. 非真即假，非假即真
3. 如果操作的这个数不是布尔类型，则通过Boolean去转换
4. 有哪些明确的false一定要弄清楚

逻辑与操作符

逻辑与操作符我们使用的是&&这个符号，执行的是一假即假的原则，它的结果不定是布尔类型

首先我们先通过简单的案例来看一下这个操作符

var a = true&&false;		//false
var b = true&&true;			//true
var c = false&&false;		//false
var d = true&&false&&true;  //false

因为JavaScript是一个弱类型语言，所以在进行逻辑与的操作的时候，也可以是任何类型

console.log(true && false);                 //false
console.log(true && 123);                   //123
console.log(false && 123);                  //false
console.log(true && "");                    //""             
console.log(true && "" && 123);             //""
console.log(NaN && false);                  //NaN
console.log(NaN && null);                   //NaN
console.log(null && "abc");                 //null
console.log(123 && "abc");                  //"abc"
console.log(0 && 123);                      //0

操作原则

1. 它的结果不一定是Boolean类型
2. "一假即假"的操作
3. 短路原则：当一个表达式如果已经能够得到结果了，就不会再向后面继续去运算了
4. 非布尔类型的值在进行运算的时候，需要通过Boolean去转换
5. 有哪些明确的false条件

逻辑或操作符

逻辑或操作符使用的是||来表示，执行的是一真即真的操作，它的结果不定是布尔类型

我们现在先通过几个简单的运算来熟悉一下这个操作符

var a = true||false;		//true
var b = false||false;		//false
var c = true||true;			//true
var d = false||true||false; //true;

因为JavaScript是一个弱类型语言，所以在进行逻辑或的操作的时候，也可以是任何类型

console.log(true || 123 || false);                   //true
console.log(false || 123 || false);                  //123
console.log(666 || true || "hello");                 //666
console.log(NaN || false || null);                   //null
console.log(null || "world");                        //word
console.log(false || NaN);                           //NaN

操作原则

1. 结果不一定是布尔类型

2. 执行“一真即真”的操作

3. 短路原则：如果表达式已经能够得到结果，则不会继续向后面运算

4. 如果操作的数不是布尔类型则通过Boolean去转换

5. 要弄清楚明确的false条件有哪些

📚 小练习： 布尔操作符是包含了逻辑与，逻辑或，逻辑非，它们是可以结合在于起使用的，如下

console.log(true || "" && NaN);             //true
console.log(123 || !"" || false);           //123
console.log(123 && NaN || null);            //null
console.log("abc" || 123 && NaN);           //"abc"
console.log(null || 123 && undefined);      //undefined

操作原则

1. 或：一真即假，与：一假即假，非：非真即假，非假即真

2. 先非，再与，最后或

3. 非布尔类型的进行Boolean转换

4. 弄清楚明确的false条件有哪些

5. 短路原则

🎪 小案例

var a=true,b=false,c=null,d=undefined;

"" || b && c;
"" && b && c;
"" && b || c;
!"" || b && c;
!d || b && c;
!null || b && c;
"a" || b && c;
123 || d;
null || !"hello";

加法操作符

加法操作符使用的是+来进行表示，它的结果不一定是Number类型

因为弱类型的缘故，所以在执行加法运算的时候，不一字是数字在相加，有可能是它有的类型的在相加。在此处我们只考虑基本数据类型，不考虑对象

console.log(1 + 2);                         //3
console.log("1" + 2);                       //"12"
console.log(true + 1);                      //2
console.log(true + "1");                    //"true1"
console.log(NaN + 1);                       //NaN
console.log(NaN + true);                    //NaN
console.log(NaN + "1");                     //"NaN1"
console.log("1" + "2");                     //"12"
console.log(1 + undefined);                 //NaN
console.log("1" + undefined);               //"1undefined"
console.log(1 + null);                      //1

//现在在来一看一些不常见的加法运算	

console.log(true + true);                   //2
console.log(true + undefined);              //NaN
console.log(true + null);                   //1

操作原则

1. 如果在执行加法运算的时候有字符串，则结果一定是一个拼接型的字符串
2. NaN不参于计算，只要参于计算机，结果就是NaN
3. 对于非数字的类型进行加法运算，先进行Number的转换

隐藏规则：字符串是老大，NaN是老二

减法操作符

减法操作符也是算术运算符，它使用-来表示

console.log(2 - 1);                         //1
console.log("2" - 1);                       //1
console.log("2" - "1");                     //1
console.log("2" - true);                    //1
console.log(2 - false);                     //2
console.log(1 - null);                      //1
console.log(2 - undefined);                 //NaN
console.log(2 - NaN);                       //NaN
console.log(null - true);                   //-1
console.log("a" - 1);                       //NaN
console.log("a" - "b");                     //NaN
console.log("" - 1);                        //-1
console.log("" - NaN)                       //NaN

操作原则

1. 减法操作符得到的结果一定是一个Number类型

2. NaN与任何值相减都是NaN

3. 如果执行减法的不是数字，则通过Number去转换一次

减法操作符也有一个隐藏规则，数字是老大，NaN是老二，其它类型通过Number转

乘法操作符

乘法操作符使用的是*来表示，乘法操作符的的操作规则与减法保持了一致

console.log(2 * 1);                     //2
console.log("2" * 1);                   //2
console.log("2" * "1");                 //2
console.log("2" * true);                //2
console.log(2 * false);                 //0
console.log(1 * null);                  //0
console.log(2 * undefined);             //NaN
console.log(2 * NaN);                   //NaN
console.log(null * true);               //0
console.log("a" * 1);                   //NaN
console.log("a" * "b");                 //NaN
console.log("" * 1);                    //0
console.log("" * NaN)                   //NaN

操作原则

1. 乘法操作符得到的结果一定是一个Number类型

2. NaN与任何何值相乘都是NaN

3. 如果执行乘法的不是数字，则通过Number去转换一次

除法操作符

除法操作符使用/来表示

console.log(2 / 1);                     //2
console.log("2" / 1);                   //2
console.log("2" / "1");                 //2
console.log("2" / true);                //2
console.log(2 / false);                 //Infinity
console.log(1 / null);                  //Infinity
console.log(2 / undefined);             //NaN
console.log(2 / NaN);                   //NaN
console.log(null / true);               //0
console.log("a" / 1);                   //NaN
console.log("a" / "b");                 //NaN
console.log("" / 1);                    //0
console.log("" / NaN)                   //NaN

操作原则

1. 除法操作符得到的结果一定是Number类型
2. NAN与任何数相除都是NaN
3. 如果执行除法的不是数字，则通过Number去转换一次
4. 如果除数为0，则最终的结果为Infinity无穷大

取余操作符

取余操作符是两个数相除以后取余数，使用%来表示

console.log(2 % 1);                 //0
console.log("2" % 1);               //0
console.log("2" % "1");             //0
console.log("2" % true);            //0
console.log(2 % false);             //NaN
console.log(1 % null);              //NaN
console.log(2 % undefined);         //NaN
console.log(2 % NaN);               //NaN
console.log(null % true);           //0
console.log("a" % 1);               //NaN
console.log("a" % "b");             //NaN
console.log("" % 1);                //0
console.log("" % NaN)               //NaN

操作原则

1. 取余操作符得到的结果一定是Number类型
2. NAN不参于运算，只要参于运算，结果就是NaN
3. 如果执行取余运算的不是数字，则通过Number去转换一次
4. 如果取余的时候除数为0，则结果就是NaN

---

相等操作符

相等操作符在JavaScript的主要作用是用于判断符号两边的内容是否相等，它使用的是==

JavaScript里面的相等操作符与其它强类型语言里面的相等操作符完全不一样，它的判断过程会发生一个类型转换【如果符号两边的数据类型不相同的时候，可能会发生类型转换的，具体的可以参考下面的操作原则】。如果等号左右两边的数据类型不一样的时候，它会进行相应的类型转换的

之前我们给同学们提过一个词叫“弱判断”，指的就是弱类型语言里面的判断，现在我们就可以看到==在其它语言里面是强判断，但是在JavaScript里面则是会进行类型转换的弱判断

console.log(1==2);					//false
console.log(1==1);					//true
console.log(1==true);				//第四条原则  true
console.log(0==false);				//第四条原则  true
console.log("0"==false);			//先适用于第4条，	将false转换成0,再适用于第3条  true
//-------------------------
console.log("10"==10);				//第三条原则  true
console.log(""==0);					//第三条原则  true
console.log(NaN==0);				//第二条原则  false
console.log(null==undefined);		//第一条原则  true
console.log(""==null);				//第一条原则  false
console.log(0==undefined);			//第一条原则  false

操作原则

1. null与undefined是相等的，除此之外与任何值都不相等
2. NaN不与任何值相等
3. 如果一个操作数是字符串，另一个操作数是数值，在比较之前先将字符串转为数值
4. 布尔类型转换成数字，true就为1，false就为0
5. 在比较相等之前，不能将null与undefined转换成任何类型（它们如果参于了比较，不能做类型转换）

全等操作符

全等操作符是弱类型主言的一种新特点，它使用===来表示，使用全等操作符来判断的时候是不会发生类型转换的。符号两边的值与类型一定相等结果才为true，否则一律为false

console.log(10===10);					//true
console.log("10"===10);					//因为类型不相同  false
console.log(1===true);					//左边number类型，右边boolean类型，false
console.log(0===false);					//原理同上，false
console.log(null===undefined);			//数据类型不同  false
console.log(NaN===NaN);					//NaN不与任何值相等   false
console.log(null===0);					//数据类型不同  false
console.log(10===9);					//数据类型相同，但值不同  false

操作原则

1. 符号两边的数据类型一定要相同
2. 符号两边的值一定要相等
3. NaN不与任何值相等

不相等操作符

不相等操作符有两个!=与!==，它其实就是在相等操作与全等操作的结果上面取非

console.log(10!=10);                        //false
console.log(10!="10");                      //false
console.log(10!=="10");                     //true
console.log(null!=undefined);               //false
console.log(null!==undefined);              //true
console.log(NaN!==NaN);                     //true

关系操作符

小于（<）、大于（>）、小于等于（<=）和大于等于（>=）这几个关系操作符用于对两个值进行比较，比较的规则与我们在数学课上所学的一样。这几个操作符都返回一个布尔值，如下面的例子所示

var result1 = 5 > 3; //true 
var result2 = 5 < 3; //false

JavaScript是一个弱类型语言，所以在进行关系操作符的运算的时候，可能不是数字在运算，而是其它的任何类型（此处我们只做基本类型的学习，对象先不考虑）

console.log(100<99);					//第一条规则 false
console.log("1"<2);						//第二条规则 true
console.log("1"<"2");					//第四条规则 true 注意比较的是ASCII码
console.log("11"<"2");					//第四条规则 true 注意比较的是ASCII码
console.log(true<2);					//第三条规则 true
console.log("blue"<"action");			//第四条规则 false
console.log("aa"<"ab");					//第四条规则 true
console.log("A"<"a");					//第四条规则 true
console.log("我">"你");				   //第五条规则 true

操作原则

1. 如果两个数是数值，则直接比较数值大小

2. 如果一个操作数是数值 ，另一个不是数值，则将另一个数通过Number转换成数值以后再比较

3. 如果有个操作数是布尔值 ，则先将布尔值转换成数值 再比较

4. 如果两个操作数都是字符串，则比较两个字串所对应的编码值（ASCII码）

   ASCII码指的是计算机通用信息编码，它将我们所有的字母都使用一个数字编码来表示 ，同时也将我们的数字使用了编码来表示

5. 如果是中文比较，则比较unicode码【目前暂时不用考虑第5条，我们后面讲字符串对象以后就可以了】

条件操作符

条件操作符是根据条件来进行运算，然后得到结果。在有些编程语言里面喜欢把它叫三目运算符。基本语法如下

var a = 条件是否成立?条件成立的值:条件不成立的值;

先看两个简单的例子

var a = true?"标哥":"帅哥";				//标哥
var b = false?"帅气":"土豪";			//土豪	
var c = 1>2?"hello":"world";		  //world

按照正常的编程规范，前面的条件要得到的值应该一定是一个布尔值才行【强类型语言里面如Java,C#,C++等就是这么做的】。但是JavaScript是一个弱类型语言，它前面的条件可以是任何类型的，不一定非要是布尔类型的，如果不是布型的，则通过Boolean去转换

var x = 123 ? "你好" : "大家好";			//"你好"
var y = NaN ? "你好" : "大家好";			//"大家好"

var a = 1 > null ? "hello" : "";
var b = a ? "张三" : "李四";			//"张三"

条件操作符的使用范围非常广，我们可以通过下面的小小的案例来看一下

var a = 3,b = 4;
var max;
//请使用条件表达式将比较大的一个值赋值给max;
max = a > b ? a : b;

现在我们已经轻松的将上面的赋值过程完成了，现在我们继续深入

var a = 3,b = 4,c = 5;
var max;
//请使用条件表达式将最大的一个赋值给变量max

第一种写法

//先比较 a与b的大小，获取它们之中比较大的一个
var temp = a > b ? a : b;			
//这个时候的temp就是a与b里面比较大的一个数 ，再将这个比较大的数和c去比较
var max = temp > c ? temp : c;

将上面的两行代码转换成一行代码

var max = (a > b ? a : b) > c ? (a > b ? a : b) : c;

第二种写法

var max = a > b ? (a > c ? a : c) : (b > c ? b : c);

解读上面的语法

第一步：先执行判断条件a>b，如果成立就说明a比b要大，我再拿a与c来比较

第二步：在第一步成立的情况下执行a>c?a:c

第三步：如果第一步a>b不成立，说明b比a要大，再拿b与c来比较

第四步：在第三步的成立情况下b>c?b:c

---

赋值操作符

赋值操作符使用的是=，它将符号右边的值赋值给符号左边

var a  = 123;   //这个操作就是将123赋值给变量abc

现在在看下面的操作

var a = 10;
var b = 1;
// a++ = b;  这个写为什么不对
-a = b;

赋值运算符是一个特殊的运算符，它是从右各左来进行，它在进行赋值的时候，不允许左边的值发生变化

赋值运算符可以像下面这么写

var a = 10;
a = a + 5;
//可以写成
a += 5;

我们依次类型就可以得到下面几种符号

• 乘/赋值（*=）
• 除/赋值（/=）
• 模/赋值（%=）
• 加/赋值（+=）
• 减/赋值（-=）

逗号运算符

逗号运算符使用,来表示，我们之前已经接触了，如变量的赋值，逗号就代表一个操作没有完成

现阶段的应用点不高，只在赋值里面用得到，后面在数组，对象，方法参数里面都要用到逗号

var a,b,c;		

//相当于一次性定义了三个变量,和下面的代码效果是一样的

var a;
var b;
var c;

当然现阶段的逗号运算符也可以这么用

var a = (7,9,0,4,5,2);		//这个时候得到a就是2

---

位运算符

位运算符也叫二进制运算符，它是把数字转换成二进制以后再去执行操作

要弄清楚位运算符一定要先弄楚一个数怎么转2进制，然后一个2进制数怎么转10进制，同时要知道10进制的数在内在当中的表现形式是什么

案例练习

1. 现有一个数字为759,请将其拆分成三个变量，分别是7,5,9

   var num = 759;
   var a = parseInt(num / 100); //7
   var b = parseInt(num / 10 % 10); //5
   var c = num % 10; //9
   

2. 现有两个Number的变量，使用你所知道的方法将它们的值进行互换

   var a = 11,b = 23;
   //将变量a,b的值进行互换
   

   第一种方式：使用第三个变临时变量去完成

   var c = a;
   a = b;
   b = c;
   

   第二种方式：使用加法与减法操作符去完成

   a = a + b;              //a 34
   b = a - b;              //b 11
   a = a - b;              //a 23
   

3. 现有一毫秒数为646312768444，请将该毫秒数变成多少年，多少月，多少天，多少小时，多少分钟，多少秒钟

   1秒钟等于1000毫秒，一年按365天算，不足一年的月份一个月按固定的30天算

   var num = 646312768444;
   //先将上面的数变成秒数
   var total = parseInt(num / 1000); //646312768
   //先获取总的天数
   var totalDays = parseInt(total / 60 / 60 / 24);
   //一年按365天算
   var totalYears = parseInt(totalDays / 365);
   //剩下的天数
   var remainDays = totalDays % 365;
   //月份
   var totalMonths = parseInt(remainDays / 30);
   //最后剩下的天数
   remainDays = remainDays % 30;
   

4. 如下代码输出的结果是什么？

   console.log(1 + "2" +"2");			//"122"
   console.log(1+ +"2" +"2");			//"32"
   console.log("A" - "B" +"2");		//"NaN2"
   console.log("A" - "B" +2);			//NaN
   

5. var a = false;var x = a?"A":"B";x最终的值是多少？

   //x的值最终是"B"
   

6. 下面代码的结果是多少？

   var num = 10;
   var x = 5==num/2&&(2+2*num).toString()=="22";
   console.log(x);			//true
   

7. 下面的代码运行的结果是什么？

   var x = "10" - (12+5).toString();
   console.log(x);  //-7
   

8. 下面代码运行的结果是什么？

   var x = "10" - 12 + (5).toString();
   console.log(x);  //-25
   

9. 运算符的优先级是什么？（先自习查找答案）

   第一步：括号
   第二步：一元操作符
   第三步：算术操作符
   第四步：关系运算符
   第五步：相等操作符
   第六步：布尔操作符
   最后：赋值操作符