JavaScript 运算符

1. 运算符

  • JS中为我们定义了一套对数据进行运算的 运算符。
  • 这其中包括:算数运算符、位运算符、关 系运算符等。

1.1 算数运算符

  • 算数运算符顾名思义就是进行算数操作的运算符。
  • JS中为我们提供了多种算数运算符。
  • 算数运算符:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 运算符也叫操作符
			 * 	通过运算符可以对一个或多个值进行运算,并获取运算结果
			 * 	比如:typeof就是运算符,可以来获得一个值的类型
			 * 		它会将该值的类型以字符串的形式返回
			 * 		number string boolean undefined object
			 * 
			 * 	算数运算符
			 * 		当对非Number类型的值进行运算时,会将这些值转换为Number然后在运算
			 * 			任何值和NaN做运算都得NaN
			 * 
			 * 		+
			 * 			+可以对两个值进行加法运算,并将结果返回
			 * 			 如果对两个字符串进行加法运算,则会做拼串
			 * 				会将两个字符串拼接为一个字符串,并返回
			 * 			任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作
			 * 		-
			 * 			- 可以对两个值进行减法运算,并将结果返回
			 * 
			 * 		*
			 * 			* 可以对两个值进行乘法运算
			 * 		/
			 * 			/ 可以对两个值进行除法运算
			 * 		%
			 * 			% 取模运算(取余数)
			 */
			var a = 123;
			
			var result = typeof a;
			
			//console.log(typeof result);
			
			result = a + 1;
			

			
			result = 456 + 789;
			
			result = true + 1;
			
			result = true + false;
			
			result = 2 + null;
			
			result = 2 + NaN;
			
			result = "你好" + "大帅哥";
			
			var str = "锄禾日当午," +
					  "汗滴禾下土," +
					  "谁知盘中餐," +
					  "粒粒皆辛苦";
					  
					  
			result = 123 + "1";
			
			result = true + "hello";
			
			//任何值和字符串相加都会转换为字符串,并做拼串操作
			/*
			 * 我们可以利用这一特点,来将一个任意的数据类型转换为String
			 * 	我们只需要为任意的数据类型 + 一个 "" 即可将其转换为String
			 * 	这是一种隐式的类型转换,由浏览器自动完成,实际上它也是调用String()函数
			 */
			var c = 123;
			
			c = c + "";
			
			//c = null;
			
			//c = c + "";
			
			
			//console.log(result);
			//console.log(typeof c);
			//console.log("c = "+c);
			
			result = 1 + 2 + "3"; //33
			
			result = "1" + 2 + 3; //123
			
			result = 100 - 5;
			
			result = 100 - true;
			
			result = 100 - "1";
			
			result = 2 * 2;
			
			result = 2 * "8";
			
			result = 2 * undefined;
			
			result = 2 * null;
			
			result = 4 / 2;
			
			result = 3 / 2;
			
			/*
			 * 任何值做- * /运算时都会自动转换为Number
			 * 	我们可以利用这一特点做隐式的类型转换
			 * 		可以通过为一个值 -0 *1 /1来将其转换为Number
			 * 		原理和Number()函数一样,使用起来更加简单
			 */
			
			var d = "123";
			
			//console.log("result = "+result);
			
			d = d - 0;
			
			/*console.log(typeof d);
			console.log(d);*/
			
			result = 9 % 3;
			result = 9 % 4;
			result = 9 % 5;
			
			console.log("result = "+result);
			
		</script>
	</head>
	<body>
	</body>
</html>

1.2 自增和自减

自增++ 自减 —

  • –  自增和自减分为前置运算和后置元素。
  • –  所谓的前置元素就是将元素符放到变量的前边,而后置将元素符放到变 量的后边。
  • –  例子:
    • 前置自增:++a • 后置自减:a—
  • –  运算符在前置时,表达式值等于变量原值。
  • –  运算符在后置是,表达式值等于变量变更以后的值。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 一元运算符,只需要一个操作数
			 * 	+ 正号
			 * 		- 正号不会对数字产生任何影响
			 * 	- 负号
			 * 		- 负号可以对数字进行负号的取反
			 * 
			 * 	- 对于非Number类型的值,
			 * 		它会将先转换为Number,然后在运算
			 * 		可以对一个其他的数据类型使用+,来将其转换为number
			 * 		它的原理和Number()函数一样
			 */
			
			var a = 123;
			
			a = -a;
			
			a = true;
			
			a = "18";
			
			a = +a;
			
			/*console.log("a = "+a);
			console.log(typeof a);*/
			
			var result = 1 + +"2" + 3;
			
			console.log("result = "+result);
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 自增 ++
			 * 	 - 通过自增可以使变量在自身的基础上增加1
			 * 	 - 对于一个变量自增以后,原变量的值会立即自增1
			 * 	 - 自增分成两种:后++(a++) 和 前++(++a)	
			 * 		无论是a++ 还是 ++a,都会立即使原变量的值自增1
			 * 			不同的是a++ 和 ++a的值不同
			 * 		a++的值等于原变量的值(自增前的值)
			 * 		++a的值等于新值 (自增后的值)
			 * 
			 * 自减 --
			 * 	- 通过自减可以使变量在自身的基础上减1
			 * 	- 自减分成两种:后--(a--) 和 前--(--a)
			 * 		无论是a-- 还是 --a 都会立即使原变量的值自减1
			 * 			不同的是a-- 和 --a的值不同
			 * 				a-- 是变量的原值 (自减前的值)
			 * 				--a 是变量的新值 (自减以后的值)
			 * 			
			 * 	
			 */
			
			var num = 10;
			
			//num--;
			//--num;
			
			//console.log(num--);
			console.log(--num);
			
			console.log("num = "+num);
			
			
			var a = 1;
			
			//使a自增1
			//a++;
			//++a;
			
			//console.log(a++);
			
			//console.log("++a = " + ++a);
			/*console.log("a++ = " + a++);
			
			console.log("a = "+a);*/
			
			
			var c = 10;
			
			//第一次c++,是在10的基础上自增
			//console.log(c++);
			
			//第二次c++,是在11的基础上自增
			c++;
			
			var d = 20;
			
			//console.log(++d);//21
			//console.log(++d);//22
			
			//20 + 22 + 22
			//var result = d++ + ++d + d ;
			
			
			//d = 20
			d = d++;
			
			/*
			 * var e = d++;
			 * d = e;
			 */
			
			//console.log("d = "+d);
			
			
			
			
		</script>
		
	</head>
	<body>
	</body>
