JavaScript 基础02：运算符、表达式和语句、ATM存取案例 |
您所在的位置：网站首页 › 编程无限循环符号 › JavaScript 基础02：运算符、表达式和语句、ATM存取案例 |
|
JavaScript 基础 02：运算符、表达式和语句
理解什么是流程控制，知道条件控制的种类并掌握其对应的语法规则，具备利用循环编写简易ATM取款机程序能力 运算符语句综合案例 一、运算符 1. 算术运算符数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。 算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等。 运算符作用+求和-求差*求积/求商%取模（取余数），开发中经常用于作为某个数字是否被整除注意：在计算失败时，显示的结果是 NaN （not a number） // 算术运算符 console.log(1 + 2 * 3 / 2) // 4 let num = 10 console.log(num + 10) // 20 console.log(num + num) // 20 // 1. 取模(取余数) 使用场景： 用来判断某个数是否能够被整除 console.log(4 % 2) // 0 console.log(6 % 3) // 0 console.log(5 % 3) // 2 console.log(3 % 5) // 3 // 2. 注意事项 : 如果我们计算失败，则返回的结果是 NaN (not a number) console.log('小明' - 2) //NaN console.log('小明' * 2) //NaN console.log('小明' + 2) //小明2 2. 赋值运算符赋值运算符：对变量进行赋值的运算符。 将等号右边的值赋予给左边, 要求左边必须是一个容器。 运算符作用+=加法赋值-=减法赋值*=乘法赋值/=除法赋值%=取余赋值 let num = 1 // num = num + 1 // 采取赋值运算符 // num += 1 num += 3 console.log(num) 3. 自增/自减运算符 符号作用说明++自增变量自身的值加1，例如: x++–自减变量自身的值减1，例如: x– ++在前和++在后在单独使用时二者并没有差别，而且一般开发中我们都是独立使用。++在后（后缀式）使用更多。注意： 只有变量能够使用自增和自减运算符++、-- 可以在变量前面也可以在变量后面，比如: x++ 或者 ++x // let num = 10 // num = num + 1 // num += 1 // // 1. 前置自增 // let i = 1 // ++i // console.log(i) // let i = 1 // console.log(++i + 1) // 2. 后置自增 // let i = 1 // i++ // console.log(i) // let i = 1 // console.log(i++ + 1) // 了解 let i = 1 console.log(i++ + ++i + i) 4. 比较运算符 使用场景：比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false）。 运算符作用>左边是否大于右边=左边是否大于或等于右边 5) // false console.log(3 >= 3) // false console.log(2 == 2) // true // 比较运算符有隐式转换 把'2' 转换为 2 双等号 只判断值 console.log(2 == '2') // true // console.log(undefined === null) // === 全等 判断 值 和 数据类型都一样才行 console.log(2 === '2') console.log(NaN === NaN) // NaN 不等于任何人，包括他自己 console.log(2 !== '2') // true console.log(2 != '2') // false console.log('-------------------------') console.log('a' // console.log('执行语句') // } // if (3 > 5) { // console.log('执行语句') // } // if (2 === '2') { // console.log('执行语句') // } // 1. 除了0 所有的数字都为真 // if (0) { // console.log('执行语句') // } // 2.除了 '' 所有的字符串都为真 true // if ('pink老师') { // console.log('执行语句') // } // if ('') { // console.log('执行语句') // } // // if ('') console.log('执行语句') // 1. 用户输入 let score = +prompt('请输入成绩') // 2. 进行判断输出 if (score >= 700) { alert('恭喜考入清华') } console.log('-----------------') 2.2 if双分支语句 如果有两个条件的时候，可以使用 if else 双分支语句。 if (条件表达式){ // 满足条件要执行的语句 } else { // 不满足条件要执行的语句 }例如： // 1. 用户输入 let uname = prompt('请输入用户名:') let pwd = prompt('请输入密码:') // 2. 判断输出 if (uname === 'pink' && pwd === '123456') { alert('恭喜登录成功') } else { alert('用户名或者密码错误') } 2.3 if 多分支语句 使用场景： 适合于有多个条件的时候。 // 1. 用户输入 let score = +prompt('请输入成绩：') // 2. 判断输出 if (score >= 90) { alert('成绩优秀~~') } else if (score >= 70) { alert('成绩良好~~') } else if (score >= 60) { alert('成绩及格~~') } else { alert('成绩不及格~~') } 2.4 三元运算符（三元表达式）使用场景： 一些简单的双分支，可以使用 三元运算符（三元表达式），写起来比 if else双分支 更简单。 符号：? 与 : 配合使用。 语法： 条件 ? 表达式1 ： 表达式2例如： // 三元运算符（三元表达式） // 1. 语法格式 // 条件 ? 表达式1 : 表达式2 // 2. 执行过程 // 2.1 如果条件为真，则执行表达式1 // 2.2 如果条件为假，则执行表达式2 // 3. 验证 // 5 > 3 ? '真的' : '假的' console.log(5 = 10 ? num : 0 + num alert(num) 2.5 switch语句（了解）使用场景： 适合于有多个条件的时候，也属于分支语句，大部分情况下和 if多分支语句 功能相同。 注意： switch case语句一般用于等值判断, if适合于区间判断。switch case一般需要配合break关键字使用 没有break会造成case穿透。if 多分支语句开发要比switch更重要，使用也更多。例如： // switch分支语句 // 1. 语法 // switch (表达式) { // case 值1: // 代码1 // break // case 值2: // 代码2 // break // ... // default: // 代码n // } switch (2) { case 1: console.log('您选择的是1') break // 退出switch case 2: console.log('您选择的是2') break // 退出switch case 3: console.log('您选择的是3') break // 退出switch default: console.log('没有符合条件的') } 2.6 断点调试**作用：**学习时可以帮助更好的理解代码运行，工作时可以更快找到bug。 浏览器打开调试界面： 按 F12 打开开发者工具。点到源代码一栏 （ sources ）。选择代码文件。**断点：**在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来。 3. 循环语句使用场景：重复执行 指定的一段代码，比如我们想要输出10次 ‘我学的很棒’。 学习路径： ① while循环 ② or 循环（重点） 3.1 while循环 while : 在…. 期间， 所以 while循环 就是在满足条件期间，重复执行某些代码。语法： while (条件表达式) { // 循环体 }例如： // while循环: 重复执行代码 // 1. 需求: 利用循环重复打印3次 '月薪过万不是梦，毕业时候见英雄' let i = 1 while (i // document.write('我要循环三次 ') // // 3. 变量的变化量 // i++ // } // 1. 变量的起始值 let end = +prompt('请输入次数:') let i = 1 // 2. 终止条件 while (i // console.log(i) // if (i === 3) { // break // 退出循环 // } // i++ // } let i = 1 while (i i++ continue } console.log(i) i++ } 3.3 无限循环while(true) 来构造“无限”循环，需要使用break退出循环。（常用） for(;😉 也可以来构造“无限”循环，同样需要使用break退出循环。 // 无限循环 // 需求： 页面会一直弹窗询问你爱我吗？ // (1). 如果用户输入的是 '爱'，则退出弹窗 // (2). 否则一直弹窗询问 // 1. while(true) 无限循环 // while (true) { // let love = prompt('你爱我吗?') // if (love === '爱') { // break // } // } // 2. for(;;) 无限循环 for (; ;) { let love = prompt('你爱我吗?') if (love === '爱') { break } } 三、综合案例-ATM存取款机[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sMg8PPC5-1679189104473)(assets/1671018781557.png)] 分析： ①：提示输入框写到循环里面（无限循环）。 ②：用户输入4则退出循环 break。 ③：提前准备一个金额预先存储一个数额 money。 ④：根据输入不同的值，做不同的操作。 (1) 取钱则是减法操作， 存钱则是加法操作，查看余额则是直接显示金额。 (2) 可以使用 if else if 多分支 来执行不同的操作。 完整代码： // 1. 开始循环 输入框写到 循环里面 // 3. 准备一个总的金额 let money = 100 while (true) { let re = +prompt(` 请您选择操作： 1.存钱 2.取钱 3.查看余额 4.退出 `) // 2. 如果用户输入的 4 则退出循环， break 写到if 里面，没有写到switch里面， 因为4需要break退出循环 if (re === 4) { break } // 4. 根据输入做操作 switch (re) { case 1: // 存钱 let cun = +prompt('请输入存款金额') money = money + cun break case 2: // 存钱 let qu = +prompt('请输入取款金额') money = money - qu break case 3: // 存钱 alert(`您的银行卡余额是${money}`) break } }let money = 100 while (true) { let re = +prompt( 请您选择操作： 1.存钱 2.取钱 3.查看余额 4.退出 ) // 2. 如果用户输入的 4 则退出循环， break 写到if 里面，没有写到switch里面， 因为4需要break退出循环 if (re === 4) { break } // 4. 根据输入做操作 switch (re) { case 1: // 存钱 let cun = +prompt(‘请输入存款金额’) money = money + cun break case 2: // 存钱 let qu = +prompt(‘请输入取款金额’) money = money - qu break case 3: // 存钱 alert(您的银行卡余额是${money}) break } } |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |