Javascript基础——运算符

最新推荐文章于 2023-11-17 10:46:51 发布
最新推荐文章于 2023-11-17 10:46:51 发布
阅读量247 收藏
点赞数
分类专栏： 前端开发 JavaScript基础学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36451496/article/details/89917776
版权

Javascript基础——运算符

运算符学习要点

  1. 什么是表达式？
  2. 一元运算符
  3. 算术运算符
  4. 关系运算符
  5. 逻辑运算符
  6. *位运算符
  7. 赋值运算符
  8. 其他运算符
  9. 运算符优先级
    在这里插入图片描述

什么是表达式

表达式是 ECMAScript中的一个“ 短语”，解释器会通过计算把它转换成一个值。最简单的表达式是字面量或者变量名。例如：

5.96 					  //数值字面量
'jack' 				      //字符串字面量
true 					  //布尔值字面量
null 					  //空值字面量
/Java/ 				      //正则表达式字面量
{x:1, y:2} 		          //对象字面量、对象表达式
[1,2,3] 				  //数组字面量、数组表达式
function(n){return x+y;}; //函数字面量、函数表达式
box 					  //变量

当然，还可以通过合并简单的表达式来创建复杂的表达式。比如：

box+5.96 				//加法运算的表达式
typeof(box) 			//查看数据类型的表达式
box> 8 				    //逻辑运算表达式

通过上面的叙述，我们得知，单一的字面量和组合字面量的运算符都可称为表达式。

一元运算符

只能操作一个值的运算符叫做一元运算符。
1.递增++和递减—
2.前置和后置的区别
在没有赋值操作，前置和后置是一样的。但在赋值操作时，如果递增或递减运算符前置，那么前置的运算符会先累加或累减再赋值，如果是后置运算符则先赋值再累加或累减。

var box = 100;
var age = ++box; 			    //age值为 101
var height = box++; 			//height值为 100

3.其他类型应用一元运算符的规则

var box = '89';
box++; 				//90，数值字符串自动转换成数值
var box = 'ab';
box++; 				//NaN，字符串包含非数值转成 NaN
var box = false;
box++; 				//1， false转成数值是 0，累加就是 1
var box = 2.3;
box++; 				//3.3，直接加 1
var box = { 			//1，不设置 toString或 valueOf即为 NaN
	toString: function() {
		return 1;
	}
};
box++;

4.加和减运算符
加运算规则如下：

var box = 100; + box; 	//100，对于数值，不会产生任何影响
var box = '89'; + box; 	//89，数值字符串转换成数值
var box = 'ab'; + box; 	//NaN，字符串包含非数值转成 NaN
var box = false; + box; 	//0，布尔值转换成相应数值
var box = 2.3; + box; 	//2.3，没有变化
var box = { 			//1，不设置 toString或valueOf即为 NaN
	toString: function() {
		return 1;
	}
}; + box;

减运算规则如下：

var box = 100; - box; 	//-100，对于数值，直接变负
var box = '89'; - box; 	//-89，数值字符串转换成数值
var box = 'ab'; - box; 	//NaN，字符串包含非数值转成 NaN
var box = false; - box; 	//0，布尔值转换成相应数值
var box = 2.3; - box; 	//-2.3，没有变化
var box = { 			//-1，不设置 toString或valueOf即为NaN
	toString: function() {
		return1;
	}
}; - box;

加减运算可以在浏览器控制台中使用alert(+box)或者alert(-box)进行调试；
加法和减法运算符一般用于算术运算，也可向上面进行类型转换。

算术运算符

ECMAScript定义了 5个算术运算符，加减乘除求模(取余)。如果在算术运算的值不是数值，那么后台会先使用Number()转型函数将其转换为数值(隐式转换)。

1. 加法

var box = 1+2; 					//等于 3
var box = 1+NaN; 				//NaN，只要有一个NaN就为 NaN
var box = Infinity + Infinity; 		//Infinity
var box = -Infinity + -Infinity; 	//-Infinity
var box = Infinity + -Infinity; 		//NaN，正无穷和负无穷相加等 NaN
var box = 100+ '100'; 			//100100，字符串连接符，有字符串就不是加法
var box = '您的年龄是： ' + 10 + 20; 	//您的年龄是： 1020，被转换成字符串
var box = 10+ 20 + '是您的年龄'; 		//30是您的年龄，没有被转成字符串
var box = '您的年龄是： ' + (10 + 20); 	//您的年龄是： 30，没有被转成字符串
var box = 10+ 对象 				//10[object Object]，如果有 toString()或 valueOf()则返回 10+返回数的值

