1-数据类型转换
字符串类型转number
1.1 转整数: parseInt(数据)
console.log(parseInt('123'));
1.2 转小数: parseFloat(数据)
console.log(parseFloat('123.244'));
2.非字符串类型转number
console.log(Number(true));
console.log(Number(false));
console.log(Number(null));
console.log(Number(undefined));
3. Number() : 其他数据类型转数字
1.NaN : number类型中一个特殊值
not a number : 不是数字，如果你的运算得不到一个数字，此时就会得到NaN
场景： NaN表示错误的运算。 产生的原因一般是代码出bug
2-转换为string类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
let num = 200
//1. String(数据)
console.log( String(num) )//'200'
console.log( String(true) )//'true'
console.log( String(undefined) )//'undefined'
console.log( String(null) )//'null'
//2. 变量名.toString()
/* a. 如果是undefined与null，这种方式会报错
b. 这种方式可以支持进制转换。 例如把 十进制转十六进制
*/
console.log( num.toString() )//'200'
console.log( num.toString(16) )//'c8'
</script>
</body>
</html>
3-转换为boolean类型
1.false： 有7种数据会得到false
0 -0 NaN '' undefined null false
2.true: 除false 7种之外的一切数据
console.log( Boolean(0) )//false
console.log( Boolean(-0) )//false
console.log( Boolean(NaN) )//false
console.log( Boolean('') )//false
console.log( Boolean(undefined) )//false
console.log( Boolean(null) )//false
console.log( Boolean(false) )//false
4 -隐式转换
隐式转换 ： 当运算符两边的 ‘数据类型不一致’ 的时候，编译器会转成一致后运算
(1)转换数字 ： 算术运算符 + - * / %
(2)转换字符串 ： 连接符+ (+号两边只要有一边是字符串，此时+就是连接符)
(3)转换布尔: 逻辑非 !
console.log('10' - 1);
console.log(1 + true);
console.log(+'10');
// 转换字符串
console.log('1' + true);
console.log(!1);
console.log(!null);
5-undefined与null区别
1. undefined : 未定义。 当变量只声明,但是没有赋值。此时默认值是undefined
* 说人话 : undefined相当于期房。 买了房,但是房子还没建出来。(未定义)
2. null : 有定义。 定义的值是空值。
* 说人话 ： null相当于毛坯房。买了房,但是房子没住人,里面是空的。(空值)
//相同点 : (1)值相等 (2)转布尔类型都是false
console.log( undefined == null )//true
console.log( Boolean(undefined) )//false
console.log( Boolean(null) )//false
//不同点 : (1)数据类型不同 (2)转number类型值不同
console.log( undefined === null )//false
console.log( Number(undefined) )//NaN
console.log( Number(null) )//0
02-流程控制-分支语句
分支结构作用：代码根据条件执行
-
为什么要有分支结构？
-
现实世界中，我们在做某些事情的时候是有前提条件的，例如：我明天去买一辆法拉利，前提是我今晚要中五百万
- 也就是说：如果我今晚中了五百万，明天就去买法拉利，没中的话就不买
1.0-语句与表达式
简单概括: 有运算符参与的就是表达式,没有运算符参与的就是语句
1.表达式 : 由运算符组成的式子, 一定会有运算结果 (运算)
2.语句 : 让js编译器执行某个命令,做什么事情 (执行)
分支语句 循环语句
1.1-if单分支结构
- 1.if结构语法：
if(条件 true/false){ 条件成立时需要执行的代码 }
-
-
2.if结构补充说明：
- 1.大括号中可以是任何代码，不限数量
- 2.如果大括号中代码有且只有一行，则可以省略大括号。这种写法代码不规范，不是老司机的作风
-
3.注意点:小括号中的条件可以是哪些呢
- (1)关系表达式：结果一定是布尔类型
- (2)布尔类型的值：true和false
- (3)其他表达式和值：都会先转换成布尔类型再判断真和假
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
//1.顺序结构(默认) ： 代码从上往下依次执行
// console.log('1-我今天上学了')
// console.log('2-我今天考试了')
// console.log('3-我回家了')
// console.log('4-爸爸打我了')
// console.log('5-我回房间睡觉了')
//2.分支结构 ： 代码根据条件来执行
/*
语法
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('满足条件，成立')
}
</script>
</body>
</html>
==1.2-if-else双分支结构==
if（条件）{ 条件成立时需要执行的代码
}else{ 条件不成立时需要执行的代码 }
-
1.if-esle结构语法:用于两种互斥的条件判断
- 例如：如果(if)我的钱超过100块就洗脚(也就是说钱>=100)，否则(else)不洗脚（也就是说钱<100）
-
2.if-else结构注意点
- if大括号中的代码与else大括号的代码只会执行一个，不会同时执行
-
if-else语句的作用主要就是为了提高代码的运行效率,虽然可以用两个if语句来代替if-else语句，但是两个if语句需要判断两次，而if-else只需要判断一次
if-else双分支 语法： if(条件true/false){ 条件成立时需要执行的代码 }else{ 条件不成立时需要执行的代码 }
注意点：双分支语句是两个互斥条件(两个条件一定会满足一个，不会同时满足，也不会同时不满足) if大括号代码 和 else大括号代码 一定会执行一个,不会同时执行，也不会同时不执行
let score = 89
console.log('1-我今天上学了')
console.log('2-我今天考试了')
console.log('3-我回家了')
if(score < 60 ){
console.log('4-爸爸打我了')
}else{
console.log('4-爸爸给我买奥迪')
}
console.log('5-我回房间睡觉了')
/* 互斥条件：两个条件一定会满足一个，不会同时满足，也不会同时不满足 */
if(1){
console.log('世界上最遥远的距离不是生与死距离，而是我在if里，你在else里。看起来隔得那么近，却永远也无法一起执行');
}else{
console.log('我爱你');
}
1.3-if-else if-else多分支结构
1.if-else if-else结构语法：
if(条件1){
条件1成立时需要执行的代码
}else if(条件2){
条件2成立时需要执行的代码
}else if(条件3){
条件3成立时需要执行的代码
}else{
以上所有条件都不成立时需要执行的代码
}
2.注意点：
- (1) if-else if -else结构中必须以if开头，中间的else if可以是多个，末尾的esle可以省略（一般都不会省略）
- (2)if-else if-else语句中所有的大括号中的代码只会执行其中一个，不会执行多个
1.4-三元表达式
-
1.运算符根据参与运算的值数量分为一元、二元、三元运算符
- 一元运算符：只能操作一个值 ++ -- ！
- 二元运算符：操作两个值 1 + 1 1 > 0
- 三元运算符：操作三个值
-
2.三元运算符语法
-
三元运算符：
?: -
三元表达式：
表达式?代码1：代码2- 1.如果表达式成立则执行代码1，否则执行代码2
-
-
2.如果代码1或者代码2有运算结果则三元运算式的结果就是他们其中的一个
- 三元运算符做的事和if-else类似，只是代码更简洁
1.5-switch-case分支结构
-
1.语法
switch(表达式){
case 值1:
表达式的结果 === 值1，需要执行的代码
break;
case 值2:
表达式的结果 === 值2，需要执行的代码
break;
case 值3：
表达式的结果 === 值3，需要执行的代码
break;
.......
default:
表达式的结果和上面所有的case后面的值都不全等，则会执行这里的代码
break;
}
2.注意事项
-
1.表达式的结果要和值一定是全等的关系===
-
2.break作用：结束该switch语句，所以一般情况下要加上，如果不加上则会发生穿透
- 穿透：从上一个case代码快执行到下一个case代码快
- break关键字的作用就是防止穿透
-
3.default语句可以写在任何地方，也可以省略，但是一般写在最后，这是一种代码规范
03-流程控制-循环语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
//打印3次班长爱坤哥
//复制粘贴弊端：(1)代码冗余 (2)维护不便
// console.log( '班长爱坤哥' )
// console.log( '班长爱坤哥' )
// console.log( '班长爱坤哥' )
/*循环结构：代码重复执行
while循环语法
while( 条件 true/false ){
循环体：需要重复执行的代码
}
执行规则
1.判断条件是否成立
1.1 true : 则执行循环体代码
1.2 false : 循环结束，执行大括号后面的代码
2.重复步骤1
*/
//1.声明变量记录循环次数(循环变量)
let num = 1
//2.循环条件
while (num <= 10) {
console.log("班长爱坤哥")
//3.循环变量自增
num++
}
console.log("班长完事了")
</script>
</body>
</html>
1.2-for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
for循环： 1.声明循环变量 2.循环条件 3.循环变量自增 写在一个小括号中，代码更加简洁易读
语法：
for(语句1;语句2;语句3){
循环体：需要重复执行的代码
}
执行规则
1. 执行语句1(声明循环变量)
2. 判断语句2结果是否成立(循环条件)
2.1 true : 执行循环体
* 2.1.1 执行语句3(循环变量自增)
2.2 false: 循环结束，执行大括号后面的代码
3. 重复步骤2
*/
for(let i = 1; i <= 3;i++){
console.log('班长爱坤哥')
}
console.log('班长完事了')
</script>
</body>
</html>
1.3-break与continue关键字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
/*
continue : 结束本次循环体，立即进入下一次循环判断
* continue关键字只能用于循环语句
break: 结束整个循环语句，立即执行大括号后面的代码
* break关键字可以用于 循环语句 + switch-case
*/
//模拟吃10个饺子
for (let i = 1; i <= 10; i++) {
//continue : 吃到第五个饺子，发现虫子。 第五个饺子不吃，但是没吃饱后面饺子继续吃
// if( i === 5 ){
// continue
// }
//break : 吃到第五个饺子，吃饱了。 后面的饺子不吃了。
if (i === 5) {
break
}
document.write(`<p>我正在吃第${i}个饺子</p>`)
}
</script>
</body>
</html>
1.4-随堂练习：while循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/* 本案例主要让学生了解while循环适用场景 及 对应 用法
(1)while循环适用于 循环次数不明确
(2)写while循环要学会分析： 循环条件、循环体
(3)while循环 一般会使用 break 关键字来跳出循环
*/
//需求： (1)弹出一个确认框询问：'我爱你,嫁给我好吗'
// (2)如果用户选择是,则跳出循环并弹窗:'我们结婚吧' , 否则继续询问
let res = confirm('我爱你,嫁给我好吗')
while( !res ){
res = confirm('我爱你,嫁给我好吗')
}
alert('我们结婚吧')
</script>
</body>
</html>
