JavaScript基础:运算符
引言
在JavaScript编程中,理解运算符、条件语句和循环是构建程序逻辑的基础。这些核心概念让代码能够做决策、重复执行任务并处理各种情况。本文将深入浅出地介绍这些关键概念,并通过实际示例帮助您掌握它们的使用方法。
运算符是执行特定操作的符号,用于操作值(操作数)并返回结果。
JavaScript中常⽤的运算符有:
1、算数运算符
运算符 | 描述 | 例子 |
+ | 加法 | 2+1=3 |
- | 减法 | 5-3=2 |
* | 乘法 | 6*2=12 |
/ | 除法 | 6/2=3 |
% | 取模 | 7%2=1 |
** | 指数幂 | 2**2=4 |
示例代码:
let a = 10, b = 3;console.log(a + b); // 13,加法
console.log(a - b); // 7,减法
console.log(a * b); // 30,乘法
console.log(a / b); // 3.333...,除法
console.log(a % b); // 1,取模(余数)
console.log(a ** b); // 1000,指数运算
运行结果:
2、递增和递减运算符
如果需要反复给数字变量添加或减去1,可以使⽤递增(++)和递减( -- )运算符来完成。
这两个运算符可以放在变量的前面(前缀) 或 后面(后缀),其行为有所不同:
写法 | 名称 | 行为 |
++variable | 前缀递增 | 先自增,再返回值 |
variable++ | 后缀递增 | 先返回原值,再自增 |
--variable | 前缀递减 | 先自减,再返回值 |
variable-- | 后缀递减 | 先返回原值,再自减 |
示例代码:
// 后置自增
let x = 5;
let y = x++; // 先赋值 5 给 y,然后 x 变成 6
console.log(x); // 6
console.log(y); // 5// 前置自增
let x1 = 5;
let y1 = ++x1; // 先 x 自增为 6,再赋值给 y
console.log(x1); // 6
console.log(y1); // 6// 后置自减
let x2 = 5;
let y2 = x2--; // 先赋值 5 给 y,然后 x 变成 4
console.log(x2); // 4
console.log(y2); // 5// 前置自减
let x3 = 5;
let y3 = --x3; // 先 x 自减为 4,再赋值给 y
console.log(x3); // 4
console.log(y3); // 4
运行结果:
●⽐较运算符
在 JavaScript 中,比较运算符(Comparison Operators) 用于比较两个值之间的关系,并返回一个布尔值(true 或 false)。它们常用于条件判断、循环控制等逻辑中。
3、常见比较运算符:
运算符 | 描述说明 | 实际案例 | 结果 |
== | 比较值是否相等(允许类型转换) | 5 == "5" | true |
=== | 比较值和类型是否都相等 | 5 === "5" | false |
!= | 比较值是否不等(允许类型转换) | 10 != "10" | false |
!== | 比较值或类型是否不同 | 10 !== "10" | true |
> | 判断 a 是否大于 b | 7 > 5 | true |
< | 判断 a 是否小于 b | "apple" < "banana" | true |
>= | 判断 a 是否大于等于 b | 8 >= 8 | true |
<= | 判断 a 是否小于等于 b | 3 <= 5 | true |
特殊比较示例:
实例代码:
// 比较 NaN 与 NaN
console.log("NaN == NaN:", NaN == NaN); // false
// null 与 undefined 在宽松相等下的比较
console.log("null == undefined:", null == undefined); // true
// null 与 undefined 在严格相等下的比较
console.log("null === undefined:", null === undefined); // false
// 对象之间的比较(引用不同)
console.log("{} == {}:", {} == {}); // false
// 数组之间的比较(引用不同)
console.log("[1] == [1]:", [1] == [1]); // false
// 布尔值与数字的宽松比较
console.log("true == 1:", true == 1); // true
// 空字符串与数字 0 的比较
console.log('"" == 0:', "" == 0); // true
// NaN和任何值都你不相等包括自己,使用Number.isNaN()来判断
let nan = NaN
console.log(Number.isNaN(nan)
运行结果:
4、逻辑运算符
运算符 | 描述 | 例子 |
---|---|---|
&& | and | (x < 10 && y > 1) 为 true |
|| | or | (x==5 || y==5) 为 false |
! | not | !(x==y) 为 true |
逻辑运算符与“短路判断”详解
在 JavaScript 中,逻辑运算符 && 和 || 具有“短路”特性,即:如果根据第一个操作数就能确定结果,则不会继续计算第二个操作数。
① &&(逻辑与)—— 短路规则
如果第一个操作数是 假值(falsy),则直接返回第一个操作数,不执行后续。
假值包括:false, 0, "", null, undefined, NaN。
console.log(false && "Hello"); // false
console.log(0 && 100); // 0
console.log("Hi" && "Hello"); // "Hello"
② ||(逻辑或)—— 短路规则
如果第一个操作数是 真值(truthy),则直接返回第一个操作数,不执行后续。
真值包括:非空字符串、非零数字、对象、数组等。
console.log(true || "World"); // true
console.log("Hello" || "World"); // "Hello"
console.log(null || "Default"); // "Default"
5、赋值运算符
运算符 | 示例 | 描述 |
= | a = 5 | 将右侧的值赋给左侧变量 |
+= | a += 5 | 加法后赋值 |
-= | a -= 5 | 减法后赋值 |
*= | a *= 5 | 乘法后赋值 |
/= | a /= 5 | 除法后赋值 |
%= | a %= 5 | 取模后赋值 |
**= | a **= 5 | 幂运算后赋值 |
let a = 10;a += 5; // a = 15
a -= 3; // a = 12
a *= 2; // a = 24
a /= 4; // a = 6
a %= 5; // a = 1
a **= 3; // a = 1
6、运算符的优先级
优先级 | 运算符 | 顺序 |
1 | 小括号 | () |
2 | 一元运算符 | ++ -- ! |
3 | 算数运算符 | 先*/%后+- |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先&&后|| |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
总结:其实运算符的优先级绝大多数都能够和我们平常的使用习惯相似,不需要特别的去死记硬背,如果我们需要提升摸一个运算的优先级,直接加上小括号就就好了。