2. 减法

var box = 100 - 70; 				//等于 30
var box = -100 - 70 				//等于-170
var box = -100 - -70 				//-30，一般写成-100 - (-70)比较清晰
var box = 1 - NaN; 				//NaN，只要有一个NaN就为 NaN
var box = Infinity - Infinity; 		//NaN
var box = -Infinity - -Infinity; 	//NaN
var box = Infinity - -Infinity; 		//Infinity
var box = -Infinity - Infinity; 		//-Infinity
var box = 100 - true; 			//99， true转成数值为 1
var box = 100 - ''; 				//100， ''转成了 0
var box = 100 - '70'; 			//30， '70'转成了数值 70
var box = 100 - null; 			//100， null转成了 0
var box = 100 - 'Lee'; 			//NaN， Lee转成了 NaN
var box = 100 - 对象 				//NaN，如果有toString()或 valueOf()则返回 10-返回数的值

3. 乘法

var box = 100 * 70; 				//7000
var box = 100 * NaN; 				//NaN，只要有一个NaN即为 NaN
var box = Infinity * Infinity; 		//Infinity
var box = -Infinity * Infinity; 		//-Infinity
var box = -Infinity * -Infinity; 	//Infinity
var box = 100 * true; 			//100， true转成数值为 1
var box = 100 * ''; 				//0， ''转成了 0
var box = 100 * null; 			//0， null转成了 0
var box = 100 * 'Lee'; 			//NaN， Lee转成了 NaN
var box = 100 * 对象 				//NaN，如果有toString()或 valueOf()则返回 10 - 返回数的值

4. 除法

var box = 100 / 70; 				//1.42....
var box = 100 / NaN; 				//NaN
var box = Infinity / Infinity; 		//NaN
var box = -Infinity / Infinity; 		//NaN
var box = -Infinity / -Infinity; 	//NaN
var box = 100 / true; 			//100， true转成 1
var box = 100 / ''; 				//Infinity，
var box = 100 / null; 			//Infinity，
var box = 100 / 'Lee'; 			//NaN
var box = 100 / 对象; 				//NaN，如果有toString()或 valueOf()则返回 10 / 返回数的值

5. 求模

var box = 10 % 3; 				//1，余数为 1
var box = 100 % NaN; 				//NaN
var box = Infinity % Infinity; 		//NaN
var box = -Infinity % Infinity; 		//NaN
var box = -Infinity % -Infinity; 	//NaN
var box = 100 % true; 			//0
var box = 100 % ''; 				//NaN
var box = 100 % null; 			//NaN
var box = 100 % 'Lee'; 			//NaN
var box = 100 % 对象; 				//NaN，如果有toString()或 valueOf()则返回 10 % 返回数的值

var box;
alert(typeof box);
alert(typeof age);

关系运算符

用于进行比较的运算符称作为关系运算符：小于(<)、大于(>)、小于等于(<=)、大于等于(>=)、相等(= =)、不等(!=)、全等(恒等)(= = =)、不全等(不恒等)(!==)。和其他运算符一样，当关系运算符操作非数值时要遵循以下规则：

  1. 两个操作数都是数值，则数值比较；
  2. 两个操作数都是字符串，则比较两个字符串对应的字符编码值；
  3. 两个操作数有一个是数值，则将另一个转换为数值，再进行数值比较；
  4. 两个操作数有一个是对象，则先调用valueOf()方法或toString()方法，再用结果比较；
varbox = 3 > 2; 		//true
varbox = 3 > 22; 	//false
varbox = '3' > 22; 	//false
varbox = '3' > '22'; 	//true
varbox = 'a' > 'b'; 	//false a=97,b=98
varbox = 'a' > 'B'; 	//true B=66
varbox = 1 > 对象; 	//false，如果有toString()或valueOf()则返回1> 返回数的值

在相等和不等的比较上，如果操作数是非数值，则遵循一下规则：

  1. 一个操作数是布尔值，则比较之前将其转换为数值， false转成0， true转成1；
  2. 一个操作数是字符串，则比较之前将其转成为数值再比较；
  3. 一个操作数是对象，则先调用valueOf()或toString()方法后再和返回值比较；
  4. 不需要任何转换的情况下， null和undefined是相等的；
  5. 一个操作数是NaN，则==返回false， !=返回true；并且NaN和自身不等；
  6. 两个操作数都是对象， 则比较他们是否是同一个对象， 如果都指向同一个对象， 则返回true，否则返回false；
  7. 在全等和全不等的判断上，值和类型都相等，才返回true，否则返回false。
