Search K
Appearance
06 运算符
算术运算符
数字是用来计算的，比如：加法 + 、减法 - 、乘法 * 、除法 / 等等，所以经常和算术运算符一起。
算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等
| 运算符 | 作用 |
|---|---|
+ | 求和 |
- | 求差 |
* | 求积 |
/ | 求商 |
% | 取模（取余数）。开发中经常用于作为某个数字是否被整除 |
注意
在计算失败时，显示的结果是 NaN（not a number）
javascript
// 算术运算符
// 加法运算符 (+)：用于将两个数相加，或者将字符串拼接在一起。
let a = 5;
let b = 10;
let c = a + b; // c 的值为 15
let a = 1 + 2; // 3
let b = "Hello" + " " + "world"; // "Hello world"
// 减法运算符 (-)：用于将两个数相减。
let a = 10;
let b = 5;
let c = a - b; // c 的值为 5
let a = 5 - 3; // 2
// 乘法运算符 (*)：用于将两个数相乘。
let a = 5;
let b = 10;
let c = a * b; // c 的值为 50
let a = 2 * 3; // 6
// 除法运算符 (/)：用于将两个数相除。
let a = 10;
let b = 5;
let c = a / b; // c 的值为 2
let a = 10 / 2; // 5
// 取余运算符 (%)：用于获取两个数相除后的余数。使用场景：用来判断某个数是否能够被整除
let a = 10;
let b = 3;
let c = a % b; // c 的值为 1
console.log(4 % 2); // 0
console.log(6 % 3); // 0
console.log(5 % 3); // 2
console.log(3 % 5); // 3
// 注意事项 : 如果我们计算失败，则返回的结果是 NaN (not a number)
console.log("pink 老师" - 2);
console.log("pink 老师" * 2);
console.log("pink 老师" + 2); // pink 老师 2赋值运算符
=赋值运算符执行过程？
将等号右边的值赋予给左边，要求左边必须是一个容器+=出现是为了简化代码，比如让let num = 10，num加 5 怎么写呢num += 5
赋值运算符：对变量进行赋值的运算符
注意
= 将等号右边的值赋予给左边，要求左边必须是一个容器
| 运算符 | 作用 |
|---|---|
+= | 加法赋值 |
-+ | 减法赋值 |
*= | 乘法赋值 |
/= | 除法赋值 |
%= | 取余赋值 |
js
let num = 1;
// num = num + 3
num += 3;
console.log(num);一元运算符
- 只需要一个表达式就可以运算的运算符叫一元运算符
- 自增运算符也是为了简化写法，每次自加 1，使用场景是什么？
经常用于计数来使用。用来计算多少次- 实际开发中，我们一般都是单独使用的，后置 ++ 更多
众多的 JavaScript 的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符。
一元运算符、二元运算符、三元运算符
一元运算符：一元运算符只需要一个操作数。最常见的一元运算符是负号（
-）和递增/递减运算符（++，--）。负号将数字变成相反数，递增/递减运算符分别将其操作数加 1 或减 1。jslet x = 5; let y = -x; // y 的值为 -5 let a = 10; a++; // a 的值为 11 let b = 20; b--; // b 的值为 19二元运算符：二元运算符需要两个操作数。加号（
+）、减号（-）、乘号（*）、除号（/）和取余运算符（%）都是二元运算符。jslet x = 5; let y = 3; let z1 = x + y; // z1 的值为 8 let z2 = x - y; // z2 的值为 2 let z3 = x * y; // z3 的值为 15 let z4 = x / y; // z4 的值为 1.6666666666666667 let z5 = x % y; // z5 的值为 2三元运算符：三元运算符需要三个操作数，它也称为条件运算符。条件运算符由问号（
?）和冒号（:）组成。它用于根据一个条件的结果来选择执行哪个代码块。jslet age = 18; let status = age >= 18 ? "成年人" : "未成年人"; // 判断年龄是否大于等于 18 岁来确定状态，如果年龄大于等于 18 岁，则将 status 变量设置为“成年人”，否则将其设置为“未成年人”。 console.log(status); // 输出：成年人
自增/自减运算符
| 符号 | 作用 | 说明 |
|---|---|---|
++ | 自增 | 变量自身的值加 1，例如：x++ |
-- | 自减 | 变量自身的值减 1，例如：x-- |
++在前和++在后在单独使用时二者并没有差别，而且一般开发中我们都是独立使用。++在后（后缀式）我们会使用更多。
注意
- 只有变量能够使用自增和自减运算符。
++、--可以在变量前面也可以在变量后面，比如：x++或者++x。- 前缀运算符（
++i,--i）在变量被计算之前进行加 1 或减 1 操作，而后缀运算符（i++,i--）则在变量被计算之后进行加 1 或减 1 操作。
js
let a = 5;
let b = ++a; // a 现在的值是 6，b 的值也是 6
let c = a--; // a 现在的值是 5，c 的值是 6
// 前置自增
let i = 1;
// 结果是 4
// 1. 先自增，i = 2
// 2. 再加 2，结果为 4
console.log(++i + 2);
// 后置自增
let i = 1;
// 结果是 3
// 1. 先加 2，结果为 3
// 2. 再自增，i = 2
console.log(i++ + 2);js
// let num = 10
// num = num + 1
// num += 1
// // 1. 前置自增
// let i = 1
// ++i
// console.log(i)
// let i = 1
// console.log(++i + 1)
// 2. 后置自增
// let i = 1
// i++
// console.log(i)
// let i = 1
// console.log(i++ + 1)
// 了解
let i = 1;
// 输出为 7
// 1. 先 i++，i = 2
// 2. 再 ++i，i = 3
// 3. 最后 1 + 3 + 3，结果为 7
console.log(i++ + ++i + i);比较运算符
=和==和===怎么区别？=是赋值。==是判断只要求值相等，不要求数据类型一样即可返回true。===是全等要求值和数据类型都一样返回的才是true。
开发中，请使用===。- 比较运算符返回的结果是什么？
结果只有 2 个，true或者false
使用场景：比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false）
| 运算符 | 作用 |
|---|---|
> | 左边是否大于右边 |
< | 左边是否小于右边 |
>= | 左边是否大于或等于右边 |
<= | 左边是否小于或等于右边 |
=== | 左右两边是否类型和值都相等（重点） |
== | 左右两边值是否相等 |
!= | 左右值不相等 |
!== | 左右两边是否不全等 |
对比
=单等是赋值==是判断===是全等- 开发中判断是否相等，强烈推荐使用
===
注意
NaN不等于任何值，包括它本身。涉及到 "NaN" 都是false- 尽量不要比较小数，因为小数有精度问题
- 不同类型之间比较会发生隐式转换
- 最终把数据隐式转换转成
number类型再比较 - 所以开发中，如果进行准确的比较我们更喜欢
===或者!==
- 最终把数据隐式转换转成
js
console.log(3 > 5);
console.log(3 >= 3);
console.log(2 == 2);
// 比较运算符有隐式转换 把'2' 转换为 2 双等号 只判断值
console.log(2 == "2"); // true
// console.log(undefined === null)
// === 全等 判断 值 和 数据类型都一样才行
// 以后判断是否相等 请用 ===
console.log(2 === "2");
console.log(NaN === NaN); // NaN 不等于任何人，包括他自己
console.log(2 !== "2"); // true
console.log(2 != "2"); // false
console.log("-------------------------");
console.log("a" < "b"); // true
console.log("aa" < "ab"); // true
console.log("aa" < "aac"); // true
console.log("-------------------------");逻辑运算符
- 逻辑运算符有那三个？
与 (&&) 或 (||) 非 (!)- 判断一个变量 num 是否大于 5 且小于 10 怎么写？
num > 5 && num < 10
使用场景：可以把多个布尔值放到一起运算，最终返回一个布尔值
| 符号 | 名称 | 日常读法 | 特点 | 口诀 |
|---|---|---|---|---|
| && | 逻辑与 | 并且 | 符号两边有一个假的结果为假 | 一假则假 |
| || | 逻辑或 | 或者 | 符号两边有一个真的结果为真 | 一真则真 |
| ! | 逻辑非 | 取反 | true 变 false, false 变 true | 真变假，假变真 |
| A | B | A && B | A || B | !A |
|---|---|---|---|---|
| false | false | false | false | true |
| false | true | false | true | true |
| true | false | false | true | false |
| true | true | true | true | false |
js
// 逻辑与 一假则假
console.log(true && true);
console.log(false && true);
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("-----------------");
let num = 6;
console.log(num > 5 && num < 10);
console.log("-----------------");案例练习
需求：用户输入一个，判断这个数能被 4 整除，但是不能被 100 整除，满足条件，页面弹出 true，否则弹出 false
js
let num = parseInt(prompt("请输入一个数字："));
if (num % 4 == 0 && num % 100 != 0) {
alert(true);
} else {
alert(false);
}运算符优先级
JavaScript 中的运算符优先级指的是不同运算符之间执行顺序的优先级。优先级较高的运算符会比较低的运算符优先执行，而拥有相同优先级的运算符则按照从左到右的顺序依次执行。
JavaScript 中常见运算符的优先级（从高到低）：
- 小括号
()：小括号可以改变表达式中不同运算符的优先级或者明确表达式的含义。 - 一元运算符
++、--、+、-、!、typeof、void、delete：一元运算符具有最高优先级，并且它们的结合方向是从右到左。 - 指数运算符
**：指数运算符在 JavaScript ES7 中新增，具有较高的优先级，并且采用从右到左的结合方向。 - 乘除运算符
*、/、%：乘法、除法和取模运算符具有较高的优先级，并且它们的结合方向也是从左到右。 - 加减运算符
+、-：加法和减法运算符具有较低的优先级，但比乘法、除法和取模运算符优先级高，并且也是从左到右结合。 - 位移运算符
<<、>>、>>>：位移运算符具有较低的优先级，但比加法和减法运算符高，并且也是从左到右结合。 - 比较运算符
<、>、<=、>=、instanceof、in：比较运算符具有较低的优先级，但比位移运算符高，并且也是从左到右结合。 - 相等运算符
==、!=、===、!==：相等运算符与比较运算符具有相同的优先级，并且也是从左到右结合。 - 位运算符
&、|、^：位运算符具有较低的优先级，并且也是从左到右结合。 - 逻辑运算符
&&、||：逻辑运算符具有最低的优先级，并且采用短路求值的方式执行，即如果逻辑表达式的结果可以提前确定，则不再求解后续部分。
注意
- 一元运算符里面的逻辑非（
!）优先级很高 - 逻辑与 (
&&) 比逻辑或 (||) 优先级高
js
let a = 3 > 5 && 2 < 7 && 3 == 4;
console.log(a); // false
// a 的值将为 false，因为 3 > 5 和 3 == 4 都为 false。然而，2 < 7 为 true，所以整个表达式为 false。
let b = 3 <= 4 || 3 > 1 || 3 != 2;
console.log(b); // true
// b 的值将为 true，因为 3 <= 4 为 true，3 > 1 也为 true，并且 3 != 2 也为 true。
let c = 2 === "2";
console.log(c); // false
// 表达式将得到 c = false，因为 2 和 "2" 类型不同。
let d = !c || (b && a);
console.log(d); // true
// d 的值将为 true，因为 !c 的值为 true，b 和 a 都为 false，所以 b && a 表达式的结果也为 false。因此，!c || b && a 的结果为 true。