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
- 符号在后，先使用这个变量，使用完以后，再去变化这个变量
- 符号在前，先将当前变量变化以后，再使用这个变量
😑 小算式：现在我们就根据上面的特点去完成下面一个算式的运算
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;
对于上面的这种情况，我们使用按照递增或增减的操作来进行
操作原则
- 一元操作符的结果一定是一个
Number类型 - 如果是非数字执行递增与增减操作，则先将这个值进行
Number()转换 NaN不参于运算，即使参于运算，结果也一定是NaN- 符号在后，先使用自己，再进行变化，符号在前，先变化自己，再使用自己
一元加减操作符
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
操作原则
-
结果一定是Number类型
-
非数字类型的直接通过Number去转换
-
NaN不参于计算
-
如果是递减操作，则通过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
操作原则
- 结果一定是布尔类型
- 非真即假，非假即真
- 如果操作的这个数不是布尔类型，则通过
Boolean去转换 - 有哪些明确的
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
操作原则
- 它的结果不一定是Boolean类型
- "一假即假"的操作
- 短路原则：当一个表达式如果已经能够得到结果了，就不会再向后面继续去运算了
- 非布尔类型的值在进行运算的时候，需要通过Boolean去转换
- 有哪些明确的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
操作原则
-
结果不一定是布尔类型
-
执行“一真即真”的操作
-
短路原则：如果表达式已经能够得到结果，则不会继续向后面运算
-
如果操作的数不是布尔类型则通过Boolean去转换
-
要弄清楚明确的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
操作原则
-
或：一真即假，与：一假即假，非：非真即假，非假即真
-
先非，再与，最后或
-
非布尔类型的进行Boolean转换
-
弄清楚明确的false条件有哪些
-
短路原则
🎪 小案例
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
操作原则
- 如果在执行加法运算的时候有字符串，则结果一定是一个拼接型的字符串
- NaN不参于计算，只要参于计算机，结果就是NaN
- 对于非数字的类型进行加法运算，先进行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
操作原则
-
减法操作符得到的结果一定是一个
Number类型 -
NaN与任何值相减都是NaN
-
如果执行减法的不是数字，则通过
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
操作原则
-
乘法操作符得到的结果一定是一个
Number类型 -
NaN与任何何值相乘都是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); //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
操作原则
- 除法操作符得到的结果一定是
Number类型 - NAN与任何数相除都是NaN
- 如果执行除法的不是数字，则通过
Number去转换一次 - 如果除数为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
操作原则
- 取余操作符得到的结果一定是
Number类型 - NAN不参于运算，只要参于运算，结果就是NaN
- 如果执行取余运算的不是数字，则通过
Number去转换一次 - 如果取余的时候除数为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
操作原则
- null与undefined是相等的，除此之外与任何值都不相等
- NaN不与任何值相等
- 如果一个操作数是字符串，另一个操作数是数值，在比较之前先将字符串转为数值
- 布尔类型转换成数字，true就为1，false就为0
- 在比较相等之前，不能将
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
操作原则
- 符号两边的数据类型一定要相同
- 符号两边的值一定要相等
- 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
操作原则
-
如果两个数是数值，则直接比较数值大小
-
如果一个操作数是数值 ，另一个不是数值，则将另一个数通过
Number转换成数值以后再比较 -
如果有个操作数是布尔值 ，则先将布尔值转换成数值 再比较
-
如果两个操作数都是字符串，则比较两个字串所对应的编码值（ASCII码）
ASCII码指的是计算机通用信息编码，它将我们所有的字母都使用一个数字编码来表示 ，同时也将我们的数字使用了编码来表示
-
如果是中文比较，则比较
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进制的数在内在当中的表现形式是什么
案例练习
-
现有一个数字为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 -
现有两个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 -
现有一毫秒数为
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; -
如下代码输出的结果是什么？
console.log(1 + "2" +"2"); //"122" console.log(1+ +"2" +"2"); //"32" console.log("A" - "B" +"2"); //"NaN2" console.log("A" - "B" +2); //NaN -
var a = false;var x = a?"A":"B";x最终的值是多少？//x的值最终是"B" -
下面代码的结果是多少？
var num = 10; var x = 5==num/2&&(2+2*num).toString()=="22"; console.log(x); //true -
下面的代码运行的结果是什么？
var x = "10" - (12+5).toString(); console.log(x); //-7 -
下面代码运行的结果是什么？
var x = "10" - 12 + (5).toString(); console.log(x); //-25 -
运算符的优先级是什么？（先自习查找答案）
第一步：括号 第二步：一元操作符 第三步：算术操作符 第四步：关系运算符 第五步：相等操作符 第六步：布尔操作符 最后：赋值操作符