本笔记涵盖 JavaScript 的运算符赋值、一元、比较、逻辑、优先级、语句表达式与语句、分支语句、循环语句以及综合案例是 JavaScript 基础语法的核心内容。目录一、运算符1.1 赋值运算符1.2 一元运算符1.2.1 自增和自减1.2.2 前置自增和后置自增1.2.3 使用建议1.3 比较运算符1.3.1 比较运算符的细节1.4 逻辑运算符1.5 运算符优先级二、语句2.1 表达式和语句2.2 分支语句2.2.1 程序三大流程控制语句2.2.2 if 语句2.2.3 三元运算符2.2.4 switch 语句2.3 循环结构2.3.1 断点调试2.3.2 while 循环2.3.3 循环退出三、综合案例一、运算符1.1 赋值运算符目标能够使用赋值运算符简化代码。赋值运算符用于对变量进行赋值。最基本的赋值运算符是把等号右边的值赋给左边的变量等号左边必须是变量一个容器不能是字面量。运算符说明示例等价于赋值num 10num 10加后赋值num 5num num 5-减后赋值num - 5num num - 5*乘后赋值num * 5num num * 5/除后赋值num / 5num num / 5%取余后赋值num % 5num num % 5示例// 让一个变量加 1 的传统写法 let num 1 num num 1 console.log(num) // 2 // 复合赋值运算符的简写 let num 1 num 1 console.log(num) // 21.2 一元运算符目标能够使用一元运算符做自增运算。JavaScript 的运算符按所需操作数的个数分为一元运算符、二元运算符、三元运算符。操作数就是运算符处理的数据。例如10 20中左右各需要一个操作数10 和 20共两个所以是二元运算符只作用于一个变量所以是一元运算符?:需要条件和两个候选值共三部分是唯一的三元运算符。补充而表达式是由数字、变量和运算符组成、能够计算出一个值的代码例如10 20、num。类型说明示例一元运算符只需要 1 个操作数num、!true二元运算符需要 2 个操作数10 20三元运算符需要 3 个操作数条件 ? 值1 : 值21.2.1 自增和自减符号作用让变量的值 1--让变量的值 -1使用场景经常用于计数。比如要进行 10 次操作用它来记录已经进行了多少次。1.2.2 前置自增和后置自增类型语法说明记忆口诀前置自增num先自加再使用在前先加后置自增num先使用再自加在后后加后置自增的 1 到底什么时候发生——在取出变量当前值之后立刻发生也就是在执行下一行代码之前就完成了不需要等到整个程序结束。只是它参与当前运算时用的是自增前的旧值。示例// 前置自增先自加再使用 let i 1 console.log(i 2) // 4 // i 先自加变成 2再拿 2 和后面的 2 相加 // 后置自增先使用再自加 let i 1 console.log(i 2) // 3 // 先取 i 的旧值 1 与 2 相加取值之后 i 立刻变成 21.2.3 使用建议前置自增和后置自增独立使用时没有差别都是让变量 1。实际开发中自增运算符基本都是独立使用。其中后置自增i使用相对更多。面试题let i 1 console.log(i i i) // 7解析关键i 始终是同一个变量每一步都在改变它的值i先取旧值1参与加法随后 i 变成 2ii 先变成3再取 3 参与加法i当前值就是3所以结果是1 3 3 7。1.3 比较运算符目标能使用常见的比较运算符进行比较运算。使用场景比较两个数据的大小、是否相等。运算符说明左边是否大于右边左边是否小于右边左边是否大于或等于右边左边是否小于或等于右边左右两边的值是否相等不比较类型左右两边类型和值都相等全等!左右两边的值是否不相等不比较类型!左右两边是否不全等类型或值有一个不同比较运算的结果是 boolean 类型只会得到true或false。单等、双等、三等区别运算符名称说明赋值把右边的值赋给左边的变量相等只要求值相等不要求类型相同全等要求值和类型都相同开发中判断是否相等强烈推荐使用。1.3.1 比较运算符的细节字符串比较按字符的编码逐个比较英文字母、数字的编码就是ASCII 码从左往右依次比较。第一位不同就直接出结果第一位相同再比较第二位以此类推。NaN 不等于任何值包括它自己NaN NaN和NaN NaN结果都是false。因此涉及 NaN 的比较都是 false只对相等/大小比较成立而NaN ! NaN反而是true。要判断一个值是不是 NaN应使用Number.isNaN(值)。尽量不要直接比较小数因为小数有精度问题。例如0.1 0.2的结果是0.30000000000000004不等于 0.3整数在安全范围内比较不受影响。使用比较不同类型时会发生隐式转换多数情况是把两边转成 number 再比值如1转成1。但有一条特殊规则——null和undefined互相宽松相等null undefined为true它们与其他任何值都不宽松相等。开发中要做准确比较时统一使用或!。console.log(1 2) // false console.log(1 2) // true console.log(1 2) // false console.log(1 2) // true console.log(1 2) // false console.log(1 ! 2) // true console.log(1 2) // false console.log(1 ! 2) // true // 只比较值发生隐式转换 值和类型都比较 console.log(1 1) // false类型不同 console.log(1 ! 1) // true console.log(1 1) // true1 被转成数字 1 // null 和 undefined 的特殊规则 console.log(undefined null) // true二者宽松相等 console.log(undefined null) // false类型不同 // NaN 不等于任何值包括它自己 console.log(NaN NaN) // false // 字符串按字符编码逐位比较 console.log(a b) // true console.log(aa ab) // false第一位相同第二位 a b console.log(aa ab) // true1.4 逻辑运算符目标掌握逻辑运算符为程序能思考做准备。使用场景逻辑运算符用来解决多重条件判断。提问如果想判断变量 num 是否大于 5 且小于 10怎么办错误写法5 num 10。JavaScript 不支持数学中的连写它会被从左到右算成(5 num) 10变成拿布尔值和 10 比较结果没有判断意义。正确写法num 5 num 10拆成两个比较再用逻辑运算符连接。符号名称日常读法特点口诀逻辑与并且两边都为 true结果才为 true一假则假\|\|逻辑或或者两边有一个为 true结果就为 true一真则真!逻辑非取反true 变 falsefalse 变 true真变假假变真示例 1判断一个数能被 4 整除但不能被 100 整除。let num prompt(请输入一个数) // % 是取余余数为 0 说明能整除/ 算的是商判断整除永远看余数是否为 0 alert(num % 4 0 num % 100 ! 0)/算的是商%算的是余数“整除”永远看余数是否为 0。示例 2三个逻辑运算符的基本运算结果。// 1. 逻辑与 一假则假 console.log(true false) // false console.log(true true) // true console.log(false true) // false console.log(false false) // false // 2. 逻辑或 ||一真则真 console.log(true || true) // true console.log(false || true) // true console.log(false || false) // false // 3. 逻辑非 !取反 console.log(!true) // false console.log(!false) // true // 区间判断必须拆成两个条件 let num 2 console.log(num 5 num 10) // false1.5 运算符优先级目标掌握运算符优先级能判断运算符执行的顺序。优先级运算符顺序1小括号()2一元运算符、--、!3算术运算符先*、/、%后、-4关系运算符、、、5相等运算符、!、、!6逻辑运算符先后\|\|7赋值运算符8逗号运算符,重点一元运算符里的逻辑非!优先级很高逻辑与比逻辑或||优先级高练习let a 3 5 2 7 3 4 console.log(a) // false let b 3 4 || 3 1 || 3 ! 2 console.log(b) // true let c 2 2 console.log(c) // true let d !c || b a console.log(d) // false最后一题解析优先级高于||先算b atrue false→false再算!c!true→false最后false || false结果为false。二、语句2.1 表达式和语句类型说明示例表达式可以被求值的代码引擎会把它计算出一个结果3 4、num 3 4赋值表达式的值就是被赋的值语句一段可以执行的代码if语句、for循环、break、continue注意而prompt()、alert()这类函数调用本质是表达式有返回值单独成行时也叫表达式语句。区别表达式因为有值可以写在赋值语句的右侧例如let sum i 1。for、break、continue等语句没有值不能放在赋值号右侧。alert()写法上虽然可以赋值let x alert(1)但它没有返回值x 会得到undefined实际开发不会这么写。像sum i这样单独成行的表达式既是表达式有值又作为一条语句执行这就是表达式语句。2.2 分支语句2.2.1 程序三大流程控制语句结构说明执行路径顺序结构代码从上往下依次执行代码1 → 代码2 → 代码3分支结构根据条件选择执行代码满足条件执行代码2不满足执行代码3循环结构某段代码被重复执行代码1 → 重复执行某段代码多次 → 代码32.2.2 if 语句if 语句有三种使用方式单分支、双分支、多分支。1单分支if (条件) { 满足条件要执行的代码 }小括号内的条件为 true 时进入大括号执行代码。小括号内的结果若不是布尔类型会发生隐式转换转为布尔类型。如果大括号里只有一个语句大括号可以省略但不提倡这么做。// 条件为 true 才执行 if (false) { console.log(不会执行) } if (true) { console.log(会执行) } if (1 2) { console.log(不会执行条件不成立) } // 条件位置不是布尔值时会隐式转换为布尔值 // 假值转为 false0、NaN、空字符串、null、undefined // 其余都为 true包括负数和非空字符串 空格字符串也是 true if (-2) { console.log(非 0 数字为 true) } if () { console.log(空字符串为 false不会执行) } if (hello) { console.log(非空字符串为 true) } if (undefined) { console.log(undefined 为 false不会执行) } if (null) { console.log(null 为 false不会执行) } if (NaN) { console.log(NaN 为 false不会执行) }案例用户输入高考成绩如果分数大于 700提示恭喜。let score prompt(请输入高考成绩) if (score 700) { alert(恭喜) }2双分支if (条件) { 满足条件要执行的代码 } else { 不满足条件执行的代码 }案例判断用户登录。let uname prompt(请输入用户名) let pwd prompt(请输入密码) if (uname admin pwd 123456) { alert(登录成功) } else { alert(用户名或密码错误) }案例判断闰年。闰年规则能被 4 整除但不能被 100 整除或者能被 400 整除。需要用逻辑运算符把多个条件组合起来。let year prompt(请输入年份) if ((year % 4 0 year % 100 ! 0) || year % 400 0) { alert(${year}年是闰年) } else { alert(${year}年是平年) }3多分支if (条件1) { 代码1 } else if (条件2) { 代码2 } else if (条件3) { 代码3 } else { 代码n // 兜底处理 }使用场景适合有多个结果的时候比如成绩分为优、良、及格、不及格。案例输入成绩输出等级。let score prompt(请输入成绩) if (score 90) { alert(优秀) } else if (score 70) { alert(良好) } else if (score 60) { alert(及格) } else { alert(不及格) }为什么不用重复写上界多分支从上往下判断命中一个分支后整个 if 结构就结束了所以能走到下一个else if本身就说明不满足前面所有条件。条件按从大到小写、且边界符号统一都用时只需判断一个边界if (score 90) { alert(优秀) // 走到这里说明 score 90 } else if (score 70) { alert(良好) // 走到这里说明 score 90只需再判断 70 } else if (score 60) { alert(及格) // 此时 60 score 70 } else { alert(不及格) // 其余所有情况兜底 }本案例的常见错误边界符号不统一和混用会导致 90、60 这种临界分数漏判或归错等级。出现永远走不到的分支例如在score 60及格之后再写一个else if (score 60)能走到这里的分数已经小于 60该分支永远不会执行而且大于 60 输出不及格语义本身也写反了。输入非法值如输入超过 100 或负数本例由 else 统一兜底需要更严谨时可单独判断。2.2.3 三元运算符目标能利用三元运算符执行满足条件的语句。使用场景比 if 双分支更简单的写法。语法条件 ? 表达式1 : 表达式2条件为 true 时整个表达式的结果取表达式1的值为 false 时取表达式2的值。三元运算符的结果是一个值一般用来取值。案例判断两个数的最大值。let num1 prompt(请输入第一个数) let num2 prompt(请输入第二个数) let max num1 num2 ? num1 : num2 // 把三元的结果赋给变量 console.log(max)也可以直接把三元表达式放进模板字符串中取值console.log(较大的是${num1 num2 ? num1 : num2})注意三元运算符设计用途是取值应出现在需要值的地方赋值右侧、模板字符串里。像条件 ? console.log(a) : console.log(b)这样把整条语句塞进两个分支虽然能运行但不推荐。案例数字补 0。let num prompt(请输入一个数) let result num 10 ? 0 num : num // 小于 10 在前面补 0 document.write(result)要点只判断一次即可10是两位数不应补 0。如果再叠加一次反向判断num 10 ? num : 0 num当 num 为 10 时会被错误拼成010。2.2.4 switch 语句目标能利用 switch 执行满足条件的语句。语法switch (数据) { case 值1: 代码1 break case 值2: 代码2 break default: 代码n break }释义找到跟小括号里的数据全等的 case 值执行对应代码没有全等匹配时执行 default 里的代码。注意事项switch case 一般用于等值判断不适合区间判断区间判断用 if 多分支。一般需要配合break使用不写 break 会发生case 穿透从命中的 case 开始后面的 case 代码会连续执行不再判断。default 写在最后且后面没有其他 case 时它后面的 break 可以省略但为了风格统一、防止以后调整分支顺序时出错建议每个分支都写 break。switch (num) { case 1: console.log(1) break // 跳出 switch不写会继续执行下一个 casecase 穿透 case 2: console.log(2) break default: console.log(其他) // num 不全等于任何 case 时执行 break // default 在最后可省略 }案例简单计算器。let num1 prompt(请输入第一个数字) // 前加 把输入转成数值 let num2 prompt(请输入第二个数字) let operator prompt(请输入运算符 - * /) // 运算符是符号必须保持字符串 let result switch (operator) { case : result num1 num2 break case -: result num1 - num2 break case *: result num1 * num2 break case /: result num1 / num2 break default: alert(输入的运算符有误) } alert(计算结果${result})要点两个数字前用转成数值类型才能做数学运算运算符不能加字符串符号转数值会得到NaN保持字符串才能和 case 后的值全等匹配。2.3 循环结构目标掌握循环结构实现一段代码重复执行。2.3.1 断点调试作用学习时帮助理解代码运行过程工作时更快找到 bug。浏览器打开调试界面按 F12 打开开发者工具切换到Sources源代码面板。在文件列表中选择代码文件点击行号添加断点再次点击可取消。刷新页面程序执行到断点处会暂停。用Step over单步跳过弯曲箭头图标逐行执行在右侧 Scope作用域面板观察变量变化点击Resume继续执行可运行到下一个断点。断点在某行代码上加的标记。程序执行到有断点的代码时会暂停下来。2.3.2 while 循环目标掌握 while 循环语法能重复执行某段代码。循环就是重复执行一些操作。while 的意思是在……期间即在满足条件期间重复执行循环体里的代码。1基本语法while (循环条件) { 要重复执行的代码循环体 }释义跟 if 语句很像小括号里的条件为 true 才会进入大括号执行代码。区别在于while 循环体执行完后不会跳出而是回到小括号再次判断条件条件仍为 true 就再执行一次如此反复直到条件为 false 才跳出。2循环三要素循环的本质以某个变量为起始值不断让它变化慢慢靠近终止条件。变量起始值终止条件没有终止条件会一直循环造成死循环变量变化量一般用自增或自减let i 1 while (i 3) { document.write(我会循环三次br) i }案例在页面中输出 10 句加油coding人。let i 1 while (i 10) { document.write(加油coding人br) i }改进让用户输入打印的个数。let count prompt(请输入打印次数) let i 1 while (i count) { document.write(月薪过万br) i }3while 练习循环练习的通用解题套路先搭三要素骨架循环变量从几开始let i 1、什么时候停i 100、每次怎么变i。需要总和就准备一个累加器初始值必须是 0let sum 0循环体里反复sum i。注意循环体内部的顺序先用i 干活累加、判断最后再i。如果先自增再累加会从 2 加到 101结果错误。只统计偶数在循环体里加if (i % 2 0)判断或简写为even i % 2 0 ? i : 0。循环变量从 0 开始也可以加 0 不影响总和但要同步检查循环条件和循环体里的语句顺序。练习1页面输出 1-100。let i 1 while (i 100) { document.write(${i}br) i }练习2计算 1 加到 100 的总和。let i 1 let sum 0 while (i 100) { sum i i } console.log(sum) // 5050练习3计算 1-100 之间所有偶数的和。let i 1 let sum 0 while (i 100) { if (i % 2 0) { sum i } i } console.log(sum) // 2550一次循环同时求总和与偶数和的写法注意顺序先累加后自增let num 1 let sum 0 let even 0 while (num 100) { sum num // 先加当前的 num even num % 2 0 ? num : 0 // 是偶数就加 num否则加 0 num // 最后再变化 } console.log(sum) // 5050 console.log(even) // 2550反例如果写成先num再sum num累加的就是 2~101总和会变成 5150。2.3.3 循环退出目标能说出 continue 和 break 的区别。关键字作用使用场景continue结束本次循环继续下次循环排除或跳过某一个值的时候break退出整个循环结果已经得到后续循环不再需要的时候案例页面反复弹框直到用户输入爱。while (true) { let str prompt(你爱我吗) if (str 爱) { break } }三、综合案例 —— 简易 ATM 取款机需求用户可以选择取钱、存钱、查看余额和退出功能。分析需要反复弹出输入框所以提示框要写在循环里面。用户输入 4 时结束循环不再弹窗。提前准备一个变量存储初始金额。取款是减法操作存款是加法操作查看余额直接显示金额。根据用户输入的不同数字用 switch 执行不同操作。参考代码let money 1000 // 初始金额 while (true) { let num prompt( 请选择您的操作 1. 取款 2. 存款 3. 查看余额 4. 退出 ) if (num 4) { break } switch (num) { case 1: let qu prompt(请输入取款金额) money - qu alert(取款成功当前余额${money}元) break case 2: let cun prompt(请输入存款金额) money cun alert(存款成功当前余额${money}元) break case 3: alert(当前余额${money}元) break default: alert(输入有误请重新输入) } }