web前端开发之JavaScript篇:浅谈js运算符的那些事

举报
运气男孩 发表于 2020/07/18 12:45:56 2020/07/18
【摘要】 详细讲述了web前端开发之JavaScript篇:浅谈js运算符的那些事,还有大家容易混淆的i++与++i 的区别,以及各类运算符的优先级。

浅谈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运算符的那些事就在这里告一段落了,各位小伙伴,咱们下次再会

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。