跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScript大前端java

JavaScript 运算符与流程控制详解

讲解 JavaScript 核心运算符与流程控制。涵盖自增运算符前缀后缀区别、比较运算符类型转换规则、逻辑运算符真值假值判断。详细介绍条件语句 if、三目运算符及 switch 用法,以及循环语句 while 和 for 的语法与 continue/break 控制。帮助读者掌握 JavaScript 逻辑构建基础。

ByteFlow发布于 2026/4/5更新于 2026/9/1173 浏览
JavaScript 运算符与流程控制详解

JavaScript 运算符与流程控制详解

在 JavaScript 中,运算符和流程控制是实现逻辑处理的基础。本文在前文基础上补充 for 循环内容,全面讲解比较运算符、逻辑运算符、条件判断语句(if、switch)及循环语句(while、for),帮助你掌握 JavaScript 的逻辑构建能力。

一、运算符:自增、比较与逻辑

1. 自增运算符(++)

自增运算符分为前缀(++i)和后缀(i++),核心区别在于返回值时机:

  • 后缀自增(i++):先返回当前值,再自增
  • 前缀自增(++i):先自增,再返回新值
let i = 1; console.log(i+++++i + i);// 结果为 7// 解析:// 1. i++ 先返回 1,i 变为 2// 2. ++i 先自增为 3,返回 3// 3. 此时 i=3,总和:1+3+3=7
2. 比较运算符

用于判断值的关系,返回布尔值,需重点区分 == 与 ===:

运算符特点示例结果
==只比较值(隐式转换类型)2 == "2"true(字符串转数字)
===比较值和类型(无转换)2 === "2"false(类型不同)
!=只比较值不相等2 != "2"false(值相等)
!==比较值或类型不相等2 !== "2"true(类型不同)

特殊规则:

  • 字符串按字符编码比较(如 "a" < "b" 为 true)
  • NaN 与任何值比较都返回 false(包括自身)
console.log(2=="2");// true(隐式转换)
console.log(2==="2");
.(<);
// false(类型不同)
console
log
"aabgg"
"bzzzz"
// true(首字符"a"<"b")
3. 逻辑运算符

组合多个条件判断,返回布尔值:

运算符描述示例结果
&&逻辑与(两边都真才真)3<5 && 3<9true
``逻辑或(至少一边真则真)
!逻辑非(取反)!(2>5)true

真值/假值规则:

  • 假值:0、""、null、undefined、NaN
  • 真值:除假值外的所有值(如非空字符串、非 0 数字)
console.log(!9);// false(9 是真值)
console.log(!"");// true(空字符串是假值)

二、条件判断语句

1. if 语句

根据条件执行代码块,条件会隐式转换为布尔值:

// 语法
if(条件){
  // 条件为真时执行
}else{
  // 条件为假时执行
}
// 示例:判断空格字符串是否为真
if(" "){ 
  // 空格字符串是真值(非空)
  console.log(true);
  // 输出:true
}else{
  console.log(false);
}
2. 三目运算符

if-else 的简写形式:条件 ? 表达式 1 : 表达式 2

// 判断 2 与"2"是否绝对相等
document.write(2==="2"?"相等":"不等");// 输出:不等
3. switch 语句

用于多条件等值判断(使用 === 比较),需配合 break 防止穿透:

let num5 = 3;
switch(num5){
case 1: console.log("选了 1");break;
case 2: console.log("选了 2");break;
case 3: console.log("选了 3");// 匹配成功,输出此句break;
default: console.log("无匹配项");
}
// 输出:选了 3

三、循环语句

1. while 循环

根据条件重复执行代码块,continue 可跳过本次循环:

let n = 5;
while(n--){
  if(n === 3) continue;// 跳过 n=3 的循环
  document.write(`执行第${n}次<br/>`);
}
// 输出:
// 执行第 4 次
// 执行第 2 次
// 执行第 1 次
// 执行第 0 次
2. for 循环

更灵活的循环方式,适合已知循环次数的场景,语法:

for(初始化; 条件; 更新){
  // 循环体
}

示例:基本用法

// 输出 1-5
for(let i = 1; i <= 5; i++){
  console.log(i);
  // 依次输出 1、2、3、4、5
}

总结

本文全面讲解了 JavaScript 核心运算符和流程控制:

  • 自增运算符的前缀/后缀差异影响返回值
  • 比较运算符中 === 比 == 更严格(检查类型)
  • 逻辑运算符依赖真值/假值转换
  • 条件判断:if 适合区间判断,switch 适合等值判断
  • 循环:while 适合未知次数,for 适合已知次数,灵活使用 continue 和 break

目录

  1. JavaScript 运算符与流程控制详解
  2. 一、运算符:自增、比较与逻辑
  3. 1. 自增运算符(++)
  4. 2. 比较运算符
  5. 3. 逻辑运算符
  6. 二、条件判断语句
  7. 1. if 语句
  8. 2. 三目运算符
  9. 3. switch 语句
  10. 三、循环语句
  11. 1. while 循环
  12. 2. for 循环
  13. 总结

更多推荐文章

查看全部
  • iOS 设备运行 Minecraft Java 版指南
  • Dify + Skill 本地部署实战:构建企业级 AI Agent 完整指南
  • GitHub Copilot Pro 学生免费获取与 VS Code 配置指南
  • FreeDomain 开源项目:免费获取自定义域名指南
  • 机器人具身智能:核心定义、指标与标准
  • YOLOFuse 与无人机红外相机配套实战部署
  • Python SDK 接入飞书多维表格写入数据指南
  • 文心大模型 ERNIE 4.5 开源解读与性能测评
  • MCP Server 实现 Excel 表格一键生成可视化图表 HTML 报告
  • C++ 哈希表基础介绍与原理实现
  • Stable Diffusion XL 1.0 部署实战:基于 Streamlit 与阿里云 PAI-EAS 的模型封装
  • 使用 Java 客户端调用 Elasticsearch API 实战指南
  • LMArena.ai 全球 AI 模型盲测对战与排行榜使用指南
  • DJI DroneID 无人机信号解析工具与流程指南
  • Spring Boot 使用 web3j 交互智能合约详解
  • 2025 AI 年度复盘:从 DeepSeek R1 开源到 Agent 商业化落地
  • 详解数据结构之跳表
  • Kubernetes CI/CD 实践:Jenkins 与 GitOps 集成
  • Open-WebUI 本地部署与使用指南
  • CMake 核心概念与实战:目标、属性、API 及静态库构建

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online