【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

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例)

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例) 前端开发中最令人头疼的莫过于那些难以定位的UI问题——元素错位、样式冲突、响应式失效...传统调试方式往往需要反复修改代码、刷新页面、检查元素。现在,通过Cursor编辑器集成的Codex功能,你可以直接用截图交互快速定位和修复这些问题。本文将带你从零开始,掌握这套革命性的调试工作流。 1. 环境准备与基础配置 在开始之前,确保你已经具备以下环境: * Cursor编辑器最新版(v2.5+) * Node.js 18.x及以上版本 * React 18项目(本文以Chakra UI 2.x为例) 首先在Cursor中安装Codex插件: 1. 点击左侧扩展图标 2. 搜索"Codex"并安装 3. 登录你的OpenAI账户(需要ChatGPT Plus订阅) 关键配置项: // 在项目根目录创建.

【前端实战】如何让用户回到上次阅读的位置?

【前端实战】如何让用户回到上次阅读的位置?

目录 【前端实战】如何让用户回到上次阅读的位置? 一、总体思路 1、核心目标 2、涉及到的技术 二、实现方案详解 1、基础方法:监听滚动,记录 scrollTop(不推荐) 2、Intersection Observer + 插入探针元素 3、基于 URL Hash 锚点跳转 三、总结 1、不同方案间对比总结 2、结语         作者:watermelo37         ZEEKLOG万粉博主、华为云云享专家、阿里云专家博主、腾讯云、支付宝合作作者,全平台博客昵称watermelo37。         一个假装是giser的coder,做不只专注于业务逻辑的前端工程师,Java、Docker、Python、LLM均有涉猎。 --------------------------------------------------------------------- 温柔地对待温柔的人,包容的三观就是最大的温柔。 -------------------------------------------------------------

前端八股文面经大全:MetaAPP前端一面(2026-03-03)·面经深度解析

前端八股文面经大全:MetaAPP前端一面(2026-03-03)·面经深度解析

前言 大家好,我是木斯佳。 在这个春节假期,当大家都在谈论返乡、团圆与休息时,作为一名技术人,我的思考却不由自主地转向了行业的「冬」与「春」。 相信很多人都感受到了,在AI浪潮的席卷之下,前端领域的门槛在变高,纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享,如今也沉寂了许多。但我们都知道,市场的潮水退去,留下的才是真正在踏实准备、努力沉淀的人。学习的需求,从未消失,只是变得更加务实和深入。 这个专栏的初衷很简单:拒绝过时的、流水线式的PDF引流贴,专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上,尝试从面试官的角度去拆解问题背后的逻辑,而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招,目标是中大厂还是新兴团队,只要是真实发生、有价值的面试经历,我都会在这个专栏里为你沉淀下来。 温馨提示:市面上的面经鱼龙混杂,甄别真伪、把握时效,是我们对抗内卷最有效的武器。 在这个假期,让我们一起充电,为下一个技术春天做好准备。 面经原文内容 📍面试公司:MetaAPP