1...数据类型转换
1.字符串类型转number
1.1 转整数: parseInt(数据)
console.log(parseInt(314.2)) //314
1.2 转小数: parseFloat(数据)
console.log(parseFloat(1.05)) //1.05
非字符串类型转number
console.log(Number(true)) //1
需求 ： 输入两个数字，计算两个数字的和
prompt输入框 得到的是string类型
let num1 = +prompt('请输入第一个数字');
let num2 = +prompt('请输入第二个数字');
console.log(num1,num2);
console.log(typeof num1,typeof num2);
let res = parseInt(num1) + parseInt(num2);
console.log(res);
2. 非字符串类型转number
布尔类型转数字会得到 0 false和 1 true
console.log(Number(true)) //1
console.log(Number(false)) //0
console.log(Number(undefined)) //NaN
console.log(Number(null)) //0
3. -number类型特殊值NaN
not a number : 不是数字，如果你的运算得不到一个数字，此时就会得到NaN
场景： NaN表示错误的运算。 产生的原因一般是代码出bug
console.log('张三' - 100) //NaN
NaN特点： 不能参与任何运算。 结果一律是NaN
NaN应用场景 当代码出现bug , 就表示你代码出bug
console.log(NaN * 0); //NaN
4. 转换string类型
支持进制转换。 例如把 十进制转十六进制
let num = 255
console.log(num.toString(16)); //ff
5.转换boolean类型
将number类型转换为boolean 除了0与NaN以外会被转换为false其它都为true
如果空字符串里面有空格则表示true
console.log(Boolean(' ')); //true
如果空字符串里面没有空格则表示false
console.log(Boolean('')); //false
console.log(Boolean(0)); //false
console.log(Boolean(-0)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean(null)); //false
console.log(Boolean(false)); //false
6. 隐式转换
当运算符两边的 ‘数据类型不一致’ 的时候，编译器会转成一致后运算
转换数字 ： 算术运算符 + - * / % console.log('10' - 1); //9 Number('10') -1 =10-1=9
console.log(1 + true); //2 Number(true) =1+1
console.log( +'10' )//10 +数学正号 Number(10)
转换字符串 ： 连接符+ (+号两边只要有一边是字符串，此时+就是连接符) console.log(1 + '1') //String(1)+'1'='1'+'1'='11'
转换布尔: 逻辑非 !
console.log(!1) //!Boolean(1)=!true=false
console.log(!null) //!Boolean(null)=!false = true
7. undefined与null区别
1. undefined : 未定义。 当变量只声明,但是没有赋值。此时默认值是undefined
2. null : 有定义。 定义的值是空值。
1.相同点 (1)值相同 (2)转布尔类型都是false
console.log(undefined == null); //true
console.log(Boolean(undefined)); //false
console.log(Boolean(null)); //false
2.不同点 (1)数据类型不同 (2)转number类型值不同
console.log(undefined === null); //false
console.log(Number(undefined)); //NaN
console.log(Number(null)); //0
02-流程控制-分支语句
1.0-语句与表达式
有运算符参与的就是表达式,没有运算符参与的就是语句
1.表达式 : 由运算符组成的式子, 一定会有运算结果 (运算)
1+1
10 > 9
2.语句 : 让js编译器执行某个命令,做什么事情 (执行)
分支语句 循环语句
分支结构 ： 代码根据条件来执行
语法
if(条件 true/false){
满足条件需要执行的代码
}
分支结构注意点： 小括号里面的条件可以写哪些代码呢？
(1)比较表达式 ： 比较表达式结果一定是布尔类型
(2)直接写布尔类型的值
(3)写其他的值 ： 编译器会自动转成布尔类型来判断是否成立
代码示例:
let score = 59
console.log('1-我今天上学了')
console.log('2-我今天考试了')
console.log('3-我回家了')
if( score < 60 ){
console.log('4-爸爸打我了')
}
console.log('5-我回房间睡觉了')
if( 1 ){//Boolean(1) = true
console.log('满足条件，成立')
}
if-else双分支
语法：
if(条件true/false){
条件成立时需要执行的代码
}else{
条件不成立时需要执行的代码
}
代码示例:
let score = 59
console.log("1-我今天来黑马上学啦")
console.log("2-我今天考试了")
console.log("3-我回家了")
if (score < 60) {
console.log("4-爸爸打我")
} else {
console.log("4-爸爸给我买奥迪")
}
console.log("5-我回房间睡觉了")
if( true ){//只会执行true
console.log('世界上最遥远的距离不是生与死的距离，而是你在if里，我在else里。
看起来隔得那么近，却永远也无法一起执行')
}else{
console.log('我爱你')
}
//需求： 弹出一个确认框，问用户要不要去吃饭.
// 确认: 去吃饭 取消 : 继续学习
let con = confirm('要不要去吃饭？')
// console.log(con)
/* 细节： 如果一个变量的值是布尔类型, 可以直接作为条件 */
if( con ){
alert('去吃饭')
}else{
alert('继续学习')
}
if - else if - else 多分支
语法：
if(条件1){
条件1成立时需要执行的代码
}else if(条件2){
条件2成立时需要执行的代码
}else if(条件3){
条件2成立时需要执行的代码
}
.....
else{
如果前面所有条件都不满足，则执行else代码
}
注意点:
1. if-else if-else所有的大括号，最多只会执行一个。
只有当上面的条件不满足，才会进入下面条件判断
2. 多分支语句,必须以if开头. 中间else if可以多个 . 结尾else可以省略
代码示例:
需求：让用户输入分数
(1)如果 >=700分,则弹窗提示 上黑马程序员
(2)如果 >=600分,则弹窗提示 上传智专修学院
(3)如果 >=400分,则弹窗提示 上大学
(4)如果 <400分, 则弹窗提示 进大厂
let score = prompt('请输入你的分数')
if (score >= 700) {
alert('上黑马程序员')
} else if (score >= 600) {
alert('上传智专修学院')
} else if (score >= 400) {
alert('上大学')
} else {
alert('进大厂')
}
代码示例:
（1）弹出输入框，让用户输入年
（2）如果年龄在18岁以上，就打印“这个网站可以给你看
（3）如果年龄在14-18岁中间， 就用 选择框 询问是否真的要继续查看 （let a = confirm() -> 返回 bool）
- 如果用户按的是确认，就提示‘给你看了，后果自负’
- 如果用户按的是取消，就提示‘好孩子，不看也好
（4）如果年龄在14岁以下，就提示‘sorry，请回家找妈妈’。
let age = prompt('请输入你的年龄')
if (age >= 18) {
alert('这人网站可以给你看')
} else if (age >= 14) {
let con = confirm('是否真的要继续查看')
if (con) {
alert('给你看了，后果自负')
} else {
alert('好孩子，不看也好')
}
} else {
alert('sorry，请回家找妈妈')
}
三元表达式
1. 表达式根据运算数多少分为 一元、二元、三元
一元运算符 : 只能算一个数 ++ -- !
二元运算符 : 可以算两个数 算术 关系
三元运算符 ： 可以算三个数 ?:
2.三元表达式： 由三元运算符组成的式子
表达式 ? 代码1 : 代码2
3.执行规则
如果表达式结果为true,则执行代码1. 否则执行代码2
4. 三元表达式功能和if-else类似的，但是有一点点区别
(1)三元表达式语法更加简洁. (如果满足条件只需要执行一行代码就可以用三元表达式)
(2)三元表达式有运算结果
代码示例:
需求：(1)让用户输入两个数字 (2)比较两个数字大小,并在页面显示最大的那个数字
let num = prompt('请输入一个数字')
let num1 = prompt('请输入一个数字')
num > num1 ? document.write(num) : document.write(num1)
第二种方法:
let num1 = +prompt('请输入第一个数')
let num2 = +prompt('请输入第二个数')
let res = num1 >= num2 ? num1 : num2
document.write(`最大的数字是:${res}`)
代码示例: 需求：让用户输入一个数字, 如果数字大于10则直接页面打印这个数字，否则在数字页面补上0之后在页面打印结果。 例如:输入10就打印10, 如果5就打印05
第一种方法:
let num = prompt('请输入一个数字')
num <= 10 ? document.write('0' + num) : document.write(num)
第二种方法:
if (num < 10) {
document.write('0' + num)
} else {
document.write(num)
}
第三种方法:先求出结果，然后打印
num = num >= 10 ? num : '0' + num
document.write(num)
switch-case分支结构
语法：
switch(匹配值){
case 值1 :
值1 === 匹配值,需要执行的代码
break
case 值2 :
值2 === 匹配值,需要执行的代码
break
......
default :
匹配值与上面所有case的值不匹配(全等)，需要执行的代码
break
}
注意点
(1)匹配值和case值 一定要是 ‘全等’关系
(2)不能省略break关键字,break关键字作用是结束switch语句
如果省略则会发生穿透现象：switch穿透, 代码从上一个case无条件执行到下一个case
switch-case穿透
<script>
/* 合理使用穿透现象 : switch-case在某些情况下，可以通过省略break来简化代码
什么时候可以合理使用穿透 : 多个case值需要执行相同的代码
*/
//需求：让用户输入月份,告诉用户这是什么季节
/*
春天 : 3 4 5
夏天 : 6 7 8
秋天 : 9 10 11
冬天 : 12 1 2
*/
//代码冗余 ： 出现重复的代码太多
let month = +prompt("请输入月份")
switch (month) {
case 3:
case 4:
case 5:
alert("春天")
break
case 6:
case 7:
case 8:
alert("夏天")
break
case 9:
case 10:
case 11:
alert("秋天")
break
case 12:
case 1:
case 2:
alert("冬天")
break
default :
alert('外星人')
break
}
</script>
代码示例:
请用户输入年份和月份，打印出这个月有多少天（★）
1，3，5,7,8,10,12月有31天
4,6,9,11有30天
2月，如果是平年就是28天，闰年就是29天（闰年判断条件 ： 能被400整除 或者 能被4整除且不能被100整除）
let month = +prompt('请输入月份')
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
alert('31天')
break;
case 1:
case 4:
case 6:
case 9:
case 11:
alert('30天')
break;
case 2:
let year = +prompt('请输入年份')
if (year % 400 == 0 || year % 4 == 00 && year % 100 != 0) {
alert('闰年就是29天')
} else {
alert('平年就是28天')
}
}
断点流程
F12进入source
找到代码文件,在左边点击:打断点
重点1:打完断点需要刷新页面才能生效
重点2:断点打完之后,按播放键,快速结束断点,重新打,继续刷新
while循环语法
while( 条件 true/false ){
循环体：需要重复执行的代码
}
while循环适用场景 及 对应 用法
(1)while循环适用于 循环次数不明确
(2)写while循环要学会分析： 循环条件、循环体
(3)while循环 一般会使用 break 关键字来跳出循环
while循环三要素
1. 变量起始值 2. 终止条件 3. 变量变化量
执行规则
1.判断条件是否成立
1.1 true :执行循环体,重复步骤1
1.2 false:循环结束
while出现死循环的三种情况
while(1){} while(true){} while("itcast"){}
代码示例:
let i = 1
while( i <= 3 ){//2.循环条件
console.log('班长爱坤哥')
i++ //3.循环变量自增
}
console.log('班长完事了')
代码示例
需求： (1)弹出一个确认框询问：'我爱你,嫁给我好吗'
(2)如果用户选择是,则跳出循环并弹窗:'我们结婚吧' , 否则继续询问
/*
循环次数 ： 没有 while
循环条件 : 用户选择否
循环体 ： 确认框询问：'我爱你,嫁给我好吗'
*/
let con = confirm('我爱你,嫁给我好吗')
while (!con) { //!con 逻辑非表达式要想条件成立,con为false
con = confirm('我爱你,嫁给我好吗')
}
alert('我们结婚吧')
代码示例
需求:(1)让用户输入 用户名 和 密码
(2)如果 用户为admin 并且 密码为123456,则跳出循环弹窗提示登录成功,否则让用户继续登录
/*
循环次数 : 无 while
循环体 ： 让用户继续输入用户名和密码
循环条件： 账号密码只要有一个是错的
username != 'admin' || password != '123456'
*/
第一种方法
let username = prompt('请输入用户名')
let password = prompt('请输入密码')
while( username != 'admin' || password != '123456' ){
username = prompt('请输入用户名')
password = prompt('请输入密码')
}
alert('登录成功')
第二种方法
while (true) {
let username = prompt('请输入用户名')
let password = prompt('请输入密码')
if (username === 'admin' && password === '123456') {
break
}
}
alert('登录成功')
第三种方法
let username = ''
let password = ''
while (username != 'admin' || password != '123456') {
username = prompt('请输入用户名')
password = prompt('请输入密码')
}
alert('登录成功')
for循环：
1.声明循环变量 2.循环条件 3.循环变量自增 写在一个小括号中，代码更加简洁易读
语法：
for(声明循环变量;循环条件;循环变量自增){
}
for (let i = 1; i <= 3; i++) {
console.log('前端');
}
执行规则
1.执行 声明循环变量
2.判断循环条件
2.1 true :执行循环体,执行循环变量自增.重复步骤2
2.2 false:循环结束
代码示例
打印 100-200之间,可以被6整除的数字
for (let i = 100; i <= 200; i++) {
if (i % 6 == 0) {
console.log(i);
}
}
需求： 打印 1-100 所有 偶数
for (let i = 1; i <= 100; i++) {
if (i % 2 == 0) {
console.log(i);
}
}
continue 和 break
continue : 结束本次循环体,立即进入下一次循环判断(只是某一次循环体不执行)
break:结束整个循环语句,立即执行循环外面的代码 (结束整个循环语句)
continue只能用于循环语句,break可以用于循环语句+switch-case
for (let i = 1; i <= 10; i++) {
continue:结束本次循环体
吃到第五个包子的时候,发现里面有虫子.第五个包子我不吃,但是我没吃饱,
后面的包子还是要吃的
if(i==5){
continue
}
console.log(`我正在吃第${i}个包子`);
}
for (let i = 1; i <= 10; i++) {
//break:结束整个循环语句
//吃到第五个包子的时候,我吃饱了,后面所有的包子都不想吃了
if (i == 5) {
break
}
console.log(我正在吃第${i}个包子);
}
关键字汇总
undefined : 未定义。 当变量只声明,但是没有赋值。
null : 有定义。 定义的值是空值。
if单分支结构
if else多分支结构
while循环语法
continue : 结束本次循环体,立即进入下一次循环判断
break:结束整个循环语句,立即执行循环外面的代码
