javaScript(基础 3 运算符)

本文深入讲解JavaScript中的各类运算符,包括基本运算符如加减乘除、一元运算符如正负号、自增自减运算符、逻辑运算符、相等与关系运算符以及条件运算符。详细解析了不同类型数据在运算中的转换规则,以及如何利用这些规则进行隐式类型转换。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

基本运算符

*对非Number类型进行运算时,会将这些值转换为Number,然后在进行运算
* 任何值和NaN做运算都得NaN
* 任何的值与字符串做加法运算,都会先转换为字符串,然后在和字符串做拼接的操作
* 任何值做 - * / 运算时都会自动转换为Number

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 运算符也就操作符
			 * 	通过运算符可以对一个或多个值进行运算
			 * 	比如:typeof 就是一个运算符,可以来获得一个值的类型
			 * 		他会将该值的的类型以字符串的形式返回
			 * 		number string boolean undefind object
			 * 
			 * 	算数运算符 : + - * / %
			 * 
			 * 	对非Number类型进行运算时,会将这些值转换为Number,然后在进行运算
			 * 		任何值和NaN做运算都得NaN
			 * 		任何的值与字符串做加法运算,都会先转换为字符串,然后在和字符串做拼接的操作
			 * 			我们可以利用这一点,来将一个任意的数据类型转换为String
			 * 			我们只需要为任意的数据类型 + 一个 "" 即可将其转换为String
			 * 			这是一种隐式的类型转换,由浏览器自动完成,实际上它也是调用String函数
			 */
			var a = 123;
			var result = typeof a;
			
			
			result = true + false; //1
			
			result = true + NaN;  //NaN
			
			result = 2  + null;   //2
			
			result = "123" + "345";  //123345
			
			result = 123 + "12";    //12312
			
			result = true + "12";   //true12
			
			result = NaN + "12";
			console.log(result);  
			console.log(typeof result); 
			
			
			var c = 21;
			c = c + "";
			console.log(typeof c);
			
			/*
			 * 任何值做  -  * / 运算时都会自动转换为Number
			 * 	我们可以利用这一点做隐式的类型转换
			 * 		可以通过一个值 -0 *1 /1 来将其转换为Number
			 * 		原理和Number()函数一样,使用起来更加简单
			 */
			var b = 2 - true; //1
			
			b = 2 * "2";  //4
			
			b = 3 /"3";  
			
			
			console.log(typeof b);
			console.log(b);
			
		</script>
	</head>
	<body>
	</body>
</html>

一元运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 一元运算符, 只需要一个操作符
			 * + 正号
			 *    正号不会对数字产生任何影响
			 * - 负号
			 * 	  负号对原有的数字进行取反
			 * 
			 * 对于非Number类型的值
			 * 	它会先将转换为Number,然后再运算
			 * 	可以对一个其他的数据类型使用 + ,来将其转换为Number,原理和Number()函数一样
			 * 
			 * 
			 * 
			 */
			
			var a = 123;
			a = +a; //123
			a = -a; //-123
			
			a = -true; //-1
			
			a = "18";
			a = -a;  //-18
			
			/*console.log(typeof  a);
			console.log("a = " + a);*/
			
			var result = 1 + "2" +3; //123
			
			result = 1 + +"2" +3; //6
			console.log(result);
		</script>
	</head>
	<body>
	</body>
</html>

自增自减

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 自增 ++:通过自增使变量在自身的基础上增加1
			 * 	自增分两种:后++(a++)和 前++(++a)
			 * 		相同:的是都自加1
			 * 		不同:a++的值等于原变量的值(自增前的值) ++a的值等于原变量的新值(自增后的值)
			 * 
			 * 自减 --:通过自减使变量在自身的基础上减少1
			 * 	自减分两种: 后--(a-- )和 前--(--a)
			 * 		相同:的是都自减1
			 * 		不同:a--的值等于原变量的值(自减前的值) --a的值等于原变量的新值(自减后的值)
			 */
			
			var a = 1;
			a++;
			++a;
			/*console.log(a);*/
			
			var c = 10;
			
			c++; //11
			
			console.log(c++);
			
			var d = 20;
			var result = d++ + ++d + d;  //64
			console.log(result);
		</script>
	</head>
	<body>
	</body>
</html>

自增自减练习

			var n1 = 10 ,n2 = 20;
			var n = n1++;
			console.log('n = '+ n);
			console.log('n1 = ' + n1);
			
			n = ++n1;
			console.log('n = '+ n);
			console.log('n1 = ' + n1);
			
			n = n2--;
			console.log('n = '+ n);
			console.log('n2 = ' + n2);
			
			n = --n2;
			console.log('n = '+ n);
			console.log('n2 = ' + n2);
			/*
			 * 
[Web浏览器] "n = 10"	/NewDay02/js/02自增自减.html (36)
[Web浏览器] "n1 = 11"	/NewDay02/js/02自增自减.html (37)
[Web浏览器] "n = 12"	/NewDay02/js/02自增自减.html (40)
[Web浏览器] "n1 = 12"	/NewDay02/js/02自增自减.html (41)
[Web浏览器] "n = 20"	/NewDay02/js/02自增自减.html (44)
[Web浏览器] "n2 = 19"	/NewDay02/js/02自增自减.html (45)
[Web浏览器] "n = 18"	/NewDay02/js/02自增自减.html (48)
[Web浏览器] "n2 = 18"	/NewDay02/js/02自增自减.html (49)
			 */

逻辑运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * js中有三种逻辑运算符
			 * !非
			 * 	!可以用来对一个值进行非运算
			 * 	非运算就是对一个布尔值进行取反操作
			 * 	对一个值进行两次取反,它不会发生变化
			 * 	如果对非布尔值进行取反,则会先转换为布尔值,在取反
			 * 		我们可以利用该特点,将一个其他数据类型转换为布尔值
			 * 		可以为一个任意数据类型取两次反,并将其转换为布尔值
			 * 		原理和Boolean一样
			 * 
			 * && 与
			 * 	运算规则:只要有一个false,就返回false,两个值都为true时,才返回true
			 * 		在js中的  与  属于短路与,如果第一个值为false,则不会看第二个值
			 * 
			 * || 或
			 * 	运算规则:两个值都是false ,才返回false ,其他都是true。
			 */
			
			var result = true && false;
			
			//result = true && alert("hello");
			result = false && alert("helloa");
			console.log(result);
			
			
			var a = true;
			a = !!a;
			
			/*console.log(a);*/
			
			var b = 10;
			
			b = !b;
			console.log(b);
			console.log(typeof b);
			
		</script>
	</head>
	<body>
	</body>
</html>

非布尔类型的逻辑运算符
&& 运算:如果两个值都为true,则返回后面的
&& 运算: 如果两个值中有false,则返回靠前的false

与运算:
* 如果第一个值为true,则必然返回第二个值。
* 如果第一个值为false,则直接返回第一个值。
或运算
* 如果第一个值为true,则直接返回第一个值。
* 如果第一个值为false,则返回第二个值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 *  && || 非布尔值的情况
			 * 		对于非布尔值进行与或运算时,会将其转换成布尔值,在运算,并返回原值
			 * 	与运算:
			 * 		如果第一个值为true,则必然返回第二个值。
			 * 		如果第一个值为false,则直接返回第一个值。
			 * 或运算
			 * 		如果第一个值为true,则直接返回第一个值。
			 * 		如果第一个值为false,则返回第二个值。
			 */
			
			//true && true
			//&& 运算,如果两个值都为true,则返回后面的
			//&& 运算: 如果两个值中有false,则返回靠前的false
			var result = 1 && 2;
			
			result = 0 && 3;
			result = 0 && NaN;
			result = NaN && 2;
			
			
			//true || true
			//如果第一个值为true,则直接返回第一个值
			result = 1 || 2;
			//如果第一个值为false ,则返回第二个值。
			result = NaN || 2;
			console.log("result= " + result);
		</script>
	</head>
	<body>
	</body>
</html>

编码问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 在字符串中使用转义字符输入Unicode编码
			 * 	\u四位编码   这是十六进制的
			 */
			
			console.log("\u2620");
			alert("\u2620")
			
		</script>
	</head>
	<body>
		
		<!--
        	在网页中使用Unicode编码
        	格式:&#编码;这里的编码是十进制
        -->
        
        <h1 style="font-size: 100px;">&#9760</h1>
        <h1 style="font-size: 100px;">&#9778</h1>
		
	</body>
</html>

关系运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 通过关系运算非符可以比较两个值之间的大小
			 * 	如果关系成立会返回true,不成立返回false
			 * < >  <= >= 
			 * 
			 * 
			 * 对于非数值类型,现将其转换成数值,在运算
			 * 如果符号两边都是字符串
			 */
			
			//console.log(1 > true);  //false
			//console.log(1 >= true); //true
			//console.log(1 > "0");   //true
			//console.log(12 > null); //true
			
			//任何值和NaN做任何比较都是false
			console.log(10 <= "hello");  //false
			console.log(true > false);  //true
			
			console.log("1" < "5");   //true
			console.log("11" < "5");  //true
			
			//比较两个字符串时,比较的是字符串的字符编码
			console.log("a" < "b");  //true
			
			//比较字符编码时是一位一位进行比较的
			//如果两位一样,比较下一位(相对的)
			console.log("abc" < "a")  //false
			
		</script>
	</head>
	<body>
	</body>
</html>

相等运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 相等运算符用来比较两个值是否相等,相等分会true,否则返回false。
			 * 
			 * 使用 == 来做相等运算
			 * 	当使用 == 来比较两个值时,如果值类型不同,
			 * 	则会自动进行类型转换,将其转换为相同的类型
			 * 	然后在比较
			 * 
			 * 不相等:与相等相反
			 * 
			 * === 
			 * 		全等
			 * 		用来判断两个值是否全等,他和相等类似,不同的是他不会自己做类型转换
			 * 			如果两个值的类型不同,直接返回false
			 * 
			 * !== 
			 * 		不全等
			 * 		用来判断两个值是否不全等,和不等类似,不同的是他不会自己做类型转换
			 * 			如果;两个值类型不同,返回true
			 */
			
			var a = 10;
			console.log(a == 3);  //false
			console.log("1" == 1); //true
			console.log("1" == true); //true
			
			console.log(null == 0);  //false
			
			//undefind 衍生自 null
			//所以这两个值做相等判断时,返回true
			
			console.log(undefined == null); //true
			
			//NaN  不和任何值相等,包括它本身。
			console.log(NaN == NaN );   //false
			
			//要判断是不是NaN 可以通过isNaN()函数来判断
			var b = NaN;
			console.log(isNaN(b));  //true
		</script>
	</head>
	<body>
	</body>
</html>

条件运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 条件运算符也叫三元运算符
			 * 	语法:
			 * 		条件表达式?语句1:语句2;
			 * 	执行流程:
			 * 		条件运算符执行,首先对条件表达式进行求值,
			 * 			如果该值为true,则执行语句1,并返回执行结果
			 * 			如果该值为false,则执行语句2,并返回结果。
			 * false?alert("hello"):alert("qwe");
			 */
			
			
			var a = 10;
			var b =64;
			var c = 43;
			
			var max = a> b ? a : b;
			max = max > c ? max : c;
			
			max = a > b ? (a> c ? a : c) :(b > c ? b :c);
			console.log(max);
		</script>
	</head>
	<body>
	</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值