JS中运算符

最新推荐文章于 2025-04-24 19:55:48 发布

昱晟168

最新推荐文章于 2025-04-24 19:55:48 发布

阅读量2.5k

点赞数

分类专栏：前端文章标签： javascript 前端 java

本文链接：https://blog.youkuaiyun.com/weixin_47267628/article/details/126789826

版权

前端专栏收录该内容

21 篇文章

订阅专栏

运算符

运算符：

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

1.算数运算符

算数运算符顾名思义就是进行算数操作的运算符。

JS中为我们提供了多种算数运算符

算数运算符有：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xQiExw9n-1662732085262)(D:\typora笔记\JS\img\1661261571916.png)]$

**运算符：**也叫做操作符，通过运算符可以对一个或多个值进行运算，并获取运算结果

比如：typeof就是运算符，可以来获得一个值的类型，它会将该值的类型以字符串的形式返回，如number string boolean undefined object运算符

算数运算符：

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

注意：+可以对两个值进行加法运算，并将结果返回

如果对两个字符串进行加法运算，则会做拼串操作，会将两个字符串拼接为一个字符串，并返回

任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串操作

注意是：任何值与字符串做+操作，得到结果都为String，因为+号在string中是拼接的操作

-号，可以对两个值进行减法运算，并将结果返回，注意是：如果操作中有其他类型，会将其他类型先转换成Number类型再进行操作

*号，可以对两个值进行乘法运算，并将结果返回，注意是：如果操作中有其他类型，会将其他类型先转换成Number类型再进行操作

/号，可以对两个值进行除法运算，并将结果返回，注意是：如果操作中有其他类型，会将其他类型先转换成Number类型再进行操作

%号，可以对两个值进行取模法运算，并将结果返回，注意是：如果操作中有其他类型，会将其他类型先转换成Number类型再进行操作

注意的是：- * / %与其他类型进行操作时，会先将其他类型转换成Number类型再进行操作

2.一元运算符

  	/*
  				 * 一元运算符，只需要一个操作数
  				 * 	+ 正号
  				 * 		- 正号不会对数字产生任何影响
  				 * 	- 负号
  				 * 		- 负号可以对数字进行负号的取反
  				 * 
  				 * 	- 对于非Number类型的值，
  				 * 		它会将先转换为Number，然后在运算
  				 * 		可以对一个其他的数据类型使用+,来将其转换为number
  				 * 		它的原理和Number()函数一样
  				 */

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

3.自增和自减

自增++ 自减--

自增和自增分为前置运算和后置元素
所谓的前置元素就是将元素符放到变量的前边，而后置将元素符放到变量的后边
例子：
前置自增：++a
后置自减：--a

运算符在前置时，表达式值等于变量原值
运算符在后置时，表达式值等于变量变更以后的值

4.逻辑操作符

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tFfBlJuA-1662732085267)(D:\typora笔记\JS\img\1661353004666.png)]$

5.非

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

6.与

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

7.或

或运算符使用||表示
或运算符可以应用于任何数据类型，且不一定返回布尔值
对于非布尔值运算，会先将非布尔值转换为布尔值
对布尔值进行运算时，如果两个值都为false则返回false，否则返回true
非布尔值时，如果两个都为false，则返回第二值，否则返回靠前true值

8.`&&`和`||`非布尔值【记住重点】

&&和||非布尔值

对于非布尔值进行与或运算时
会先将其转换成布尔值，然后再运算，并且返回原值

与运算
如果第一个值为true，则必然返回第二个值
如果第一个值为false，则直接返回第一值

或运算
如果第一个值true，则直接返回第一个值
如果第一个值false，则直接返回第二个值

9.赋值运算符

简单的赋值操作符由等于号=表示，其作用就是把右侧的值赋值给左侧的变量
如果在等于号左边添加加减乘除等运算符
+= *= -= /= %=
比如：a += 10 和 a=a+10是一样的

10.关系运算符

小于< 大于> 小于等于<= 和大于等于>=，这几个关系运算符用于对两个值进行比较，比较的规则与我们数学比较一样，但是如果比较的两个都字符串，则比较是按照字典的顺序进行比较

11.编码

注意是：在script标签中，编码是十六进制，在<body>标签内编码是十进制

12.相等和不相等运算符

在JS中使用==来判断两个值是否相等，如果相等则返回true

使用!=来表示两个值是否不相等，如果不等则返回true

注意是：null和undefined使用判断时是相等的，但是使用===全等运算符时，是不相等的，null和undefined相等，但是不全等

注意是：两个比较的值如果数据类型不同时，一般会将其转换成Number类型，再做比较

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cu9xzMer-1662732085271)(D:\typora笔记\JS\img\1661518608923.png)]$

注意是：任何值与NaN进行比较时，返回都是false，包括自己本身，如果需要判断一个值是否为NaN，需要使用一个函数isNaN(需要判断变量名);

注意是：null==0是返回false的，null在转换为Number是为0的

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>相等运算符</title>
</head>
<body>
<script type="text/javascript">
  /**
   * 1. `==`相等运算符用来比较两个值是否相等
   *    相等会返回true，否则返回false
   *
   *  2. `!=`不相等运算符用来比较两个值是否不相等
   *     不相等会返回true，否则返回false
   *
   *  3. `===`全等运算符
   *       先判断两者的类型是否相同，如果不相同，则直接返回`false`,
   *       如果相同再进行比较值是否相同
   *
   *   4. `!==` 不全等
   *        先判断两者的类型是否不相同，如果不相同，则直接返回`true`
   *        否则返回false
   */

  var num = 168;
  var a = NaN;
  var b = NaN;

  console.log(num==a);//false
  console.log(a==b);//false
  console.log(isNaN(a));//使用isNaN函数判断一个值是否为NaN
  //所以任何值与`NaN`比较返回都是`NaN`，如果需要判断一个值是否为NaN，
  //则需要使用isNaN()函数
</script>
</body>
</html>

13.全相等和不全相等

除了==以外，JS中还提供了===

===表示全等，他和==基本一致，不过==在判断两个值时会进行自动的类型转换，而===不会

同样我们还有!==表示不全等，同样比较时不会自动转型

14.逗号

使用逗号可以在一条语句中执行多次操作

比如：var num1=1,num2=2,num3=3;

使用逗号运算符分隔的语句会从左到右顺序依次执行

15.条件运算符

条件运算符也称为三元运算符，通常运算符写为：?:
这个运算符需要三个操作数，第一个操作数在 ?之前，第二个操作数在?和:之间，第三个操作数在:之后
例如：x>0 ? x :-x //求x的绝对值

16.运算符的优先级

** 加粗样式
**

17.代码块

代码块是在大括号{...}中所写的语句，以此将多条语句的集合视为一条语句来使用。

例如：{

var a = 123;

a++;

alert(a);

}

注意是：在代码块中的内容是对外完全可见的，不像Java一样，在{}中就是限制了作用域，而在JS中在{}中定义变量，在{}之外也是可以访问的【非常重点】

18.`if...else`语句

if...else语句是一种最基本的控制语句，它让JavaScript可以有条件的执行语句：
第一种形式：
		if(expression)
			statement
			
			
第二种形式：
		if(expression)
			statement
		else
     	statement
除了if和else还可以使用else if来创建多个条件分支。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>if练习</title>
</head>
<body>
<script type="text/javascript">
    var score = prompt("请您输入分数：");
    if (score == 100){
        alert("奖励一辆BMW");
    }else if (score >= 80){
        alert("奖励一台iphone15s");
    }else if (score >= 60){
        alert("奖励一本参考书");
    }else {
        alert("其他时，什么奖励也没有");
    }
</script>
</body>
</html>

注意是：prompt("请您输入分数：");该函数接受到用户的输入后返回值是以String类型返回的

19.`switch...case`

switch...case是另一种流程控制语句

switch语句更适用于多条分支使用同一条语句的情况

语法：
switch(表达式){
	case 表达式1:
		语句...
		break;
	case 表达式2:
		语句...
		break;
	default:
		语句...
		break;
}
需要注意的是case语句只是标识的程序运行的起点，并不是终点，所以一旦符合case的条件程序会一直运行到结束。所以我们一般在case中添加break作为语句的结束

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>switch练习</title>
</head>
<body>
<script type="text/javascript">
    var num = prompt("您输入星期几:");
    switch (num) {
        case "1":
            alert("星期一");
            break;
        case "2":
            alert("星期二");
            break;
        case "3":
            alert("星期三");
            break;
        case "4":
            alert("星期四");
            break;
        case "5":
            alert("星期五");
            break;
        case "6":
            alert("星期六");
            break;
        case "7":
            alert("星期天");
            break;
        default:
            alert("输入有误!");
            break;
    }
</script>
</body>
</html>

20.`while`

while语句是一个最基本的循环语句
while语句也称为while循环
语法
```
while(条件表达式){
	语句...  
}
```

- 和`if`一样`while`中的条件表达式将会被转换成布尔类型，只要值为值，则代码块将会一直重复执行。

- 代码块每执行一次，条件表达式将会重新计算一次。