JS-运算符

尚硅谷JavaScript高级教程(javascript实战进阶)

个人认为Java或C++有一定基础学这个基础知识很舒服。

运算符也叫操作符

通过运算符可以对一个或多个值进行运算,并获取运算结果

比如：typeof就是运算符，可以来获得一个值的类型

它会将该值的类型以字符串的形式返回

number string boolean undefined object

1. 算数运算符

当对非Number类型的值进行运算时，会将这些值转换为Number然后在运算
任何值和NaN做运算都得NaN

“ + ” 可以对两个值进行加法运算，并将结果返回
如果对两个字符串进行加法运算，则会做拼串
会将两个字符串拼接为一个字符串，并返回
任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作

//任何值和字符串相加都会转换为字符串，并做拼串操作
/*
* 我们可以利用这一特点，来将一个任意的数据类型转换为String
* 	我们只需要为任意的数据类型 + 一个 "" 即可将其转换为String
* 	这是一种隐式的类型转换，由浏览器自动完成，实际上它也是调用String()函数
*/
		var a = 123;

        var result = typeof a;

        //console.log(typeof result);//number

        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";

“ - ” 可以对两个值进行减法运算，并将结果返回
**“ * ”**可以对两个值进行乘法运算
" / " 可以对两个值进行除法运算
" % " 取模运算（取余数）

/*
*  任何值做- * /运算时都会自动转换为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);


		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;

2. 一元运算符

<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>

3. 自增自减

<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>

4. 逻辑运算符

<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>

5. 关系运算符：

<script type="text/javascript">
			
			/*
			 * 通过关系运算符可以比较两个值之间的大小关系，
			 * 	如果关系成立它会返回true，如果关系不成立则返回false
			 * 
			 * > 大于号
			 * 	- 判断符号左侧的值是否大于右侧的值
			 * 	- 如果关系成立，返回true，如果关系不成立则返回false
			 * 
			 * >= 大于等于
			 * 	- 判断符号左侧的值是否大于或等于右侧的值
			 * 
			 * < 小于号
			 * <= 小于等于
			 * 
			 * 非数值的情况
			 * 	- 对于非数值进行比较时，会将其转换为数字然后在比较
			 * 	- 如果符号两侧的值都是字符串时，不会将其转换为数字进行比较
			 * 		而会分别比较字符串中字符的Unicode编码
			 */
			
			var result = 5 > 10;//false
			
			result = 5 > 4; //true
			
			result = 5 > 5; //false
			
			result = 5 >= 5; //true
			
			result = 5 >= 4; //true
			
			result = 5 < 4; //false
			
			result = 4 <= 4; //true
			
			//console.log("result = "+result);
			
			//console.log(1 > true); //false
			//console.log(1 >= true); //true
			//console.log(1 > "0"); //true
			//console.log(10 > 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" < "bcd");//true
			//比较中文时没有意义
			//console.log("戒" > "我"); //true
			
			//如果比较的两个字符串型的数字，可能会得到不可预期的结果
			//注意：在比较两个字符串型的数字时，一定一定一定要转型
			console.log("11123123123123123123" < +"5"); //true
			
</script>

6. 相等运算符：

		<script type="text/javascript">
			
			/*
			 * 相等运算符用来比较两个值是否相等，
			 * 	如果相等会返回true，否则返回false
			 * 
			 * 使用 == 来做相等运算
			 * 	- 当使用==来比较两个值时，如果值的类型不同，
			 * 		则会自动进行类型转换，将其转换为相同的类型
			 * 		然后在比较
			 * 不相等
			 * 	 不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false
			 * 	- 使用 != 来做不相等运算
			 * 	- 不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false
			 * 
			 * 		
			 *  ===
			 * 		全等
			 * 		- 用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换
			 * 			如果两个值的类型不同，直接返回false
			 * 	!==
			 * 		不全等
			 * 		- 用来判断两个值是否不全等，和不等类似，不同的是它不会做自动的类型转换
			 * 			如果两个值的类型不同，直接返回true
			 */
			
			//console.log(1 == 1); //true
			
			var a = 10;
			
			//console.log(a == 4); //false
			
			//console.log("1" == 1); //true
			
			//console.log(true == "1"); //true
			
			//console.log(null == 0); //false
			
			/*
			 * undefined 衍生自 null
			 * 	所以这两个值做相等判断时，会返回true
			 */
			//console.log(undefined == null);
			
			/*
			 * NaN不和任何值相等，包括他本身
			 */
			//console.log(NaN == NaN); //false
			
			var b = NaN;
			
			//判断b的值是否是NaN
			//console.log(b == NaN);
			/*
			 * 可以通过isNaN()函数来判断一个值是否是NaN
			 * 	如果该值是NaN则返回true，否则返回false
			 */
			//console.log(isNaN(b));
			
			//console.log(10 != 5); //true
			//console.log(10 != 10); //false
			//console.log("abcd" != "abcd"); //false
			//console.log("1" != 1);//false
			
			//console.log("123" === 123);//false
			//console.log(null === undefined);//false
			
			console.log(1 !== "1"); //true
			
			
</script>

7. 条件运算符

		<script type="text/javascript">
			/*
			 * 条件运算符也叫三元运算符
			 * 	语法：
			 * 		条件表达式?语句1:语句2;
			 * 	- 执行的流程：
			 * 		条件运算符在执行时，首先对条件表达式进行求值，
			 * 			如果该值为true，则执行语句1，并返回执行结果
			 * 			如果该值为false，则执行语句2，并返回执行结果
			 * 		如果条件的表达式的求值结果是一个非布尔值，
			 * 			会将其转换为布尔值然后在运算
			 */
			
			//false?alert("语句1"):alert("语句2");
			
			var a = 300;
			var b = 143;
			var c = 50;
			
			//a > b ? alert("a大"):alert("b大");
			
			//获取a和b中的最大值
			//var max = a > b ? a : b;
			//获取a b c 中的大值
			//max = max > c ? max : c;
			
			//这种写法不推荐使用，不方便阅读
			var max = a > b ? (a > c ? a :c) : (b > c ? b : c);
			
			//console.log("max = "+max);
			
			//"hello"?alert("语句1"):alert("语句2");
			
			
</script>

8. 运算符优先级

		<script type="text/javascript">
			
			/*
			 * , 运算符
			 * 	使用,可以分割多个语句，一般可以在声明多个变量时使用,
			 */
			//使用,运算符同时声明多个变量
			//var a , b , c;
			
			//可以同时声明多个变量并赋值
			//var a=1 , b=2 , c=3;
			//alert(b);
			
			/*
			 * 就和数学中一样，在JS中运算符也有优先级，
			 * 	比如：先乘除 后加减
			 * 在JS中有一个运算符优先级的表，
			 * 	在表中越靠上优先级越高，优先级越高越优先计算，
			 * 	如果优先级一样，则从左往右计算。
			 * 但是这个表我们并不需要记忆，如果遇到优先级不清楚
			 * 	可以使用()来改变优先级
			 */
			
			//var result = 1 + 2 * 3;
			
			/*
			 * 如果||的优先级高，或者两个一样高，则应该返回3
			 * 如果与的优先级高，则应该返回1
			 * 		
			 */
			var result = 1 || 2 && 3;
			
			console.log("result = "+result);	
			
</script>

9. 思维导图