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

JavaScript 运算符与流程控制详解

讲解 JavaScript 基础语法,涵盖自增运算符(前缀/后缀区别)、比较运算符(==与===差异)、逻辑运算符及真值假值规则。同时介绍条件判断语句(if、三目、switch)和循环语句(while、for),通过代码示例说明 continue 和 break 的使用场景,帮助读者掌握 JS 逻辑构建能力。

编程诗人发布于 2026/4/6更新于 2026/8/2358 浏览
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);
} 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--) {
    // n 从 5 递减到 0
    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. 总结
  • 免费图片AI生成工具免费生成了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 免费图片视频在线生成30秒,将你的创意变成现实开始设计
  • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
  • 100+免费在线小游戏爽一把
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • Windows 安装 Neo4j 图数据库教程
  • 设计模式:观察者模式详解与 Java 实现
  • OpenClaw 本地极简部署与 QQ 机器人接入教程
  • C++17 标准库:std::any 类型擦除容器详解
  • AI 写作辅助平台深度评测:炼字工坊与蛙蛙写作
  • 掌握三大 AI 设计技能,前端独立实现产品全流程
  • Pi0 机器人 VLA 大模型在昇腾 A2 平台上的测评
  • Vue3 中方法调用失效的排查与修复方案
  • 在Windows上离线部署OpenClaw与Ollama
  • HTML 标签实战指南:从零构建网页骨架
  • Git Cherry-Pick 命令用法与场景
  • macOS 系统安装 OpenClaw 教程
  • Python 与 PyCharm 环境搭建指南
  • Qwen3.5-27B 处理中英文混排 PPT 截图:精准提取标题与数据结论
  • Copilot Prompt 工程实战:高效提示词设计指南
  • RESTful API 接口设计规范
  • Qwen3-TTS-VoiceDesign 实战:AR 导览眼镜空间音频定位语音生成
  • Web 自动化测试入门:从概念到百度搜索实战
  • GitHub 仓库下载 ZIP 包与 git clone 克隆的区别
  • 亥时无人机一体化平台:架构设计与核心功能解析

相关免费在线工具

  • 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