五、运算符
(一)运算符
运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有:
- 算数运算符
- 赋值运算符
- 一元运算符
- 比较运算符
- 逻辑运算符
- 递增和递减运算符
(二)算术运算符
1、概述
概念:算术运算使用的符号,用于执行两个变量或值的算术运算。
2、浮点数的精度问题
浮点数值的最高精度是17位小数,但在进行算术计算时其精确度远远不如整数。
var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100); // 结果不是 7, 而是:7.000000000000001
所以:不要直接判断两个浮点数是否相等
3、优先级
同时使用多个运算符编写程序时,会按着某种顺序先后执行,我们称为优先级。
JavaScript中 优先级越高越先被执行,优先级相同时以书从左向右执行。
- 乘、除、取余优先级相同
- 加、减优先级相同
- 乘、除、取余优先级大于加、减
- 使用 () 可以提升优先级
- 总结: 先乘除后加减,有括号先算括号里面的
课堂提问
3.1 怎么判断一个数能够被整除呢?
它的余数是0就说明这个数能被整除,这就是% 取余运算符的主要用途
3.2 请问1+2*3结果是?
结果是7,注意算术运算符优先级的,先乘除,后加减,有小括号先算小括号里面的
4、表达式和返回值
表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
简单理解:是由数字、运算符、变量等组成的式子
表达式最终都会有一个结果,返回给开发者,称为返回值
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表达式和返回值</title>
<script>
// 表达式:是由数字、运算符、变量等组成的式子 1 + 1
console.log(1 + 1); //2 就是返回值
// 1 + 1 = 2
// 在程序里面 2 = 1 + 1 右(表达式)计算完毕给左变
var num = 1 + 1;
</script>
</head>
(三)赋值运算符
赋值运算符:对变量进行赋值的运算符
已经学过的赋值运算符:= 将等号右边的值赋予给左边, 要求左边必须是一个容器
其他赋值运算符: += -= *= /= %=
使用这些运算符可以在对变量赋值时进行快速操作
<script>
let num = 1;
// num = num +1;
//赋值运算符:= 将等号右边的值赋予给左边, 要求左边必须是一个容器
num += 1;
console.log(num);
</script>
(四)一元运算符
众多的 JavaScript 的运算符可以根据所需表达式的个数,分为一元运算符、二元运算符、三元运算符
1、二元运算符:
![](https://i-blog.csdnimg.cn/blog_migrate/0b2b6ce360bce3885dc85b308a31b685.png)
2、一元运算符
2.1 递增和递减运算符概述
如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减( -- )运算符来完成。
在 JavaScript 中,递增(++)和递减( -- )既可以放在变量前面,也可以放在变量后面。放在变量前面时,称为前置递增(递减)运算符,放在变量后面时,称为后置递增(递减)运算符。
2.2 前置自增运算符
++num 前置自增,就是自加1,类似于 num = num + 1,但是 ++num 写起来更简单。
使用口诀:先自加,后返回值
let num = 10;
alert(++num + 10); // 21
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前置递增运算符</title>
<script>
//1. 想要一个变量加1
let num = 1;
num = num + 1; //++num
console.log(num);
//前置递增运算符 ++ 写在变量的前面
let age = 10;
++age; //类似于 age = age + 1
console.log(age);
//3. 先加1 后返回值
let p = 10;
console.log(++p + 10);
</script>
</head>
2.3 后置自增运算符
num++ 后置自增,就是自加1,类似于 num = num + 1 ,但是 num++ 写起来更简单。
使用口诀:先返回原值,后自加
let num = 10;
alert(10 + num++); // 20
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后置递增运算符</title>
<script>
let num = 10;
num++;
console.log(num); //11
// 1. 前置自增和后置自增如果单独使用 效果是一样的
// 2. 后置自增口诀:先返回原值,后自加
let age = 10;
console.log(age++ + 10); //20
console.log(age); //11
</script>
</head>
小结
- 前置递增和后置递增运算符可以简化代码的编写,让变量的值+1比以前写法更简单
- 单独使用时,运行结果相同
- 与其他代码联用时,执行结果会不同
- ●后置:先原值运算,后自加(先人后己)
- 前置:先自加,后运算(先已后人)
- 开发时,大多使用后置递增/减,并且代码独占一行,例如:num++ 或者 num--
(五)比较运算符
使用场景:比较两个数据大小、是否相等
1、比较运算符:
- > : 左边是否大于右边
- <: 左边是否小于右边
- >=: 左边是否大于或等于右边
- <=: 左边是否小于或等于右边
- ==: 左右两边值是否相等
- ===: 左右两边是否类型和值都相等
- !==: 左右两边是否不全等
- 比较结果为boolean类型,即只会得到 true 或 false
2、对比:
- = 单等是赋值
- == 是判断
- === 是全等
- 开发中判断是否相等,强烈推荐使用 ===
<script>
console.log(3 > 4);
console.log(5 > 3);
console.log(2 == 2);
// 比较运算符有隐式转换 把'2'转换为2 双符号只判断值
console.log(2 == '2'); //true
// === 全等判断 值和数据类型都一样才行
// 以后判断是否相符 请用===
console.log(2 === '2'); //false
console.log(NaN === NaN); //NaN不等于任何人,包括他自己
</script>
4、补充
字符串比较
- 比较的字符对应的ASCII码
- 从左往右依次比较
- 如果第一位一样再比较第二位,以此类推
- 比较的少,了解即可
![](https://i-blog.csdnimg.cn/blog_migrate/16312cafc641806dbb710d9a0764adb6.png)
NaN不等于任何值,包括它本身,涉及到"NaN“ 都是false
尽量不要比较小数,因为小数有精度问题
不同类型之间比较会发生隐式转换
- 最终把数据隐式转换转成number类型再比较
- 所以开发中,如果进行准确的比较我们更喜欢 === 或者 !==
(五)逻辑运算符
1、使用场景
逻辑运算符用来解决多重条件判断
eg: 正确写法: num > 5 && num < 10
2、逻辑运算符
<script>
//二元 逻辑与 一假则假
console.log(true && true);
console.log(false && false);
console.log(3 < 5 && 3 > 2);
console.log(3 < 5 && 3 < 2);
console.log('----------------');
//二元 逻辑或 一真则真
console.log(true || true);
console.log(false || true);
console.log(false || false);
console.log('----------------');
//一元 逻辑非 取反
console.log(!true);
console.log(!false);
console.log('----------------');
/* 需求:用户输入一个,判断这个数能被4整除,但是不能被100整除,满足条件,
页面弹出true,否则弹出false */
let num = prompt('请输入一个数');
alert((num % 4 === 0) && (num % 100 !== 0))
</script>
(六)运算符优先级
一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高