alert(2 == 2) 		   //true
alert('2' == 2) 	   //true， '2'会转成成数值2
alert(false == 0)  	   //true， false转成数值就是0
alert('a' == 'A') 	   //false，转换后的编码不一样
alert(2 == {}) 		   //false，执行toString()或valueOf()会改变
alert(2 == NaN) 		//false，只要有NaN，都是false
alert({} == {}) 		//false，比较的是他们的地址，每个新创建对象的引用地址都不同
var age = {};
var height = age;
alert(age == height);   //true，引用地址一样，所以相等
alert('' == false); 	//true，转成值后一样
alert('0' == false); 	//true，转成值后一样
alert('2' === 2); 	    //false，值和类型都必须相等
alert(2 !== 2); 	  	//false，值和类型都相等了

特殊值对比表：

表达式值
null == undefinedtrue
‘NaN’ == NaNfalse
5 == NaNfalse
NaN == NaNfalse
false == 0true
true == 1true
true == 2false
undefined == 0false
null == 0false
‘100’ == 100true
‘100’ === 100false

逻辑运算符

逻辑运算符通常用于布尔值的操作，一般和关系运算符配合使用，有三个逻辑运算符：逻辑与(AND)、逻辑或(OR)、逻辑非(NOT)。
1.逻辑与(AND) ： &&

第一个操作数第二个操作数结果
truetruetrue
truefalsefalse
falsefalsefalse

如果两边的操作数有一个操作数不是布尔值的情况下，与运算就不一定返回布尔值，此时，遵循以下规则：

  1. 第一个操作数是对象，则返回第二个操作数；
  2. 第二个操作数是对象，则第一个操作数返回 true，才返回第二个操作数，否则返回 false;
  3. 有一个操作数是 null，则返回 null；
  4. 有一个操作数是 undefined，则返回undefined。
alert({} && (5 > 4)); 	    //true，返回第二个操作数
alert((5 > 4) && {}) 		//[object Object]
alert((3 > 4) && {}) 		//false
alert((5 > 4) && null) 	    //null

逻辑与运算符属于短路操作，顾名思义，如果第一个操作数返回是 false，第二个数不管是 true还是false都返回的 false。

alert(true && age) 		    //出错， age未定义
alert(false && age) 		//false，不执行age了

2.逻辑或(OR)： ||

第一个操作数第二个操作数结果
truetruetrue
truefalsetrue
falsefalsefalse

如果两边的操作数有一个操作数不是布尔值的情况下，逻辑与运算就不一定返回布尔值，此时，遵循以下规则：

  1. 第一个操作数是对象，则返回第一个操作数；
  2. 第一个操作数的求值结果为 false，则返回第二个操作数；
  3. 两个操作数都是对象，则返回第一个操作数；
  4. 两个操作数都是 null，则返回 null；
  5. 两个操作数都是 NaN，则返回 NaN；
  6. 两个操作数都是 undefined，则返回undefined；
alert({} || (5 > 3)); 		//[object Object]
alert((5 > 3) || {}); 		//true
alert({} || {}); 			//[object Object]
alert(null || null); 	    //null
alert(NaN || NaN) 			//NaN
alert(undefined || undefined) 	//undefined

和逻辑与运算符相似，逻辑或运算符也是短路操作。当第一操作数的求值结果为 true，就不会对第二个操作数求值了。

alert(true || age); 			//true
alert(false || age); 			//出错， age未定义

3.逻辑非(NOT)： !
逻辑非运算符可以用于任何值。无论这个值是什么数据类型， 这个运算符都会返回一个布尔值。它的流程是：先将这个值转换成布尔值，然后取反，规则如下：

  1. 操作数是一个对象，返回 false；
  2. 操作数是一个空字符串，返回 true；
  3. 操作数是一个非空字符串，返回 false；
  4. 操作数是数值 0，返回 true；
  5. 操作数是任意非 0数值(包括 Infinity)， false；
  6. 操作数是 null，返回 true；
  7. 操作数是 NaN，返回 true；
  8. 操作数是 undefined，返回 true；
var box = !(5 > 4); 	//false
var box = !{}; 		    //false
var box = !''; 		    //true
var box = !'Lee';  	    //false
var box = !0; 		    //true
var box = !8; 		    //false
var box = !null; 	    //true
var box = !NaN; 		//true
var box = !undefined;   //true

