web前端开发之JavaScript篇:浅谈js运算符的那些事
浅谈js的运算符
运算符( operator )也被称为操作符,用于实现赋值比较和执行算数运功能的符号。
JavaScript中常用的运算符有:
●算数运算符
运算符 | 描述 |
+ | 加法 |
- | 减法 |
* | 乘法 |
/ | 除法 |
% | 取余 |
++ | 递加 |
-- | 递减 |
例:
var x = 7; var y = 8; var z = x * y;
算数运算符用于对数字执行算数运算,和我们所学的数学类似。
递增与递减运算符
如果需要反复给数字变量添加或减去1 , 可以使用递增( ++ )和递减(-- )运算符来完成。
在JavaScript中,递增( ++ )和递减( -- )既可以放在变量前面,也可以放在变量后面。放在变量前面时,
我们可以称为前置递增(递减)运算符,放在变后面时,我们可以称为后置递增(递减)运算符。
注意:递增和递减运算符必须和变配合使用。
在日常开发中,我们经常把i++和++i弄混淆,看似一样,其实不同
现在我们来详细了解一下
前置
++i前置递增,++i是先进行自增或者自减运算,再进行表达式运算。
先自加,后运算。
后置
i++后置递增,就是自加1 , 类似于i= i + 1
但是i++写起来更简单。
先返回原值,后自加
var a = 10; console.log(a++ - --a); // 0 a++返回10,然后+1,此时a=11 a--先运算再返回,此时11-1=10,返回10
运算结果可以发现,单行代码,仅从i的值来看,++i和i++最终的i值是一样的,都是i自增加了1
小结
●前置递增和后置递增运算符可以简化代码的编写,让变的值+ 1比以前写法更简单
●单独使用时,运行结果相同
●与其他代码联用时,执行结果会不同
●后置:先原值运算,自加(先配)
●前置:先自加,后运算(先已后人)
●开发时,多使用后置递增/减,诅代码独占-行,例如: num+ +;或者num--;
●比较运算符
概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值( true/ false )作为比较运算的结果。
运算符 |
描述 |
== |
等于 |
=== | 等值等型 |
!= | 不相等 |
!== |
不等值或不等型 |
> | 大于 |
< | 小于 |
>= | 大于或等于 |
<= | 小于或等于 |
? | 三元运算符 |
比较运算符在逻辑语句中使用,以判定变量或值是否相等。
我举个是否成年的例子:
var age=17;//比较运算符用来判断条件 if (age >= 18){ console.log("你已经成年了!"); }else{ "你还没成年嗷!" }
三元运算符:“? :”
语法:条件表达式? 表达式1 : 表达式2
如果条件表达式为真,则返回表达式1的值,否则返回表达式2的值。
例:
var num = 10; var result = num > 5 ? 'yes' : 'no'; //'yes' //我们看到num=10,符合num>5这个条件,返回表达式1 的值也就是 yes
●逻辑运算符
概念:逻辑运算符是用来进行布尔值运算的运算符,返回值也是布尔值。后面开发中经常用于多个条件的判断
运算符 |
描述 |
&& | 逻辑与 |
|| | 逻辑或 |
! | 逻辑非 |
逻辑与
●语法:表达式1 &&表达式2
●如果第一个表达式的值为真,则返回表达式2
●如果第一个表达式的值为假,则返回表达式1
逻辑或
●语法:表达式1||表达式2
●如果第一个表达式的值为真,则返回表达式1
●如果第一个表达式的值为假,则返回表达式2
例:
var x = 6 ; var y = 3; console.log("x < 10 && y > 1");//为 true console.log("x == 5 || y == 5");//为 false console.log("!(x == y) ");//为 true
短路运算(逻辑中断)
短路运算的原理:当多个表达式(值)时左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;
逻辑与运算如果表达式1 结果为真,则返回的是表达式2,如果表达式1结果为假,则返回表达式1
逻辑或短路运算如果表达式1 结果为真,则返回的是表达式1,如果表达式1结果为假,则返回表达式2
逻辑运算 |
表达式1 | 表达式2 | 返回值 |
逻辑与 | true | false | 表达式2 |
逻辑或 | true | flase | 表达式1 |
例:
console.log(123 && 456 || 789); console.log(0 && 123 || 456);
上面运算结果为123 0 考虑了运算优先级和逻辑中断
●赋值运算符
运算符 | 例子 | 等同于 |
= | x=y | x=y |
+= | x += y | x = x+y |
-= | x -= y | x=x-y |
*= | x * = y | x = x*y |
/= | x / = y | x = x/y |
%= | x %=y | x = x%y |
加法赋值运算符(+=)向变量添加一个值。
将右边的值赋值给 左边!
例:
var x = 7; x += 8; //15
最后来说说运算符的优先级
优先级 |
运算符 | 顺序 |
1 | 小括号 | ( ) |
2 | 一元运算符 | ++ -- ! |
3 | 算术运算符 |
先* / % 后 + - |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先&& 后\\ |
7 | 赋值运算符 | = |
例:
console.log(123 && 456 || 789); //123 console.log(0 && 123 || 456); // 0
这个就体现了逻辑运算符的优先级
字符串运算符
+ 运算符也可用于对字符串进行相加(concatenate,级联)。
txt1 = "Hello"; txt2 = "world"; txt3 = txt1 + " " + txt2;
这个txt3 的结果就是Hello world
+= 赋值运算符也可用于相加(级联)字符串:
txt1 = "Hello "; txt1 += "Kitty!";
结果为:
Hello Kitty!
提示:在用于字符串时,+ 运算符被称为级联运算符
字符串和数字的相加
相加两个数字,将返回和,但对一个数字和一个字符串相加将返回一个字符串:
x = 7 + 8; y = "7" + 8; z = "Hello" + 7;
结果为:
15 78 Hello7
提示:如果您对数字和字符串相加,结果将是字符串!
好了,关于浅谈js运算符的那些事就在这里告一段落了,各位小伙伴,咱们下次再会
- 点赞
- 收藏
- 关注作者
评论(0)