</html>

1.3 逻辑操作符

  • 一般情况下使用逻辑运算符会返回一个布尔值。
  • 逻辑运算符主要有三个:非、与、或。
  • 在进行逻辑操作时如果操作数不是布尔类型则会将其转换 布尔类型在进行计算。
  • 非使用符号 ! 表示,与使用 && 表示,或使用 || 表示。

1.3.1

  • 非运算符使用 ! 表示。
  • 非运算符可以应用于任意值,无论值是什么类型,这个运算符都会返回一个布尔值。
  • 非运算符会对原值取反,比如原值是true使用非运算符会 返回false,原值为false使用非运算符会返回true。

1.3.2 与

  • 与运算符使用 && 表示。
  • 与运算符可以应用于任何数据类型,且不一定返回布尔 值。
  • 对于非布尔值运算,会先将非布尔值转换为布尔值。
  • 对布尔值做运算时,如果两个值都为true则返回true, 否则返回false。
  • 非布尔值时:如果两个都为true,则返回第二个值,如 果两个值中有false则返回靠前的false的值。

1.3.3 或

  • 或运算符使用 || 表示。
  • 或运算符可以应用于任何数据类型,且不一定返回布尔值。
  • 对于非布尔值运算,会先将非布尔值转换为布尔值。
  • 对布尔值进行运算时,如果两个值都为false则返回false, 否则返回true。
  • 非布尔值时:如果两个都为false ,则返回第二个值,否 则返回靠前true的值。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * JS中为我们提供了三种逻辑运算符
			 * ! 非
			 * 	- !可以用来对一个值进行非运算
			 * 	- 所谓非运算就是值对一个布尔值进行取反操作,
			 * 		true变false,false变true
			 * 	- 如果对一个值进行两次取反,它不会变化
			 * 	- 如果对非布尔值进行元素,则会将其转换为布尔值,然后再取反
			 * 		所以我们可以利用该特点,来将一个其他的数据类型转换为布尔值
			 * 		可以为一个任意数据类型取两次反,来将其转换为布尔值,
			 * 		原理和Boolean()函数一样
			 * 
			 * && 与
			 * 	- &&可以对符号两侧的值进行与运算并返回结果
			 * 	- 运算规则
			 * 		- 两个值中只要有一个值为false就返回false,
			 * 			只有两个值都为true时,才会返回true
			 * 		- JS中的“与”属于短路的与,
			 * 			如果第一个值为false,则不会看第二个值
			 * 
			 * || 或
			 * 	- ||可以对符号两侧的值进行或运算并返回结果
			 * 	- 运算规则:
			 * 		- 两个值中只要有一个true,就返回true
			 * 			如果两个值都为false,才返回false
			 *		- JS中的“或”属于短路的或
			 * 			如果第一个值为true,则不会检查第二个值
			 */
			
			//如果两个值都是true则返回true
			var result = true && true;
			
			//只要有一个false,就返回false
			result = true && false;
			result = false && true;
			result = false && false;
			
			//console.log("result = "+result);
			
			//第一个值为true,会检查第二个值
			//true && alert("看我出不出来!!");
			
			//第一个值为false,不会检查第二个值
			//false && alert("看我出不出来!!");
			
			//两个都是false,则返回false
			result = false || false;
			
			//只有有一个true,就返回true
			result = true || false;
			result = false || true ;
			result = true || true ;
			
			//console.log("result = "+result);
			
			//第一个值为false,则会检查第二个值
			//false || alert("123");
			
			//第一个值为true,则不再检查第二个值
			//true || alert("123");
			
			
			
			var a = false;
			
			//对a进行非运算
			a = !a;
			
			//console.log("a = "+a);
			
			var b = 10;
			b = !!b;
			
			//console.log("b = "+b);
			//console.log(typeof b);
			
		</script>
	</head>
	<body>
	</body>
</html>

Leave a comment

您的电子邮箱地址不会被公开。 必填项已用 * 标注