使用一次逻辑非运算符， 流程是将值转成布尔值然后取反。而使用两次逻辑非运算符就是将值转成成布尔值取反再取反，相当于对值进行 Boolean()转型函数处理。

var box = !!0;     //false
var box = !!NaN;   //false

通常来说， 使用一个逻辑非运算符和两个逻辑非运算符可以得到相应的布尔值， 而使用三个以上的逻辑非运算符固然没有错误，但也没有意义。

*位运算符

在一般的应用中，我们基本上用不到位运算符。虽然，它比较基于底层，性能和速度会非常好，而就是因为比较底层，使用的难度也很大。所以，我们作为选学来对待。
位运算符有七种， 分别是： 位非 NOT(~)、 位与 AND(&)、 位或 OR （ |）、 位异或 XOR(^)、左移(<<)、有符号右移(>>)、无符号右移(>>>)。

var box = ~25; 		//-26
var box = 25 & 3; 	//1
var box = 25 | 3; 	//27
var box = 25 << 3; 	//200
var box = 25 >> 2; 	//6
var box = 25 >>> 2; 	//6

赋值运算符

赋值运算符用等于号(=)表示，就是把右边的值赋给左边的变量。
复合赋值运算符通过 x=的形式表示， x表示算术运算符及位运算符。

var box = 100;
box= box+100;    //200，自己本身再加 100

这种情况可以改写为：

var box = 100；
box+= 100; 		//200， +=代替 box+100

其他运算符

1.字符串运算符
字符串运算符只有一个，即： “+”。它的作用是将两个字符串相加。
规则：至少一个操作数是字符串即可。

var box = '100' + '100'; 	//100100
var box = '100' + 100; 	//100100
var box = 100+ 100; 		//200

2.三元条件运算符
三元条件运算符其实就是后面将要学到的 if语句的简写形式。

var box = 5 > 4 ? '对' : '错';//对， 5>4返回 true则把'对'赋值给 box，反之。相当于：
var box = ''; 			//初始化变量
if(5 > 4) { 			//判断表达式返回值
	box = '对'; 		//赋值
} else {
	box = '错'; 		//赋值
}

运算符优先级

在一般的运算中， 我们不必考虑到运算符的优先级， 因为我们可以通过圆括号来解决这种问题。比如：

var box = 5 - 4 * 8; 		//-27
var box = (5 - 4) * 8; 	//8

但如果没有使用圆括号强制优先级，我们必须遵循以下顺序：

