目 录CONTENT

文章目录

JavaScript运算符

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 6693 阅读 / 45689 字

JavaScript运算符

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

一元操作符

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

递增递减操作符

递增操作符

var a = 3;
var b = 3;

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

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

递增操作符每次都是对自己加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

image-20200413160958260

操作原则

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

全等操作符

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

基本数据类型StringNumberBooleanUndefinedNull
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条,我们后面讲字符串对象以后就可以了】

image-20200715165600072

条件操作符

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

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

成立成立不成立不成立成立不成立a>ba>cacb>cb

赋值操作符

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

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. 运算符的优先级是什么?(先自习查找答案)

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

评论区