一、数据类型转换
1.转换为number类型
//需求 ： 输入两个数字，计算两个数字的和
// prompt输入框 得到的是string类型
// var num1 = +prompt('请输入第一个数字');
// var num2 = +prompt('请输入第二个数字');
// console.log(num1,num2);
1.其他数据类型 转 Number
语义明确（提高代码阅读性）
parseInt() : 转换整数
parseFloat() :转换小数
Number() : 其他数据类型转数字 （boolean，undefined，null）
2.注意点： 数据类型转换并没有改变原有变量的值，而是产生一个新的值
var str = '10';
var num = parseInt(str);
console.log(num);// 10
console.log(str);// '10' 类型转换不改变原有变量的值，而是产生一个新的值
//1. parseInt() : 转换整数
// 从左往右依次解析字符，遇到非数字字符停止解析，并且返回解析好的整数
console.log(parseInt('123.1.1a'));//123
//2.parseFloat() : 转换小数
//解析规则与parseInt一致，唯一的区别就是可以识别第一个小数点
var str = '5';
var num = parseFloat(str);
console.log(num);
console.log(parseFloat('123.1.1a'));//123.1
//3. Number() : 其他数据类型转数字
/*
a. 可以解析整数和小数
b. 只要有任意非数字字符得到NaN
*/
console.log(Number('6'));
console.log(Number('6.6'));
console.log(Number('123.1.a'));
//布尔类型转数字会得到0false和1 true
console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(undefined));//NaN
console.log(Number(null));//0
2.number类型特殊值NaN
<script>
//1.NaN是number类型中一个特殊值
// not a number:不是一个数字，表示错误的运算结果
console.log(Number('张三-100'))//NaN
console.log( Number('哈哈哈') )//NaN
//2.NaN不能参与任何计算，结果一律为NaN
//NaN实际场景： 开发中，我们一般不会接触到NaN，除非你的代码出bug了，数学计算出错let num
console.log( num + 1 )//我们忘记给num赋值，导致undefined 与 1 相加得到NaN
</script>
3.判断非数字
// isNaN() 这个方法用来判断非数字 并且返回一个值 如果是数字 返回的是false，如果不是数字 返回的是true
console.log(isNaN(10)); // false
console.log(isNaN('呵呵')); // true
4.转换为string类型
<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'
//3. 加号拼接字符串 和字符串拼接的结果都是字符串
console.log(num + '') //'200'
</script>
5.转换为boolean类型
// 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
6.隐式转换
/*
隐式转换 ： 当运算符两边的 ‘数据类型不一致’ 的时候，编译器会转成一致后运算
(1)转换数字 ： 算术运算符 + - * / %
(2)转换字符串 ： 连接符+ (+号两边只要有一边是字符串，此时+就是连接符)
(3)转换布尔: 逻辑非 !
*/
//1.转换数字 : 算术运算符
console.log( '100' - 10 )//90 Number('100') - 10
console.log( 1 + true )//2 1 + Number(true)
console.log( +'10' )//10 +数学正号 Number(10)
//2.转换字符串 : 连接符
console.log( '1' + true )//'1true' '1' + String('true')
//3.转换布尔 : !
console.log( !1 )//false !Boolean(1)
console.log( !undefined )//true !Boolean(undefined)
7.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
二、流程控制-分支语句
1.0-语句与表达式
简单概括: 有运算符参与的就是表达式,没有运算符参与的就是语句
//1.表达式 : 由运算符组成的式子, 一定会有运算结果 (运算)
1+1
10 > 9
//2.语句 : 让js编译器执行某个命令,做什么事情 (执行)
//分支语句 循环语句
1.2-if单分支结构
-
1.if结构语法：
if(条件 true/false){ 条件成立时需要执行的代码 } -
2.if结构补充说明：
- 1.大括号中可以是任何代码，不限数量
- 2.如果大括号中代码有且只有一行，则可以省略大括号。这种写法代码不规范，不是老司机的作风
-
3.注意点:小括号中的条件可以是哪些呢
- (1)关系表达式：结果一定是布尔类型
- (2)布尔类型的值：true和false
- (3)其他表达式和值：都会先转换成布尔类型再判断真和假
1.3-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大括号代码 一定会执行一个,不会同时执行，也不会同时不执行
*/
1.4 if-else if-else多分支结构
/*
if分支语句
单个条件: if单分支
两个条件: if-else双分支
多个条件： if - else if - else 多分支
语法
if(条件1){
条件1成立时需要执行的代码
}else if(条件2){
条件2成立时需要执行的代码
}else if(条件3){
条件2成立时需要执行的代码
}
.....
else{
如果前面所有条件都不满足，则执行else代码
}
注意点
(1)多分支所有的大括号代码最多只会执行一个，只有当前面的条件不满足，才会进入后面的条件判断
(2)多分支一定要以if开头，后面else if可以多个，结尾else可以省略
*/
1.5 判断平年与闰年
<script>
//需求： 用户输入年份，如果是平年则页面显示：平年，否则页面显示：闰年
//(1)用户输入年份
let year = +prompt('请输入年份')
//(2)闰年： 能被400整除 或 能被4整除且不能被100整除
if( (year % 400 === 0) || (year % 4 === 0 && year % 100 !== 0) ){
document.write( '闰年' )
}else{
document.write( '平年' )
}
</script>
1.6-三元表达式
/*
1.运算符根据运算数的多少，分为一元、二元、三元运算符
一元运算符：只能运算一个数
++ -- !
二元运算符：能运算两个数
算术、比较
三元运算符： 能运算三个数
?:
2.三元表达式: 表达式 ? 代码1 : 代码2
执行规则: 如果表达式为true,则执行代码1，否则执行代码2
3.三元表达式功能和if-else语句类似
3.1 如果你的代码只有1行，则可以用三元
3.2 三元表达式有运算结果
*/
//如果代码1 和 代码2 不能产生结果，则三元表达式的结果是undefined
let res = 1>0 ? alert('哈哈') : alert('呵呵')
console.log( res )
//如果代码1 和 代码2 有结果，则三元表达式的结果就是他们的结果
let res1 = true ? 10 : 20
console.log( res1 )
1.7 求两个数字最大值
//需求：(1)让用户输入两个数字 (2)比较两个数字大小,并在页面显示最大的那个数字
//1.用户输入两个数
let num1 = +prompt('请输入第一个数')
let num2 = +prompt('请输入第二个数')
//2.比较大小
let res = num1 >= num2 ? num1 : num2
document.write(`最大的数字是:${res}`)
1.8 数字补0
//需求：让用户输入一个数字, 如果数字大于10则直接页面打印这个数字，否则在数字页面补上0之后在页面打印结果。 例如:输入10就打印10, 如果5就打印05
//1.用户输入1个数
let num = +prompt('请输入一个数字')
let res = num >= 10 ? num : '0' + num
document.write(res)
1.9 switch-case分支结构
/*
switch-case分支结构
语法：
switch(匹配值){
case 值1 :
值1 === 匹配值,需要执行的代码
break
case 值2 :
值2 === 匹配值,需要执行的代码
break
......
default :
匹配值与上面所有case的值不匹配(全等)，需要执行的代码
break
}
注意点
(1)匹配值和case值 一定要是 ‘全等’关系
(2)不能省略break关键字,break关键字作用是结束switch语句
如果省略则会发生传统现象： 代码从上一个case无条件执行到下一个case
*/
// 使用switch输出星期一到星期日
let day = +prompt('请输入一个数'); // 1 2 3 ... 1
switch(day){
case 1:
document.write('星期一');
break;
case 2:
document.write('星期二');
break;
case 3:
document.write('星期三');
break;
case 4:
document.write('星期四');
break;
case 5:
document.write('星期五');
break;
case 6:
document.write('星期六');
break;
case 7:
document.write('星期日');
break;
default:
document.write('数据不合法');
}
/*
注意：
switch后的变量与case后的值的比较于 ===
*/
1.10 switch-case穿透用法
/**合理穿透：当存在多种值需要执行相同代码时使用穿透可以节省代码
* 用户输入某一个月份，告诉用户这个月份属于什么季节
* 12，1，2 冬季
* 3，4，5 春季
* 6，7，8 夏季
* 9，10，11 秋季
*/
let month = +prompt("请输入月份");
switch (month){
case 12:
case 1:
case 2:
alert("冬季");
break;
case 3:
case 4:
case 5:
alert("春季");
break;
case 6:
case 7:
case 8:
alert("夏季");
break;
case 9:
case 10:
case 11:
alert("秋季");
break;
default:
alert("你来自火星吧？");
break;
}
1.11 代码断点调试使用
1.12 if与switch区别
- if条件常用于表示一个 范围
- switch条件一个变量和多个具体值的匹配
- 如果以后遇到一个变量和多个具体值的匹配强烈推荐使用switch，因这种情况使用switch效率高于if
三、流程控制-循环语句
1.1-while循环
/*循环结构：代码重复执行
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++
}
1.2-for循环
/*
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('班长完事了')
(1)while循环适用于 循环次数不明确
(2)写while循环要学会分析： 循环条件、循环体
(3)while循环 一般会使用 break 关键字来跳出循环
*/
//需求： (1)弹出一个确认框询问：'我爱你,嫁给我好吗'
// (2)如果用户选择是,则跳出循环并弹窗:'我们结婚吧' , 否则继续询问
let res = confirm('我爱你,嫁给我好吗')
while( !res ){
res = confirm('我爱你,嫁给我好吗')
}
alert('我们结婚吧')
1.3-break与continue关键字
/*
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>`)
}