运算符描述
. [] ()对象成员存取、数组下标、函数调用等
++ – ~ ! delete new typeof void一元运算符
* / %乘法、除法、去模
+ - +加法、减法、字符串连接
<< >> >>>移位
< <= > >= instanceof关系比较、检测类实例
= = !、= =、= = !、==恒等(全等)
&位与
^位异或
位或
&&逻辑与
逻辑或
?:三元条件
=x=赋值、运算赋值
,多重赋值、数组元素
Angular baby
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript——运算符
aliyun3的博客
04-09 329
1.什么是表达式 表达式是ECMAScript中的一个“短语”，解释器会通过计算把它转换成一个值。最简单的表达式是字面量或者变量名。 例如： 5.96 //数值字面量 'Lee' //字符串字面量 true //布尔值字面量 null //空值字面量 /Java/ //正则表达式字面量{x:1, y:2} //对象字面量、对象表达式 [1,2,3] //数组字面量、数组表达式 function(n) {return x+y;} //函数字面量...
JavaScript基础之数值计算
BradenHan的专栏
05-10 1324
它具有灵活的表达式解析器，支持符号计算，配有大量内置函数和常量，并提供集成解决方案来处理不同的数据类型 像数字，大数字(超出安全数的数字)，复数，分数，单位和矩阵。还有一些其他的解决方案，简单的说需要将浮点数转换字符串，分隔成为整数部分和小数部分，小数部分再转换为整数，计算结果后，再转换为浮点数。xx的形式，其中xx…因此，JavaScript提供的有效数字最长为53个二进制位（64位浮点的后52位+有效数字第一位的1）。符号位决定了一个数的正负，指数部分决定了数值的大小，小数部分决定了数值的精度。
javaScript的数学计算
weixin_44044929的博客
12-16 1万+
js自带的数学计算的方法 默认加减乘除符号: +、-、*、/ NaN与任意操作数加减乘除,结果都是NaN 加法 数字与字符串相加会拼接成字符串 //特殊操作数的求和(n代表任意数字) //NaN与任意操作数相加，结果都是NaN console.log(NaN + n); //Infinity.与任意操作数相加，结果都是Infinity //无限。与任意操作数相加，结果都是无限 console.log(Infinity + n); //(infinity+n); //Infinity与Infinity相加，
JS之数据运算
狡辉两门的博客
03-12 901
运算符 算术（数学）运算 支持：加(+)、减(-)、乘(*)、除(/)、求余(%) 值得注意的是，+和-可以放到单个数据的前面，表示正负。 算术运算的表达式一定返回数字，可以利用其特点做类型转换 字符串拼接 当’+'的两端有一个是字符串时，不再进行算术运算，而变为字符串拼接 表达式一定返回string，可以利用其特点做类型转换 赋值运算 涉及的运算符:= += -= *= /= %=。 其中，a += xxx，等效于a = a + (xxx)，其他类似 小贴士 赋值表达式始终返回赋值结果，我们
js数值计算公式是什么,js计算数学表达式
最新发布
chatgpt001的博客
11-17 568
例如:每天需要完成8个小时，480分钟的工作时间, 求每时每刻的工作完成率问题，百分比后面保留两位小数(四舍五入)。思路:工作时间除以总时间，再乘以10000，执行四舍五入的方法，再除以100，就是得到完成率了。//总工作时长//已经工作时长//工作完成率S//输出: 20.83%
双逻辑非(!!)操作符
王二狗
05-06 2511
双逻辑非操作符的作用双逻辑非操作，会把一个值（数字，字符串…..）转换为布尔值。第一次逻辑非操作取反的布尔，第二次获得最初元素本身对应的布尔。alert(!!false); //falsealert(!!"blue"); //truealert(!!0); //falsealert(!!NaN) //falsealert(!!12345) //tr
javascript运算符——逻辑运算符全面解析
10-22
下面小编就为大家带来一篇javascript运算符——逻辑运算符详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javascript运算符——位运算符全面介绍
10-21
下面小编就为大家带来一篇javascript运算符——位运算符全面介绍。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javascript运算符——位运算符全面介绍.docx
01-19
javascript运算符——位运算符全面介绍.docx
精通Javascript系列之数值计算
12-12
更直观一点： ——————— 例：var a=32.6; var b=67; var c=9e5; ——————— 对于数值类型，如果希望转换为科学计数法，可以采用toExponential()方法，该方法接受一个参数，表示要输出小数倍数： ——————— 例： var a=78.9; alert&#40;a.toExponential(1&#41;); ——————— js 中对数值的格式化问题 对数字进行格式化输出，是非常有意义的一件事情，例如许多时候，我们希望一个数字能够输出为指定格式的字符串，拿26.9878来说，我们可能会希望它能保留两位小数来说出，即结果为26.99，或者对于0.345678，希望
双重非运算符
前端泡面人
10-11 248
双重非
JavaScript实现简单计算器
热门推荐
weixin_47261870的博客
07-02 3万+
JavaScript和HTML实现简单计算器功能
JavaScript基本概念——各种操作符详解之加性、乘性操作符详解、关系操作符详解
努力发paper中的业余分享爱好者
08-11 242
1.乘性操作符 （1）乘法：符号 * ，用于两个数值计算。遵循如下规则： 操作数都是数值，执行正常的乘法计算。两个正数相乘为正数，负数相乘为正数。 一个操作数为NaN，结果为NaN Infinity * 0，结果为NaN Infinity * 非0，结果Infinity或-Infinity，取决于非0的符号 Infinity * Infinity ，结果Infinity 一个操作数不是数值，先使...
javascript的数字运算
sophia1010的专栏
02-09 2243
一、浮点型数字的精度 问题：JS中的数据类型即Number，这种类型使用IEEE754格式来表示整数和浮点数值，用 IEEE 754(二进制浮点数算术标准) 标准的64 位双精度浮点数数做运算的时候经常有一些问题。 组成：1位符号位， s 表示 ，0表示正数，1表示负数；11位– 储存指数部分 e 表示 ；52位–储存小数部分（即有效数字）f 表示。 原因：浮点数用二进制表达时是无穷的，因浮点...
C语言中两个非运算（!!）的作用
Andy的博客
03-23 6989
C语言中两个非运算（!!）的作用
JavaScript比较运算符详解与应用
在JavaScript中，比较运算符是编程的基础，用于判断两个值之间的关系。"(小于)"运算符用来比较两个值，如果左边的值小于右边的值，则返回true，否则返回false。同样，"(大于)"用于判断左边的值是否大于右边的值，"...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值