大家好, 我是'菜鸟' 今天继续给大家带来js基础的知识~
1.1-数据类型转换介绍
<script>
/*
* 数据类型不一致,得不到预期计算结果
*/
//需求：让用户输入两个数字，然后相加，打印结果
let num1 = prompt('请输入第一个数字')
let num2 = prompt('请输入第二个数字')
let res = num1 + num2//'10' + '20'
console.log( res )//'1020'
</script>1.2-转换为number类型
<script>
//需求 ： 输入两个数字，计算两个数字的和
// prompt输入框 得到的是string类型
// var num1 = +prompt('请输入第一个数字');
// var num2 = +prompt('请输入第二个数字');
// console.log(num1,num2);
// console.log(typeof num1,typeof num2);
// var res = parseInt(num1) + parseInt(num2);
// console.log(res);
//
/* 1.其他数据类型 转 Number
语义明确（提高代码阅读性）
parseInt() : 转换整数
parseFloat() :转换小数
Number() : 其他数据类型转数字 （boolean，undefined，null）
2.注意点： 数据类型转换并没有改变原有变量的值，而是产生一个新的值
*/
//1. parseInt() : 转换整数
// 从左往右依次解析字符，遇到非数字字符停止解析，并且返回解析好的整数
var str = '10';
var num = parseInt(str);
console.log(num);// 10
console.log(str);// '10' 类型转换不改变原有变量的值，而是产生一个新的值
console.log(typeof num);
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
</script>1.3-转换为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'
</script>1.4-转换为boolean类型
<script>
// 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
</script>1.5-隐式转换
<script>
/*
隐式转换 ： 当运算符两边的 ‘数据类型不一致’ 的时候，编译器会转成一致后运算
(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)
</script>1.6-undefined与null区别
<script>
/*
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
</script>02-流程控制-分支语句
1.1-if单分支结构
-
1.if结构语法：
if(条件 true/false){ 条件成立时需要执行的代码 } -
2.if结构补充说明：
-
1.大括号中可以是任何代码，不限数量
-
2.如果大括号中代码有且只有一行，则可以省略大括号。这种写法代码不规范，不是老司机的作风
-
-
3.注意点:小括号中的条件可以是哪些呢
-
(1)关系表达式：结果一定是布尔类型
-
(2)布尔类型的值：true和false
-
(3)其他表达式和值：都会先转换成布尔类型再判断真和假
-
<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>==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只需要判断一次
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-三元表达式
<script>
/*
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 )//undefined
//如果代码1 和 代码2 有结果，则三元表达式的结果就是他们的结果
let res1 = true ? 10 : 20
console.log( res1 )
</script>1.10-switch-case分支结构
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语句可以写在任何地方，也可以省略，但是一般写在最后，这是一种代码规范
if 多分支和switch的区别
-
共同点
-
都能实现多分支选择， 多选1
-
大部分情况下可以互换
-
区别：
-
switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。
-
switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次
-
switch 一定要注意 必须是 === 全等，一定注意 数据类型，同时注意break否则会有穿透效果
-
结论：
-
当分支比较少时，if…else语句执行效率高。
-
当分支比较多时，switch语句执行效率高，而且结构更清晰。
-
03-流程控制-循环语句
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++
}
console.log("班长完事了")
</script>1.2-for循环
<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>1.3-break与continue关键字
<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>