Javascript
JavaScript基础md文档
基础的第一天
JavaScript组成
由ECMAscript和Web Apis组成(它是由DOM("网页文档对象模型")和BOM("浏览器对象模型")组成)
初步认识JavaScript的写法
//按照button形成一个按钮的切换
<style>
.pink{
background-color: pink;
border: 0;
}
button{
width: 100px;
height: 100px;
}
</style>
<script>
let but = document.querySelectorAll(\'button\')
for (let i=0;i\<but.length;i++ ){
but\[i\].addEventListener(\'click\',function(){
document.querySelector(\'.pink\').className = \'\'
this.className = \'pink\'
})
}
</script>
<body>
<button class="pink">btn1</button>
<button>btn2</button>
<button>btn3</button>
<button>btn4</button>
</body>
JavaScript三种书写位置
内部
外部
行内
JavaScript注释
单行注释 ctrl + /
多行注释 shift +alt +a
JavaScript结束符 就是分号 在js中可加可不加
例如:
alert(\'第一句话\');
alert(\'第一句话\')
输入和输出
输出:
第一种写法 document.write
作用:向body内输出内容注意:如果输出的内容写的是标签,也会被解析成网页元素document.write(\'这是一段输入语法\')还可以直接输出html结构document.write(\'\<h1\>我在测试\</h1\>\')
第二种写法 alert
作用:页面弹出警告对话框alert(\'我直接给你输出一部分内容\')
第三种写法 console.log
作用:控制台输出语法,程序员调试使用console.log(\"控制台输出\");
输入:
输入 prompt
prompt(\'请输入你的年龄\')
作业测试
在页面中输出显示” JS 你好!”,”Javascript我来了!”,”它~会魔法吧!” 三种方法
alert(\'你好 JS\~\')
document.write(\'\<h1\>Javascript我来了!\</h1\>\')
console.log(\'它\~会魔法吧!\');
变量
变量不是数据本身,他们仅仅是一个用于存储数值的容器。可以理解为是用来装东西的纸箱子
声名变量 要想使用变量,首先要创建变量
let abc(变量名) = var abc(变量名)
变量赋值号 : =
let age = 18 //变量初始化
console.log(age);
案例一
请声明一个年龄age为18岁,userName叫张三的同学的名字
let age = 18
let userName = \'张三\'
console.log(age,userName)
更新变量 (注意变量只能存储一个值)
更新age的年龄
let age = 18
age = 19
console.log(age) //控制台显示是19(注意变量只能存储一个值)
声明多个变量(不建议使用多变量)
let age = 18,userName = \'赵四\'
console.log(age,userName) //控制台打印出来的结果是18,赵四
案例二
使用输入prompt输出用户名userName
具体的操作步骤:
分两种写法
- 一/第一种写法
1.用户的输入
prompt(\'请输入用户名\')
2.内容处理存储数据
let userName = prompt('请输入用户名')
3.打印输出数据
console.log(userName) //控制台显示的就是你输入的用户名
document.write(\'userName\') //网页中就会显示你输入的用户名
- 二/第二种写法
1.直接声明用户的输入处理存储数据
let userName = prompt('请输入用户名')
2.打印输出数据
console.log(userName) //控制台显示的就是你输入的用户名
document.write(\'userName\') //网页中就会显示你输入的用户名
交换变量
把两个值进行一个交换 num1和num2
let num1 = 10
let num2 = 20
let temp //这个是用于存储num1的值
temp = num1
//然后把num2的值给num1
num1 = num2
//接着把temp的值给num2,这样就完成了一个交换变量
num2 = temp
//接着打印一下这个num1,num2
consolo.log(num1,num2) //显示的结果就是 20,10
案例三
需求:输入姓名(userName),年龄(age),性别(gender)然后输出到页面上或者控制台
定义三个变量名 然后在后面接上prompt
let userName = prompt(\'请输入你的姓名\')
let age = prompt(\'请输入你的年龄\')
let gender = prompt(\'请输入你的性别\')
document.write(userName,age,gender) //页面输出就是你的姓名,年龄,性别
console.log(userName,age,gender) //控制台输出就是你的姓名,年龄,性别
let和var的区别
var声明:
可以先使用 在声明中(不合理)
var声明过的变量可以重复声明(不合理)多次声明
比如变量提升、全局变量、没有块级作用域等等
let声明:
不允许多次声明
规则和规范
规则
不能用关键字
关键字:有特殊含义的字符,JavaScript内置的一些英语词汇。例如:let,var ,if,for
只能用下划线、字母、数字、$组成,且数字不能和开头
字母严格区分大小写,如Age和age是不同的变量
只能出现下划线或者$符号
规范
起名要有意义
遵守小驼峰命名法 第一个单词首字母小写,后面每个单词字母大写例如:userName
**数组的基本使用 **
**数组Array—一种将多个数据存储在单个变量下 **
let arr=['数组一','数组二','数组三','数组四']
数组下有多个数据,每个数据都有自己的
编号/下标/
数组可以存储任意类型的数据
取值的语法 数组名[下标]/序号[索引号] 下标是从0开始
元素:数组中保存的每个数据都叫元素
下标:数组中数据的编号
长度:数组中数据的个数,通过数组的length属性获得
使用数组的好处: 数组可以保存多个数据
数组字面量用 [] / 中括号表示
- 1.声明数组
let arr = \[\"张三\",\"李四\",\"王五\",\"赵六\"\]
console.log(arr)
//控制台输出为
Array-\> 0:张三
1:李四
2:王五
3:赵六
2.使用数组
(如果单独只要王五这个值)
console.log(arr\[2\])
案例一
定义一个数组里面存放从星期一到星期天的数据,需要打印出星期天这个数据
let arr = \[\"星期一\", \"星期二\", \"星期三\", \"星期四\", \"星期五\", \"星期六\", \"星期日\"\]
console.log(arr\[6\]); //星期天的下标为6 所以表达方式为arr\[6\]
常量
概念:使用const声明的变量叫做 “常量”
使用场景当某个变量永远不会改变的时候,就是用const 不要使用let
常量const不允许重新赋值,声明的时候必须赋值(初始化)
小技巧:不需要重新赋值的数据就使用const
1.常量不允许更改值
2.常量声明的时候必须赋值
const Ip = 3.14
console.log(Ip) //结果就是3.14
数据类型
JS数据类型整体分为两大类
基本数据类型 和 引用数据类型
基本数据类型:使用()提高优先级
number/数字型
数字型可以是整数、小数、正数、负数
1.1. 数字型又分整数、小数、正数、负数1.2. 算数运算符
string / 字符串型
通过单引号('')双引号("")或者反引号(``)包裹的数据都叫字符串
let abc = \'13131313\' //这个也是字符串型
let set = \'abc\' //字符串
console.log(set) //这个set是变量
console.log(\'set\') //这个set是字符串
注意事项:
无论单引号或者是双引号必须成对使用
单引号/双引号可以互相嵌套,但是不以自己嵌套自己(口诀是外双内单,或者外单内双)
比如:console.log("我是谁你能看见'我这个人吗?'")
必要时可以使用转义字符\ ,输出单引号或者双引号
比如console.log('收到请\'回答\'')
boolean / 布尔型
只有两个固定的值 true 和 false // 真 和 假
console(3\>4) //false
undefined / 未定义型
出现:只声明变量,不赋值的情况下,变量的默认值为undefined,一般很少【直接】为某个变量赋值为undefined
未定义类型 弱数据类型 声明一个变量为赋值就是 undefined
let num
console.log(num) //undefined
null / 空类型 仅仅只是代表的无,空 或者 值未知的特殊值
let obj = null
console.log(obj) //控制台打印就是 null
官方解释:把null作为尚未创建的对象
undefined 和 null区别
console.log(undefined + 1) // NaN
console.log(null + 1) // 1
结论:先乘除后加减,有括号先算括号里面的···
开发场景:%判断某个数字是否能被整除
特殊值:NaN not a number //翻译:这个不属于数字类型
undefined/未定义型
出现:只声明变量,不赋值的情况下,变量的默认值为undefined,一般很少【直接】为某个变量赋值为undefined
未定义类型 弱数据类型 声明一个变量为赋值就是 undefinedlet num
console.log(num) //undefined
null/空类型 仅仅只是代表的无,空 或者 值未知的特殊值
``let obj = null console.log(obj) //控制台打印就是 null
官方解释:把null作为尚未创建的对象
undefined 和 null区别console.log(undefined + 1) // NaN
console.log(null + 1) // 1
引用数据类型
object对象
字符串拼接:
场景:+运算符 可以实现字符串的拼接。
口诀:数字相加,字符相连
console.log(1+1) //输出是2
console.log(\'我是\'+\'神仙\') //输出是 我是神仙
####### 案例:
let age = 18
document.write(\'我今年\'+age+\'岁了\') //是输出是 我今年18岁了
document.write(\'我今年\'+age+\'岁了\') //输出也是 我今年18岁了
模板字符串 (通常是用来拼接变量和字符串的)
语法: ``(反引号) 内容拼接变量的时候。用 ${变量名} 包住变量
let age = 80
document.write(\
我今年${age}岁了`)`
算数运算符:
*+ 求和*
- 求差
* 求积 乘除取余同级 乘除取余大于加减
/ 求商
% 取模(取余数)
赋值运算符 对变量进行赋值的运算符 =
使用场景:计数
一元运算符 符号 正负号 + -
自增 ++
作用:让变量的值+1
//////////////////
前置自增
++num //让num的值加1变2,也就是每次只+1
后置自增
num++ //作用和前置自增一致
//////////////////
区别:
前置自增:先自加再使用(口诀:++在前 先加)
后置自增:先使用再自加(口诀:++在后 后加)
自减 --
作用:让变量的值-1
////////////////
前置自减
--num //让num的值加1变0,也就是每次只-1
后置自减
num++ //作用和前置自减一致
/////////////////
区别:
前置自减:先自减再使用(口诀:++在前 先加)
后置自减:先使用再自减(口诀:++在后 后加)
比较运算符 //有隐式转换
使用场景:比较两个数据大小,是否相等
>:左边是否大于右边
<:左边是否小于右边
>=:左边是否大于或等于右边
<=:左边是否小于或等于右边
==:左右两边值是否相等
===:左右两边数据类型和值都相等
!==:左右两边是否不全等
比较结果为boolean类型 即只会得到true或false
对比
= 单等是赋值
== 是判断
=== 是全等
开发种判断是否相等,强烈推荐使用 ===
字符串比较,是比较的字符对应的ASCII码
从左往右一次比较
如果第一位一样在比较第二位,以此类推
比较的少,了解即可
尽量不要比较小数,因为小数有精度
不同类型之间会进行隐式转换
最终把数据隐式转换转成number类型
逻辑运算符
使用场景:逻辑运算符用来解决多重条件判断
案例:
如果我向判断一个变量num是否大于且小于10
我们就要用到逻辑运算符:
num \> 5 && num \< 10
符号 名称 日常读法 特点 口诀
&& 逻辑与 并且 符号两边都为true结果才是true 一假则假
|| 逻辑或 或者 符号两边有一个true就为true 一真则真
! 逻辑非 取反 true变false false变true 真变假,假变真
--------------------------
逻辑与 && 一假则假
console.log(true && true) // true
console.log(false && true) //false
console.log(3\<5 && 2\<3) // true
console.log(3\>5 && 3\<2) //false
--------------------------
逻辑或 || 一真则真
console.log(true \|\| true) //true
console.log(false \|\| true) //true
console.log(false \|\| false) //false
--------------------------
逻辑非 ! 真变假,假变真 一元运算符
console.log(!true) //false
console.log(!false) //true
---------------------------
运算符优先级
优先级 运算符 顺序
1 小括号 ()
2 一元运算符 ++ -- !
3 算术运算符 先 * / 后 + -
4 关系(比较)运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符 先 && 后 ||
7 赋值运算符 =
8 逗号运算符 ,
面试题
let i = 1
console.log(i++ + ++i + i); // 7
练习
作业题目
/*
判断一个数是4的倍数,但是不能被100的倍数
需要:用户输入一个数,判断这个数能被4整除,但是不能被100整除,满足条件,页面弹出true,否则弹出false
*/
// 用户输入
let num =prompt(\'除数\')
// // 判断条件,看余数是不是0,如果是0就被整除,不是就不是被整除
alert(num % 4 === 0 && num % 100 !== 0 )
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); //false
let d = !c \|\| b && a //先算! 然后在比较&& 在比较 \|\|
console.log(d); //true
还有其他的 += -= *= /= %=
使用方式 num = num+1 简易写法 num += 1
练习
<script>
//计算圆的面积
/*
1.面积的数学公式π*r²
2.转换为javascript写法:变量圆的半径(3.14) *r*r
*/
// 1.页面弹出输入框
let r = prompt('请输入圆的半径')
// 2.计算圆的面积(内部处理)
let resule = 3.14 *r *r
// 3.页面输出
document.write(resule)
</script>
数据类型转换
显示转换
转换成数字型:Number(数据)
let str = \'123\'
console.log(Number(str),typeof Number(str));
let num = Number(prompt(\'输入数字\'))
console.log(num);
parseInt:取数字整数
console.log(parseInt(\'12.11314px\')) //显示的数据就是12
parseFloat:取数字全部包括小数点后面的
console.log(parseFloat(\'12.11314px\')); //显示的数据就是12.11314
隐式转换
+号两边只要有一个是字符,都会把另外一个转成字符串
除了+意外的运算符 比如- * / 等都hi吧数据转成数字类型
缺点
转换类型不明确,靠经验才能总结
小技巧:
+号作为正好解析可以转换成数字型
数据和字符串相加结果都是字符串
console.log(+\'123\'); //显示的不是字符串是数字
检测数据类型 关键字 typeof
作为运算符: typeof x (常用的写法)
函数形式: typeof(x)
注意:prompt,表单里头的数据都是string字符串型
let age = 10
console.log(typeof age); //number
let abc = \'123\'
console.log(typeof abc); //string
综合案例
<script>
// 题目 用户订单信息案例
// 需求 用户输入商品价格和商品数量,以及收货地址,可以自动打印订单信息
/\*
分析:
1.需要输入3个数据,所以需要3个变量来存储
price num address
2.需要计算总的价格 total
3.页面打印生成表格,里面填充数据即可
4.记得最好使用模板字符
\*/
//新增一个小需求就是改变产品名称咋办
// 重新声明 shop 就可以了
let shop = prompt(\'请输入用户的产品\')
// 2.用户输入
let price = +prompt(\'请输入价格\')
let num = +prompt(\'请输入数量\')
let address = prompt(\'请输入地址\')
// 2.计算总额
let total = price \* num
console.log(total);
//3.页面打印渲染
`document.write(``
\<table border=\"1px soli \#000\" width=\"700\" height=\"100\" cellspacing=\"0\" cellpadding=\"10px\" class=\"abc4\"\>
\<caption\>
\<h3\>订单确认\</h3\>
\</caption\>
\<tr\>
\<td\>商品名称\</td\>
\<td\>商品价格\</td\>
\<td\>商品数量\</td\>
\<td\>总价\</td\>
\<td\>收货地址\</td\>
\</tr\>
\<tr\>
\<td\>\${shop}\</td\>
\<td\>\${price}元\</td\>
\<td\>\${num}\</td\>
\<td\>\${total}元\</td\>
\<td\>\${address}\</td\>
\</tr\>
\</table\>
\
)`
</script>
表达式
表达式是可以被求值的
表达式 num = 3+4
语句
语句 不一定有值
是一段可以执行的
语句: alert() 弹出对话框 console.log() 控制台打印输出
----------------------------------------------------------------------
区别:
因为表达式可被求值,所以它可以写在赋值语句的右侧而语句不一定有值,所以alert() for 和break等语句就不能被用于赋值。
分支语句
程序三大流程流程控制语句
顺序结构
分支结构
if分支语句
三元运算符
使用场景:其实比if双分支 更简单的方法 ,可以使用 三元表达式
符号: ? 与 : 配合使用
语法: 条件 ? 满足条件执行的代码 : 不满足条件执行的代码
一般用来取值
例如:
3 > 5 ? 3 : 5 //3>5这个是条件 如果为真就返回3 为假就给5
<script>
例子 3 > 5 ? 3 : 5
console.log(3>5 ? 3 : 5); // 5
对比if双分支
if( 3 <5){
alert('真的')
}
else{
alert('假的')
}
对比三元运算表达式 适合简单的if else
3 < 5 ? alert('真的') : alert('假的')
作业1
判断2个数的最大值
有两种方式 if else // 三元表达式
if else
定义用户的输入
let num1 = +prompt("请输入数字1");
let num2 = +prompt("请输入数字2");
// 判断输出
if(num1 > num2){
alert(`最大值:${num1}`)
}
else{
alert(`最大值:${num2}`) //运行的是这个 因为 1 < 2
}
--------------------------------------------------------------------------------
三元运算符
num1 > num2 ? alert(`最大值:${num1}`) : alert(`最大值:${num2}`); // 对于这种小的判断 三元表达式更加方便 但对于大的判断 那还是用if else吧 ok作业1完成了!!!每日都要进步 加油加油
数字补0
作业 需求:用户输入1个数,如果数字小于10,则前面进行补0,比如09 03 等 分析:1:为后期页面限时时间做铺垫 2:利用三元运算符补0计算
用户输入
let num1 = prompt("请输入数字");
// 判断输出 小于10才补0
num = num1 < 10 ? 0 + num1 : num1;
alert(num);
</script>
switch语句
循环结构
if分支语句 单分支 双分支 多分支
单分支if语法
使用的语法:
if(条件){
满足条件要执行的代码
}
双分支if语法
if(条件){
满足条件执行的代码
}
else{
不满足条件执行的代码
}
多分支if语句:(适合于有多个结果的时候,比如学习成绩可以分为:优 良 中 差)
if(条件){
代码1
}
else if(条件2){
代码2
}else{
代码3
}
注意点:
括号内的条件为true时,进入大括号里执行代码
小括号内的结果若不是布尔类型时,会发生隐式转换 转为布尔类型
如果大括号只有一个语句,大括号可以省略,但是,我们不会这么做
案例
<script>
// //单分支if语法
// if(true){
// console.log('我被执行了')
// }
// // -------------------
// // 除了0所有数字都为真
// if(0){
// console.log('不会被执行');
// }
// // --------------------
// // 除了''(空字符串)所有的字符串都为真
// if(''){
// console.log('我也不会被执行');
// }
//双分支if语法
// 判断用户登录案例
// 需求:用户输入,用户名pink,密码:123456,提示登陆成功,否则提示登陆失败
/*
分析:
弹出输入框,分别输入用户名和密码
通过if语句判断,如果用户名是pink,并且密码是123456,则执行if的语句,否则执行elese的语句
*/
// 1.用户输入
// let username = prompt('请输入管理员的用户名')
// let password = prompt('请输入管理员的密码')
// // 2.判断输出
// if(username === 'pink' && password === '123456' ){
// alert('恭喜你登录成功')
// }
// else{
// alert('用户名或者密码错误')
// }
作业
// // 用户输入成绩,如果分数大于700,则提示恭喜进入课程
// // 1.用户输入
// let promes = prompt('请输入你的成绩')
// // 2.进行判断输出
// if(promes>=700){
// alert('恭喜进入本学校')
// }
// 1用户输入,如果工龄大于1年,年底奖金+2000 否则年底没奖金
// // 1.用户输入
// let pro = prompt('请输入你得工龄')
// // 2.输出奖金
// if(pro >= 365){
// alert('奖励2000')
// }
// else{
// alert('继续努力')
// }
判断闰年案例
// 需求:让用户输入年份,判断这一年是闰年还是平年并弹出对应的警示框
// 分析
// 1.能被4整除但不能被100整数,或者被400整除的年费是闰年其他都是平年
// 2.需要用到逻辑运算符
// 1.用户输入
// let year = +prompt('输入年份')
// // 2.判断输出
// if(year % 4 === 0 && year % 100 !== 0 || year % 400 === 0){
// alert(`${year}为闰年`)
// }else{
// alert(`${year}为平年`)
// }
输入成绩案例
/*
注:
成绩90以上是 优秀
成绩70-90是 良好
成绩60-70是 及格
成绩60以下是 不及格
*/
// 1.输入成绩
// let sub = +prompt('请输入你的成绩')
// // 2.判断输出
// if(sub>=90){
// alert('你的成绩是优秀')
// }else if(sub>=70 && sub<90){
// alert('你的成绩是良好')
// }
// else if(sub>=60 && sub<70){
// alert('你的成绩是及格')
// }
// else{
// alert('你的成绩不及格')
// }
// 根据不同的时间输出不同的问候语
// 用户输入
let time = +prompt('请输入时间')
// 输出
if(time === 2){
alert('现在是下午2点不是早上2点')
}else if( time === 3){
alert('现在是下午3点不是早上3点')
}
else if(time === 4){
alert('现在是下午4点不是早上4点')
}
else{
alert('时间还在加载请您休息一下')
}
// 刚刚这里不是全等所以我犯了一个很重要的错误! 书写的时候要用全等比较好 请注意一下
// 而这种是因为'' 里面包含的是字符串 你输入的数字是无效的 注意一下
</script>
**while语句 **
循环:重复执行一些操作,while:在...期间,所以while循环就是在满足条件期间,重复执行某些代码
while 循环基本语法:
while(循环条件){
要重复执行的代码(循环体)
}
释义:跟if语句很像,都要满足小括号里的条件为true才会进入循环体执行代码
while大括号里代码执行完毕后不会跳出,而是继续会到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再会到小括号判断条件,直到括号内条件不满足,即跳出
while循环三要素:
循环的本质就是以某个变量为起始值,然后不断产生变化量,慢慢靠近终止条件的过程
1.变量起始值
2.终止条件(没有终止条件,循环会一致执行,造成死循环)
3.变量变化量(用自增或自减)
let i = 1
while(i<=5){
document.write('我被执行了5次')
i++
}
while循环的作用是什么?
答:在满足条件期间,重复执行某些代码
while循环三要素:
答:
1.变量起始值
2.终止条件(没有终止条件,循环会一致执行,造成死循环)
3.变量变化量(用自增或自减)
//变量起始值
let age = 15;
//终止条件
while (age <= 18) {
document.write("我被执行了4次 ");
//变量变化量
age++;
}
练习:
作业:在页面中打印输出10句”月薪过万”
需要:使用while循环,页面中打印,可添加换行结果
let i = 1;
while (i <= 10) {
document.write("月薪过万<br>");
i++;
}
思考:能不能改进,让用户输入打印输出的个数呢?
let a = 1;
let i = +prompt("输入一个数");
while (a <= i) {
document.write(`我被执行了${a} <br>`);
a++;
}
while练习
需求:使用while循环,页面中打印,可添加换行效果
1.页面输出1-100
2.计算从1到100的总和并输出
3.计算1-100之间的所有偶数和
1.页面输出1-100
声明1个变量名 num
let num = 1;
循环 num <=100
while (num <= 100) {
// 输出
document.write(`${num} <br>`);
// 记得每次+1
num++;
}
解题思路 声明一个变量名为1 执行循环while 然后每次自增+1就行了
2.计算从1到100的总和并输出
// 核心思路:声明累加和的变量 sum 每次把i加到sum里面
// 声明两个变量名 num , i
let sum = 0; //存放
let i = 1; //初始值
while (i <= 100) {
sum = sum + i; //原写 利用循环每次加1放到容器num中 如果判断到i>100之后就跳出循环
sum += i; //简写
i++;
document.write(`${sum} <br>`);
}
//大概原理就是这样
3.计算1-100之间的所有偶数和
// 思路:声明累加和的变量sum 首先利用if语句把 i里面的偶数筛选出来 把筛选的i加到sum里面
// 继续声明2个变量 i , sum
let i = 1; //初始值
let sum = 0; //容器
// // 执行循环
while (i <= 100) {
if (i % 2 !== 0) {
sum += i;
}
i++;
// document.write(`${sum} <br>`);
// }
//具体操作就是做了一个if判断取偶数的余数 才会执行sum += i; 奇数就是这么写我记错了 3/2余数也是1 5/2所以为4余数 ok
循环退出
break:退出循环
continue:结束本次循环,继续下次循环
// 打印5句话
let i = 1;
while (i < 5) {
if (i === 3) {
break;
}
i++;
console.log(`执行了${i}次`);
}
while (i < 5) {
if (i === 3) {
i++;
continue;
}
console.log(`执行了${i}次`);
i++;
}
区别:
continue 退出本次循环,一本用于排除或者跳出某一个选项的时候,可以使用continue
break 退出整个循环,一般用于结果已经得到,后续的循环不需要的时候可以使用
switch语句
释义:找到根小括号里数据全等的case值,并执行里面对应的代码 若没有全等 === 的则执行default里面的代码
例如:数据若跟值2全等,则执行代码2
--------------------------
1.switch case语句一般用于等值判断,不适合于区间判断
---------------------------
2.switch case一般需要配合break关键字使用 没有break会造成case穿透
---------------------------
例如:数据若跟值2全等,则执行代码2
语句结构:
switch(数据) {
case 值1: 代码1
break
case 值2: 代码2
break
default: 代码n
break
}
练习:
<script>
/*
页面弹框
需求:页面弹出对话框,'你爱我吗?'如果输入'爱',则结束,否则一直弹出对话框
分析:
1.循环条件永远为真,一直弹出对话框
2.循环的时候,重新让用户输入
3.如果用户输入的是:爱,则退出循环(break)
*/
while (true) {
let abc = prompt("你爱我吗");
// 退出条件 爱
if (abc === "爱") {
break;
}
}
</script>
练习2:
<script>
/*
需求:用户可以选择存钱,取钱,查看余额和退出功能
分析:
1.循环的时候,需要反复提示输入框,使用提示框写道循环里面
2.退出的条件是用户输入了4,如果是4,则结束循环,不在弹窗
3.提前准备一个金额先存储一个数额
4.取钱则是减法操作,存钱则是加法操作,查看余额则是直接限时金额
5.输入不同的值,可以使用switch来执行不同操作
*/
// 步骤
// 3.提前准备一个金额先存储一个数额
let money = 0;
// 1.循环的时候,需要反复提示输入框,使用提示框写道循环里面
while (true) {
let num = +prompt(`
操作提示:
1.存钱
2.取钱
3.查看余额
4.退出
`);
// 2.退出的条件是用户输入了4,如果是4,则结束循环,不在弹窗
if (num === 4) {
break; //退出循环
}
// 4.取钱则是减法操作,存钱则是加法操作,查看余额则是直接限时金额
switch (num) {
case 1:
//存钱
let cun = +prompt("请输入你要存入的金额");
money += cun;
break;
case 2:
//取钱
if (money <= 0) {
alert("余额不足");
} else {
let qu = +prompt("请输入你要取走的金额");
money -= qu;
}
break;
case 3:
//查看
alert(`你的余额为${money}`);
break;
}
}
</script>
练习3:
<script>
// switch (1) {
// case 1: //1:值
// console.log("你选择的是1"); //代码
// break; //退出循环
// case 2:
// console.log("你选择的是2");
// break;
// case 3:
// console.log("你选择的是3");
// break;
// default:
// console.log("你选择的是n");
// break;
// }
/*
练习1:需求:用户输入2个数字,然后输入+ - * / 任何一个,可以计算结果
思路定义三个变量,num1, num2, ps 把ps变量给switch的值 让他形成判断 定义case 的+ - * /
*/
// 1.用户输入数字
let num1 = +prompt("请输入第一个数");
let num2 = +prompt("请输入第二个数");
let ps = prompt("请输入+ - * / 中任何一个数");
// 2.用户输入不同算术运算符,可以区执行不同的运算(switch)判断输出
switch (ps) {
case "+":
alert(`你的计算结果是${num1 + num2}`);
break;
case "-":
alert(`你的计算结果是${num1 - num2}`);
break;
case "*":
alert(`你的计算结果是${num1 * num2}`);
break;
case "/":
alert(`你的计算结果是${num1 / num2}`);
break;
default:
alert(`没有你想要的结果`);
}
//所以这里我们的实现就结束了!
</script>
练习4
<script>
// switch简单计算
// 1。用户输入参数
let num1 = +prompt("请输入第一个参数");
let ps = prompt("请输入+ - * / ");
let num2 = +prompt("请输入第二个参数");
// 2.计算输出结果
// 定义switch的值
switch (ps) {
// 解释为啥是ps 这里定义的是一个判断值然后对应的是case 里的字符串
case "+":
alert(`你输入的数是${num1 + num2}`);
break;
case "-":
alert(`你输入的数是${num2 - num2}`);
break;
case "*":
alert(`你输入的数是${num1 * num2}`);
break;
case "/":
alert(`你输入的数是${num1 / num2}`);
break;
default:
alert(`你干嘛? 我是要你输入+ - * /`);
}
</script>
正则表达式
^ 表示匹配输入字符串的开始位置
(?!^\\d+$) 表示不允许全是数字
(?!^[a-z]+$) 表示不允许全是小写字母
(?!^[A-Z]+$) 表示不允许全是大写字母
(?!^[^a-z0-9]+$) 表示不允许全是除小写字母和数字之外的字符
(?!^[^A-Z0-9]+$) 表示不允许全是除大写字母和数字之外的字符
(?!^.*[\\u4E00-\\u9FA5].*$) 表示不允许包含中文字符
^\\S*$ 表示匹配任何不包含空格的字符
基础第三天
if多分支语句和switch的区别:
共同点
都能实现多分支选择,多选1
大部分情况下可以呼唤
2.区别:
switch case语句通常处理case为比较确定值的情况,二if else语句更灵活,通常用于范围判断(大于,等于某个范围)
switch语句进行判断后直接执行到程序的语句,效率更高,而if else 语句由几种判断方式,就得判断多少次
switch一定要注意 必须是(===)全等,一定要注意 数据类型,同时注意break会有穿透效果
结论
当分支比较少的时候,用if else多分支语句执行效率高
当分支比较多,switch语句执行效率高,而且结构清晰