【Java Web学习 | 第八篇】JavaScript(2) 基础知识2

【Java Web学习 | 第八篇】JavaScript(2) 基础知识2

🌈个人主页: Hygge_Code🔥热门专栏:从0开始学习Java | Linux学习| 计算机网络💫个人格言: “既然选择了远方,便不顾风雨兼程”

在这里插入图片描述

文章目录

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
两条竖线(打不出来)逻辑或(至少一边真则真)3<5 两条竖线 3>100true
!逻辑非(取反)!(2>5)true

真值/假值规则

  • 假值:0""nullundefinedNaN
  • 真值:除假值外的所有值(如非空字符串、非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){case1: console.log("选了1");break;case2: console.log("选了2");break;case3: console.log("选了3");// 匹配成功,输出此句break;default: console.log("无匹配项");}// 输出:选了3

三、循环语句🥝

1. while 循环

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

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

2. for 循环

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

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

示例:基本用法

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

总结🍂

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

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

如果我的内容对你有帮助,请 点赞 , 评论 , 收藏 。创作不易,大家的支持就是我坚持下去的动力!

在这里插入图片描述

Read more

基于YOLO26/11/v8算法的Web目标检测系统,人脸表情识别系统,Django+Vue3 的前后端分离,实现摄像头实时识别,YOLO26/YOLO11/v8 + LLM大模型智能分析,科研必备

基于YOLO26/11/v8算法的Web目标检测系统,人脸表情识别系统,Django+Vue3 的前后端分离,实现摄像头实时识别,YOLO26/YOLO11/v8 + LLM大模型智能分析,科研必备

✨ 更新日志 * ✔️ 2026/3/3,2.0 版本,前端导航栏改为侧边栏系统,视频流采用websocket框架延迟更低, YOLO26/YOLO11/YOLOv8 视频流更稳定,在之前的系统增加 LLM 大模型智能分析,是科研必备,支持 YOLO26/11/v8 分类模型、目标检测、分割、obb、关键点检测任务,还支持双模型联合检测与识别,如人脸表情识别、人脸识别等一些识别任务需要检测模型与分类模型共同完成,在人脸表情识别中,单独使用检测模型去识别人脸表情也不是不可以,但有一个问题数据集如果全是头部照片的话,当模型预测的照片是全身照片时,模型识别准确率就没有这么高了, 那么这时候可以用检测模型识别人脸,把人脸信息输入到表情分类模型进行分类即可,反正这是一个通用的系统,更换自己模型即可,大家懂得都懂的,更多功能看下文即可。 摘要 在人工智能迈向通用化(AGI)的今天,“视觉感知 + 语言理解”的多模态联合是未来的趋势。单纯的检测画框已经无法满足复杂的业务需求,如何让系统“看懂”

Lottie-Web 完整技术指南:让动画开发更简单高效

📚 目录 * 一、什么是 Lottie-Web * 二、为什么选择 Lottie-Web * 三、安装与引入 * 四、基础使用 * 五、API 详解 * 六、Vue 集成实战 * 七、高级特性 * 八、性能优化 * 九、常见问题与解决方案 * 十、最佳实践 * 十一、实际应用场景 * 十二、总结 一、什么是 Lottie-Web 1.1 Lottie 简介 Lottie 是 Airbnb 开源的一个动画库,它可以将 After Effects 动画导出为 JSON 格式,然后在 Web、iOS、Android

GitHub热榜----前端已死?AionUi 横空出世:首个开源“生成式UI”框架,让 AI 在运行时“手搓”界面

GitHub热榜----前端已死?AionUi 横空出世:首个开源“生成式UI”框架,让 AI 在运行时“手搓”界面

摘要:2025 年我们还在惊叹于 V0 和 Bolt 的代码生成能力,而 2026 年初,AionUi 的发布宣告了**“运行时生成 (Runtime GenUI)”**时代的到来。不再需要预先写好所有 Component,不再需要 Hardcode 每一个表单。AionUi 允许你的应用根据用户的意图,实时渲染出从未被编码过的 UI 界面。本文带你上手这个颠覆性的开源项目。 🚀 前言:从“写死”到“生成” 传统前端开发的逻辑是: 产品经理提需求 -> 设计师出图 -> 程序员把 UI 写成代码 (React/Vue) -> 打包发布 -> 用户看到静态界面。

前端状态管理吐槽:别再把你的状态搞得像乱麻!

前端状态管理吐槽:别再把你的状态搞得像乱麻! 毒舌时刻 前端状态管理就像谈恋爱——刚开始觉得很美好,时间久了就会发现一堆问题。Redux、MobX、Zustand、Pinia... 一堆状态管理库让你挑花了眼,结果你的状态还是乱得像一锅粥。 我就想不明白了,为什么管理个状态要这么复杂?你看看现在的代码,action、reducer、middleware,一堆概念把人搞晕。还有那些用Context API的,状态嵌套得比俄罗斯套娃还深,你说这能不难维护吗? 别跟我提什么"状态管理最佳实践",先把你的状态结构捋明白了再说。还有那些滥用全局状态的,什么都往全局状态里放,结果状态变得比你家的杂物间还乱。 为什么你需要这个 1. 代码可维护性:良好的状态管理能让你的代码更清晰,更容易维护。 2. 状态一致性:避免状态不一致导致的bug,让你的应用更稳定。 3. 调试方便:好的状态管理库提供了调试工具,让你更容易定位问题。 4. 面试必备:面试官最喜欢问状态管理的问题,掌握这些能让你面试更有底气。 5. 装X神器: