6-js基础-2

news2024/10/2 3:34:48

JavaScript 基础 - 2

理解什么是流程控制，知道条件控制的种类并掌握其对应的语法规则，具备利用循环编写简易ATM取款机程序能力

  • 类型转换
  • 语句
  • 综合案例

今日重点单词：

在这里插入图片描述

类型转换

类型转换：把一种数据类型转换成另外一种数据类型

为什么需要类型转换呢？

例如：使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算

此时需要转换数据类型

数据类型转换可以分为： 显示转换和隐式转换

显示转换

自己手动写代码告诉系统该转成什么类型（数据类型明确、程序员主导）

转换为数字型

  1. Number(数据)
    • 转换成功返回一个数字类型
    • 转换失败则返回 NaN (例如数据里面包含非数字）
  2. parseInt(数据)
    • 只保留整数
    • 如果数字开头的字符串，只保留整数数字 比如 12px 返回 12
  3. parseFloat(数据)
    • 可以保留小数
    • 如果数字开头的字符串，可以保留小数 比如 12.5px 返回 12.5
// 第一个数字
let num1 = prompt('请输入第一个月工资:')
// 第二个数字
let num2 = prompt('请输入第二个月工资:')
//  输出结果
alert(Number(num1) + Number(num2))

// 通过显示转换的方式把其他类型转换为数字型
// 1. Number() 最常用的一种方式 推荐 
// 1.1 把字符串转换为数字型
console.log(typeof Number('1')) // 1   number
console.log(Number('abcd')) // NaN 如果无法完成转换则返回NaN 

// 1.2 把布尔值转换为数字型 true false 
console.log(Number(true))  // 1
console.log(Number(false)) // 0

// 1.3 把 null undefined 转换为数字型
console.log(Number(null)) // 0
console.log(Number(undefined)) // NaN

// 2. parseInt() 和 parseFloat() 固定使用场景的   100px 只要100 不要px 
// 使用场景：把以数字开头的字符串，只保留数字这种情况下就可以使用 
console.log(parseInt('100px'))  // 100
console.log(parseInt('100.5px'))  // 100  parseInt() 只保留整数
console.log(parseFloat('100.5px'))  // 100.5 parseFloat() 可以返回小数

转换为字符串和布尔型

在这里插入图片描述

// 1. 转换为字符串类型 
// 1.1 String(数据) 开发中提倡使用这种方式 
console.log(typeof String(1)) // '1'     string
console.log(String(true)) // 'true'     string

// 1.2 变量.toString(进制)
let num = 10
console.log(typeof num.toString()) //  string 
console.log(num.toString(10)) //  string   '10'
console.log(num.toString(8)) //  string   '12'

// 2. 转换为布尔型 Boolean  (重点) 因为接下来我们要学习分支语句需要用到
// 2.1 有6种情况为false： false 0 '' null undefined NaN (无，没有)
// 2.2 其余的都为true 
console.log(Boolean(false))  // false 
console.log(Boolean(0))  // false 
console.log(Boolean(1))  // true
console.log(Boolean(''))  // false
console.log(Boolean(null))  // false
console.log(Boolean(undefined))  // false
console.log(Boolean(NaN))  // false

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

在这里插入图片描述

// // 第一个数字
// let num1 = +prompt('请输入第一个月工资:')
// // 第二个数字
// let num2 = +prompt('请输入第二个月工资:')
// //  输出结果
// alert(num1 + num2)


// 1. 隐式转换为数字型的运算符
// 1.1 算术运算符 - *  /   比较运算符  >   ==
console.log(8 - '3') // 5
console.log('1999' * '2') //  3998
console.log(3 > '1')   // true
console.log(3 == '3')  // true

// 1.2 + 正号使用的时候，也会把字符串转换为 数字型
console.log('123')  // '123'
console.log(+'123')  // 123
console.log(typeof +'123')  // number

// 2. 隐式转换为字符串型的运算符   + 拼接字符串 两侧只要有一个是字符串，结果就是字符串
console.log('pink' + 18)
console.log('' + 18)  // '18'


// 3. 隐式转换为布尔型的运算符  ！逻辑非
console.log(!true)  // false 
console.log(!0)  // true
console.log(!'')  // true
console.log(!null) // true
console.log(!undefined)  // true
console.log(!NaN)  // true
console.log(!false)  // true
console.log(!'pink') // false

语句

表达式和语句

在这里插入图片描述

分支语句

分支语句可以根据条件判定真假，来选择性的执行想要的代码

分支语句包含：

  1. if分支语句（重点）
  2. 三元运算符
  3. switch语句

if 分支语句

语法：

if(条件表达式) {
  // 满足条件要执行的语句
}

小括号内的条件结果是布尔值，为 true 时，进入大括号里执行代码；为false，则不执行大括号里面代码

小括号内的结果若不是布尔类型时，会发生类型转换为布尔值，类似Boolean()

如果大括号只有一个语句，大括号可以省略，但是，俺们不提倡这么做~

// if 分支语句 选择性的执行代码
// 1. 语法规范
// if (条件) {
//   满足条件要执行的代码
// }

// 2. 体验
// console.log('我想要被表扬')
// if (false) {
//   console.log('我想要被表扬')
// }

// if (3 < 5) {
//   console.log('我想要被表扬')
// }
if ('') {   // 类型转换 类似于 Boolean()
  console.log('我想要被表扬')
}

// 3. 需求： 用户输入高考成绩，如果分数大于等于700分，则提示 '恭喜考入黑马程序员'
let score = +prompt('请您输入高考成绩:')
if (score >= 700) {
  alert('恭喜您考入黑马程序员')
}

if双分支语句

如果有两个条件的时候，可以使用 if else 双分支语句

if (条件表达式){
  // 满足条件要执行的语句
} else {
  // 不满足条件要执行的语句
}

例如：

// if 双分支语句

// 案例1： 考试成绩判断
// 1. 如果成绩大于等于700分，提示 '恭喜您，考入黑马程序员'
// 2. 否则则提示 '非常抱歉，你没有考入黑马程序员，明年再战!'
// let score = +prompt('请您输入考试成绩:')
// if (score >= 700) {
//   alert('恭喜您，考入黑马程序员')
// } else {
//   alert('非常抱歉，你没有考入黑马程序员，明年再战!')
// }

// 案例2： 用户登录案例
// 1. 如果用户名是刘德华并且密码是123456 则提示登录成功
// 2. 否则则提示登录失败
let uname = prompt('请您输入用户名:')
let pwd = prompt('请您输入密码:')
if (uname === '刘德华' && pwd === '123456') {
  alert('登录成功，欢迎回来~')
} else {
  alert('登录失败，您输入的用户名和密码错误~')
}

if 多分支语句

使用场景： 适合于有多个条件的时候

// if 多分支语句

// 案例： 根据成绩输出评语
// (1).成绩90以上是 优秀
// (2).成绩70~90是  良好
// (3).成绩是60~70之间是 及格
// (4).成绩60分以下是 不及格

// 1. 用户输入成绩
let score = +prompt('请您输入考试成绩:')

// 2. 根据成绩判断输出不同的结果
if (score >= 90) {
  alert('优秀，棒棒棒~')
} else if (score >= 70) {
  alert('良好，棒棒~')
} else if (score >= 60) {
  alert('及格，棒~')
} else {
  alert('不及格，好好加油，你可以的~')
}

// 3. 注意事项
// 3.1 因为我们判断用的是大于等于，则里面的成绩要从大往小写
// 3.2 else if 可以有任意多个， else 不是必须的

三元运算符（三元表达式）

使用场景： 一些简单的双分支，可以使用 三元运算符（三元表达式），写起来比 if else双分支 更简单

符号：? 与 : 配合使用

语法：

条件 ? 表达式1 ： 表达式2

例如：

// 三元运算符（三元表达式）
// 1. 语法格式
// 条件 ? 表达式1 : 表达式2 

// 2. 执行过程 
// 2.1 如果条件为真，则执行表达式1
// 2.2 如果条件为假，则执行表达式2

// 3. 验证
// 5 > 3 ? '真的' : '假的'
console.log(5 < 3 ? '真的' : '假的')

// 4. 练习  求2个数字的最大值
// let x = 10
let x = 100
let y = 20
console.log(x > y ? x : y)

switch语句（了解）

使用场景： 适合于有多个条件的时候，也属于分支语句，大部分情况下和 if多分支语句 功能相同

注意：

  1. switch case语句一般用于等值判断, if适合于区间判断
  2. switchcase一般需要配合break关键字使用 没有break会造成case穿透
  3. if 多分支语句开发要比switch更重要，使用也更多

例如：

// switch分支语句
// 1. 语法
// switch (表达式) {
//   case 值1:
//     代码1
//     break

//   case 值2:
//     代码2
//     break
//   ...
//   default:
//     代码n
// }

// 2. 体验: 查询水果价格，输入水果，得到当前水果价格
let fruits = '苹果'
switch (fruits) {
  case '香蕉':
    alert('香蕉的价格是: 3元/斤')
    break
    case '苹果':
    alert('苹果的价格是: 4元/斤')
    break
    case '橘子':
    alert('橘子的价格是: 2元/斤')
    break
    default:
    alert('没有查到此水果')
}

// 3. 注意事项
// 3.1  switch适合于等值判断， if多分支适合于区间判断
// 3.2  表达式的值要求 全等于 === case的值，才是能匹配上
// 3.3  break如果落下了，容易造成case穿透

断点调试

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug

浏览器打开调试界面

  1. 按F12打开开发者工具
  2. 点到源代码一栏 （ sources ）
  3. 选择代码文件

断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

在这里插入图片描述

循环语句

使用场景：重复执行 指定的一段代码，比如我们想要输出10次 ‘我学的很棒’

学习路径：

1.while循环

2.for 循环（重点）

while循环

while : 在…. 期间， 所以 while循环 就是在满足条件期间，重复执行某些代码。

语法：

while (条件表达式) {
   // 循环体    
}

例如：

// while循环: 重复执行代码

// 1. 需求: 利用循环重复打印3次 '月薪过万不是梦，毕业时候见英雄'
let i = 1
while (i <= 3) {
  document.write('月薪过万不是梦，毕业时候见英雄~<br>')
  i++   // 这里千万不要忘了变量自增否则造成死循环
}

循环三要素：

1.初始值 （经常用变量）

2.循环条件

3.变量计数（常用自增或者自减）

for 循环

作用：重复执行指定的一段代码

好处：把声明初始值、循环条件、变量计数写到一起，让人一目了然，它是最常使用的循环形式

语法：

for (初始值; 循环条件; 变量计数) {
  // 满足条件执行的循环体
}

例如：

// for循环：重复执行一段代码
// 1. 语法
// for(初始值; 循环条件; 变量计数) {
//   // 循环体
// }

// 2. 需求： 重复打印3次
// '月薪过万不是梦，毕业时候见英雄。键盘敲烂要行动，前端行业一览众'
for (let i = 1; i <= 3; i++) {
  document.write('键盘敲烂要行动，前端行业一览众~ <br>')
}

中止循环

break 中止整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用（提高效率）

continue 中止本次循环，一般用于排除或者跳过某一个选项的时候

// 1.break中止整个for循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用
// for (let i = 1; i <= 6; i++) {
//   document.write(`我是第${i}个孩子 <br>`)
//   if (i === 3) {
//     break
//   }
// }

// 2.continue中止本次循环，一般用于排除或者跳过某一个选项的时候
for (let i = 1; i <= 6; i++) {
  // 先验票，再进入电影院
  if (i === 3) {
    continue
  }
  document.write(`第${i}个孩子可以进入电影院<br>`)

}

无限循环

1.while(true) 来构造“无限”循环，需要使用break退出循环。（常用）

2.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存取款机

在这里插入图片描述

分析：

①：提示输入框写到循环里面（无限循环）

②：用户输入4则退出循环 break

③：提前准备一个金额预先存储一个数额 money

④：根据输入不同的值，做不同的操作

​ (1) 取钱则是减法操作， 存钱则是加法操作，查看余额则是直接显示金额

​ (2) 可以使用 if else if 多分支 来执行不同的操作

完整代码：

// 综合案例 - ATM存取款机
// 提前声明金额变量 money
let money = 100
// 1.提示输入框写到循环里面（无限循环）
while (true) {
  let num = +prompt(`
请选择您的操作:
1.取款
2.存款
3.查看余额
4.退出
`)
  if (num === 1) {
    let qu = +prompt('请您输入取款金额:')
    // money = money - qu
    money -= qu
  } else if (num === 2) {
    let cun = +prompt('请您输入存款金额:')
    // money = money + cun
    money += cun
  } else if (num === 3) {
    alert(`您的银行卡余额是: ${money}`)
  } else if (num === 4) {
    // 2.用户输入4则退出循环 break   一定要小心数据类型
    break
  }

}
document.write(`滴，您的银行卡余额为: ${money}元，请节约消费`)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/686693.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

快速搭建 Nuxt2 项目

快速搭建 Nuxt2 项目

文章目录 01 Nuxt 能提供哪些功能&#xff1f;有什么益处&#xff1f;02 快速搭建项目2.1 安装 create-nuxt-app 脚手架工具2.2 使用脚手架搭建项目 01 Nuxt 能提供哪些功能&#xff1f;有什么益处&#xff1f; 服务端渲染&#xff1a;Nuxt 是基于 Vue.js 的 服务端渲染 框架&…
阅读更多...
文献学习-联合抽取-Joint entity and relation extraction based on a hybrid neural network

文献学习-联合抽取-Joint entity and relation extraction based on a hybrid neural network

目录 1、Introduction 2、Related works 2.1 Named entity recognition 2.2 Relation classification 2.3 Joint entity and relation extraction 2.4 LSTM and CNN models On NLP 3、Our method 3.1 Bidirectional LSTM encoding layer 3.2 Named entity recogniton …
阅读更多...
OpenStack（1）--创建实例

OpenStack（1）--创建实例

目录 一、上传镜像 1.1 新建目录 1.2 上传至glance 1.3 查看镜像 二、新建实例 2.1 获取秘钥 2.2 新建实例 2.3 新建实例admin-vm 2.4 获取实例VNC的url 2.5 nova常用命令 一、上传镜像 1.1 新建目录 上传名为cirros-0.3.4-x86_64-disk.img的Linux测试镜像&#xf…
阅读更多...
Clock Rules（C Rules）

Clock Rules（C Rules）

scan clocks的规则检查确保它们被正确的定义和操作。可以选择任意时钟规则检查的handling为error、warning、not或ignore。 Clock Terminology 时钟规则信息包含两个重复发生的概念，为了更好地使用这些信息，应该理解以下概念。 Clock Signals 如果一个信号能够改变一个se…
阅读更多...
unity发布apk获取读写权限

unity发布apk获取读写权限

实测版本&#xff1a;unity2019 操作&#xff1a;1.修改Manifest文件 2.在代码中直接调用API代码设置&#xff08;可能不用这一步&#xff09; Mac系统&#xff1a;Unity.app同级目录&#xff1a; PlaybackEngines/AndroidPlayer/Apk/ Win系统&#xff1a;Unity安装目录下…
阅读更多...
5-响应式

5-响应式

01-媒体查询 基本写法 max-width&#xff1a;最大宽度&#xff08;小于等于&#xff09;min-width&#xff1a;最小宽度&#xff08;大于等于&#xff09; 书写顺序 min-width&#xff08;从小到大&#xff09;max-width&#xff08;从大到小&#xff09; 案例-左侧隐藏 需…
阅读更多...
measure 一维测量 Metrology 二维测量

measure 一维测量 Metrology 二维测量

1维测量就是测长度&#xff0c;一个物体的长度。 2维测量就是在2维空间上测量&#xff0c;圆和矩形。 gen_measure_rectangle2 (TmpCtrl_Row, TmpCtrl_Column, TmpCtrl_Phi, TmpCtrl_Len1, TmpCtrl_Len2, 2464, 2056, nearest_neighbor, MsrHandle_Measure_01_0) * Measure 01:…
阅读更多...
ChatGPT 实战：快速了解一个新领域

ChatGPT 实战：快速了解一个新领域

前段时间在社区里看到有人在分享&#xff1a;如何用 ChatGPT 麦肯锡方法论洞察一个行业&#xff0c;感觉这个方法在陌生行业的研究上很有帮助&#xff0c;同时我也一直好奇&#xff0c;投资经理在一两周的时间里如何快速了解一个新领域并做出投资决策的。先解决你的第一个疑问…
阅读更多...
网络安全学习心得

网络安全学习心得

我的学习心得&#xff0c;我认为能不能自学成功的要素有两点。 第一点就是自身的问题&#xff0c;虽然想要转行学习安全的人很多&#xff0c;但是非常强烈的想要转行学好的人是小部分。而大部分人只是抱着试试的心态来学习安全&#xff0c;这是完全不可能的。 所以能不能学成并…
阅读更多...
Redis6之持久化操作

Redis6之持久化操作

目录 RDB 触发 工作流程 持久化备份 优点 缺点 AOF 触发 频率配置 持久化流程 数据修复 优点 缺点 混合持久化 触发 优点 缺点 如何选择 redis是一个内存数据库&#xff0c;一旦断电或服务器进程退出&#xff0c;内存数据库中的数据将全部丢失&#xff0c;所以…
阅读更多...
【计算机视觉】中科院发布Fast SAM，精度相当SAM，速度提升了50倍！

【计算机视觉】中科院发布Fast SAM，精度相当SAM，速度提升了50倍！

文章目录 一、导读二、介绍三、方法3.1 实例分割3.2 提示引导选择3.2.1 点提示3.2.2 框提示3.2.3 文本提示 四、实验结果五、不足之处六、结论 一、导读 SAM已经成为许多高级任务&#xff08;如图像分割、图像描述和图像编辑&#xff09;的基础步骤。然而&#xff0c;其巨大的…
阅读更多...
【云原生丶Docker】Docker容器常用命令大全

【云原生丶Docker】Docker容器常用命令大全

在 Docker 核心概念理解 一文中&#xff0c;我们知道 Docker容器 其实就是一个轻量级的沙盒&#xff0c;应用运行在不同的容器中从而实现隔离效果。容器的创建和运行是以镜像为基础的&#xff0c;容器可以被创建、销毁、启动和停止等。本文将介绍下容器的这些常用操作命令。 1、…
阅读更多...
2、电商数仓（业务数据采集平台）电商业务流程、电商常识、电商系统表结构、业务数据模拟、业务数据采集模块

2、电商数仓（业务数据采集平台）电商业务流程、电商常识、电商系统表结构、业务数据模拟、业务数据采集模块

1、电商业务简介 1.1 电商业务流程 电商的业务流程可以以一个普通用户的浏览足迹为例进行说明&#xff0c;用户点开电商首页开始浏览&#xff0c;可能会通过分类查询也可能通过全文搜索寻找自己中意的商品&#xff0c;这些商品无疑都是存储在后台的管理系统中的。 当用户寻找…
阅读更多...
imx6ull——多点电容触摸

imx6ull——多点电容触摸

电容触摸寄存器 触点最多5个 触摸屏实现由 IIC驱动、中断驱动、 input子系统组成 触摸屏类型Type A和 Type B Type A&#xff1a;适用于触摸点不能被区分或者追踪&#xff0c;此类型的设备上报原始数据 (此类型在实际使 用中非常少&#xff01; Type B&#xff1a;适用于有…
阅读更多...
SikuliX 实战

SikuliX 实战

一. SikuliX是什么 SikuliX的前身是 Sikuli。Sikuli是由MIT&#xff08;麻省理工学院&#xff09;研究团队发布的一种基于OpenCV图像识别技术的自动化工具软件。 Sikuli 是2009 年由在麻省理工学院用户界面设计小组作为一个开源研究项目&#xff0c;负责人分别是Tsung-Hsiang …
阅读更多...
42 # 前端 blob 类型

42 # 前端 blob 类型

前端的二进制 文件类型 Blob&#xff1a;二进制文件类型input 的 typefile&#xff1a;file 类型&#xff0c;继承于 Blob 前端实现下载功能 实现下载字符串到文件里&#xff0c;需要将字符串包装成二进制类型 <!DOCTYPE html> <html lang"en"><h…
阅读更多...
文字对话如何配音？安利你三款制作对话配音的软件

文字对话如何配音？安利你三款制作对话配音的软件

对话配音怎么配&#xff1f;安利三个好用的对话配音软件给你 一分钟告诉你对话配音怎么配 对话配音怎么配&#xff1f;超简单的对话配音制作教程来啦 对话配音软件有哪些&#xff1f;给你安利这三款对话配音软件 对话配音如何操作&#xff1f;分享你三个对话配音小技巧 在电…
阅读更多...
想学PMP，有考过的同学给个建议嘛？

想学PMP，有考过的同学给个建议嘛？

PMP中国和国外的考试形式略有不同&#xff0c;这里只介绍一下PMP中国考试的相关信息。 1.PMP考试相关信息 考试形式&#xff1a;笔试 考试时间&#xff1a;230分钟&#xff08;3小时50分钟&#xff09;&#xff0c;一般考试时间在上午9:00~12:50&#xff0c;也会因为特殊情况…
阅读更多...
C++primer(第五版)第二章(变量和基本类型)

C++primer(第五版)第二章(变量和基本类型)

2.1基本内置类型 2.1.1算术类型 C的基本内置类型包括算数类型和空类型,空类型就是void,算术类型我从原书中截下来放在下面: 从上表我们可以得知C规定int至少和short一样大,long至少和int一样大,longlong至少和long一样大. 其中char(字符)类型支持国际化,所以char会确保可以放…
阅读更多...
学Java还是学Android？如何选择？

学Java还是学Android？如何选择？

学Java和学Android都有其各自的好处和应用场景。下面是一些关于学习Java和学习Android的信息&#xff0c;以帮助你做出选择&#xff1a;刚好我这里有嵌入式、plc、单片机的资料需要的在评论区扣6或私我 学习Java&#xff1a; Java是一种通用的编程语言&#xff0c;广泛应用于服…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023