码上未来IT培训老师直接接听

400-029-09** 400-029-0997 转 36015
查看完整号码
扫码拨号
微信扫码拨号

AI大模型全栈开发|前端基础：JavaScript基础-运算符和流程控制

2025年05月25日 更新

前端基础JavaScript基础流程控制课程前言Course Introduction在JavaScript的世界里，运算符和流程控制是构建复杂逻辑的基石。无论是简单的变量操作，还是复杂的业务逻辑实现，都离不开对运算符的精准运用和流程控制的巧妙设计。今天这堂课，我们将深入浅出地探讨JavaScrip...

前端基础JavaScript基础流程控制

课程前言Course Introduction在JavaScript的世界里，运算符和流程控制是构建复杂逻辑的基石。无论是简单的变量操作，还是复杂的业务逻辑实现，都离不开对运算符的精准运用和流程控制的巧妙设计。今天这堂课，我们将深入浅出地探讨JavaScript中的运算符分类及其使用场景，包括算数运算符的精度问题、递增递减运算符的前置后置区别、比较运算符的等号陷阱等细节。同时，我们还会揭开流程控制的神秘面纱，从if语句的多条件分支，到switch语句的高效多选项处理，帮助大家掌握如何根据不同的条件引导程序走向预期的路径。现在让我们开始今天的课程吧！一运算符

CodingFuture

1.1分类

算数运算符递增和递减运算符(一元运算符)比较运算符逻辑运算符赋值运算符1.2运算符详解

算数运算符：运算符描述实例+加10+20=30-减10-20=-10*乘10*20=200/除10/20=0.5%取余数（取模）返回除法的余数9%2=1注意：浮点数运算存在精度问题（如 0.1 + 0.2 ≠ 0.3），不可直接比较。递增和递减运算符：（一元运算符，只有一个数的操作符）在JavaScript中，递增【++】和递减【--】既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符放在变量后面时，我们可以称为后置递增（递减）运算符前置递增（先自增，再赋值）：let num = 10;console.log(++num + 10); // 21后置递增（先赋值，再自增）：let num = 10;console.log(num++ + 10); // 20console.log(num); // 11比较运算符：因算符名称说明案例结果<小于号1<2true>大于号1>2false>=大于等于号（大于或者等于）2>=2true<=小于等于号（小于或者等于）3<=2false==判等号（会转型37==37true!=不等号37!=37false===   !==全等，要求值和数据类型都一致37==="37"falsevar a = 10;var b = 11;console.log(a < b)//trueconsole.log(a > b)//falseconsole.log(a >= b)//falseconsole.log(a <= b)//trueconsole.log(a == b)//falseconsole.log(a != b)//trueconsole.log("37" === "37")//数值 和 数据类型都一致 trueconsole.log(37 === "37")//数值 和 数据类型不一致 falseconsole.log("37" == "37")//数值一致即可 trueconsole.log(37 == "37")//数值一致即可 类型可以不相等 trueconsole.log(37 !== 37)//类型相等 数值相等 falseconsole.log(37 !== "37")//类型不相等 数值相等 trueconsole.log(37 !== 38)//类型相等 数值不相等 true 口诀：只要类型或者值有一个不相等 就返回true等号比较：符号作用用法=赋值把右边给左边==判断判断两边值是否相等===全等判断两边的值和数据类型是否完全相同var age = 23; 赋值运算符console.log(18 == "18");//trueconsole.log(18 === "18");//false逻辑运算符：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断逻辑与【&&】：两边都是true才返回true，否则返回false，一假俱假。var res = true && true# 结果是truevar res = true && false# 结果是falsevar res = 2 > 1 && 3 <1# true false逻辑或【||】：两边有一边是true返回true，否则返回false，一真俱真。var res = true || true# 结果是truevar res = true || false# 结果是truevar res = 2 > 1 || 3 < 1# true false逻辑非【!】：逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true的相反值是false。var isOk = !true;console.log(isOk);//fasle短路运算（逻辑中断）：原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值。逻辑与：表达式1 && 表达式2- 如果第*个表达式的值为真，则返回表达式2- 如果第*个表达式的值为假，则返回表达式1console.log( 123 && 456 );console.log( 0 && 456 );console.log( 123 && 456&& 789 );逻辑或：表达式1 || 表达式2- 如果第*个表达式的值为真，则返回表达式1- 如果第*个表达式的值为假，则返回表达式2console.log( 123 || 456 );console.log( 0 || 456 );console.log( 123 || 456 || 789 );赋值运算符：包括复合赋值运算符var age = 10;age += 5; // 相当于 age = age + 5;age -= 5; // 相当于 age = age - 5;age *= 10; // 相当于 age = age * 10;运算符优先级：说明了不同运算符的优先级。优先级运算符顺序1小括号【（）】2一元运算符【++】【--】【！】3算术运算符先【*】【/】【%】后【+】【-】4关系运算符【>】【>=】【<】【<=】5相等运算符【==】【!=】【===】【!==】6逻辑运算符先【&&】后【||】7赋值运算符【=】8逗号运算符【，】一元运算符里面的逻辑非优先级很高逻辑与比逻辑或优先级高console.log(4 >= 6 || ("人" != "阿凡达" && !(12 * 2 == 144) &&true));var num = 10;console.log(5 == num / 2 && (2 + 2 * num).toString() === "22");var a = 3 > 5 && 2 < 7 && 3 == 4;console.log(a);var b = 3 <= 4 || 3 > 1 || 3 != 2;console.log(b);var c = 2 === "2";console.log(c);var d = !c || (b && a);console.log(d);二流程控制

CodingFuture

2.1概念

根据条件执行不同路径代码

2.2分支流程控制

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果。JS 语言提供了两种分支结构语句：if语句、switch语句if语句：// 条件成立执行代码，否则什么也不做if (条件表达式) {// 条件成立执行的代码语句}if else语句：// 条件成立 执行 if 里面代码，否则执行else 里面的代码if (条件表达式) {// [如果] 条件成立执行的代码} else {// [否则] 执行的代码}if else if （else）语句：// 适合于检查多重条件。if (条件表达式1) {语句1；} else if (条件表达式2) {语句2；} else if (条件表达式3) {语句3；....} else {// 上述条件都不成立执行此处代码}三元表达式：表达式1 ? 表达式2 : 表达式3;如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值简单理解： 就类似于 if else （双分支） 的简写var res = 3 > 5 ? alert("数学真好呀") : alert("回炉吧！")console.log(res);switch分支流程控制：switch语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用switch。switch( 表达式 ){case value1:// 表达式 等于 value1 时要执行的代码break;case value2:// 表达式 等于 value2 时要执行的代码break;default:// 表达式 不等于任何一个 value 时要执行的代码}switch ：开关 转换 ， case：小例子 选项关键字switch后面括号内可以是表达式或值， 通常是一个变量关键字case, 后跟一个选项的表达式或值，后面跟一个冒号switch表达式的值会与结构中的case的值做比较如果存在匹配全等(===) ，则与该case关联的代码块会被执行，并在遇到break时停止，整个switch语句代码执行结束如果所有的case的值都和表达式的值不匹配，则执行 default里的代码switch穿透现象：注意： 执行case里面的语句时，如果没有break，则继续执行下一个case里面的语句。2.3switch和if区别

switch...case 语句通常处理case为比较确定值的情况， 而if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)switch语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else语句有几种条件，就得判断多少次。当分支比较少时，if… else语句的执行效率比switch语句高。当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

结言陈词Closing statement同学们，今天我们共同探索了JavaScript运算符与流程控制的核心知识。从运算符的精细分类到流程控制的逻辑艺术，我们不仅学习了如何进行数值计算、条件判断，还掌握了如何通过if和switch语句构建复杂的业务逻辑。希望大家通过这堂课，能够深刻理解浮点数运算的精度问题，避免在实际开发中因精度误差导致的逻辑错误；同时，在使用递增递减运算符时，要时刻牢记前置和后置的区别，确保代码行为符合预期。此外，逻辑运算中的短路特性和运算符优先级，也是编写高效、简洁代码的关键。希望大家课后多加练习，将这些基础知识融会贯通，为今后的JavaScript开发之路奠定坚实的基础。下期课程预告：JavaScript基础-循环码上未来为同学们安排统一答疑扫码添加微信领取详细课程大纲

微信号:CodingFuture2020

The CodingFuture&The Future is Already Here<<<  END >>>

添加微信咨询
夏老师 @大连码上未来IT培训

资深职业咨询规划师

微信号：155******12

立即咨询

“大连码上未来IT培训”是码上未来科技(大连)有限公司在教育宝平台开设的店铺，若该店铺内信息涉嫌虚假或违法，请点击这里向教育宝反馈，我们将及时进行处理。

机构评分

环境：5.0师资：5.0服务：5.0效果：5.0

公示信息

店铺名称：大连码上未来IT培训

单位名称：码上未来科技(大连)有限公司

账号名称：mswl（158******92）

所属城市：辽宁大连

入驻时长：6年

在线客服：在线聊

相关课程

微信咨询

返回顶部