003day 隐式类型的转换及多分支结构的选择
一、类型转换
说明：任何的语言中都有一条规则。
不同种类的数据不能一起进行数据运算。
如果需要不同类型之间的数据进行混合运算，那么需要将不同类型的数据转换为同类型的数据之后才能进行运算。 所谓的类型转换。
类型转换分为两种：
1、显式类型转换 | 强制类型转换（程序员通过js代码进行类型转换）
2、隐式类型转换（对于程序员是透明的，不需要参与）。
二、Number()显式类型转换
显式类型转换：转换为Number类型。
通过Number（） 函数进行显式转换。
<script>
//String-->Number
console.log (Number("123"));//123
console.log (Number("123a"));//NaN
console.log ( parseInt("123a"));//123
console.log (Number(" 123"));//123
console.log (Number(" \t\r123\n "));//123
console.log (Number("abc"));//NaN
console.log (Number(""));//0
console.log (Number("true"));//NaN
//Boolean-->Number
console.log (Number(true));//1
console.log (Number(false));//0
//Null
console.log (Number(null));//0
//Undefined
console.log (Number(undefined));//NaN
//Array
console.log (Number([1]));//1
console.log (Number([1,2]));//NaN
//Object
console.log (Number({
"0":1}));//NaN
//Function
console.log (Number(function () {
}));//NaN
script>
三、使用Boolean() 转换
使用Boolean() 函数。进行类型转换。
在5 种情况下会转换为false,其他的都是true。
<script>
console.log (Boolean(+0));//false
console.log (Boolean(-0));//false
console.log (Boolean(""));//false
console.log (Boolean(null));//false
console.log (Boolean(undefined));//false
console.log (Boolean(NaN));//false
console.log (Boolean(false));//false
console.log (Boolean(-1));//true
console.log (Boolean(-Infinity));//true
console.log (Boolean("false"));//true
console.log (Boolean({
}));//true
console.log (Boolean([]));//true
console.log (Boolean(function () {
}));//true
script>
四、使用String()进行转换
将任意类型转换为字符串
通过函数String （数据）
<script>
console.log (String(true));//true
console.log (String(0));//0
console.log (String(NaN));//NaN
console.log (String(Infinity));//Infinity
console.log (String(null));//null
console.log (String(undefined));//undefined
///
console.log (String([1,2]));//1,2
console.log (String({
}));//[object Object]
var obj = {
};
console.log (obj.toString());//[object Object]
/
console.log (String({
name:"小刚"}));//[object Object]
console.log (String(function () {
console.log (1);
}));
// function () {
// console.log (1);
// }
script>
五、隐式转换为Number类型
隐式类型转换是需要触发条件的。
当当前的环境需要将操作数当做数值型的数据进行计算的时候，
那么就会将其他的类型隐式转换为Mumber类型之后再做运算。
隐式的转换底层使用Number()函数转换。
隐式转换的环境：通常是四则运算
<script>
console.log (true * 10);//10
console.log ("123" - 1);//122
console.log (false + 1);//1
console.log (undefined * 1);//NaN
console.log ("abc" / 2);//NaN
script>
六、隐式转换Boolean类型
当环境需要一个布尔类型的数据的时候，如果当前数据不是布尔类型，
那么就会进行隐式转换，转换的规则通过显式转换。
只有5种情况下是false,其他的都是true
5种：0、null、undefined、"",NaN
需要布尔值的环境：if、三目、循环条件等等
<script>
var ran = ~~(Math.random () * 10);
console.log (ran);
//触发隐式转换。ran % 2 0:false 1:true
var result = ran % 2 ? "奇数" : "偶数";
console.log (result);
//触发隐式转换。"abc"/10==NaN 会转换为 false
console.log ("abc"/10 ? "true":"false");
script>
七、隐式转换String类型
任意类型，当和String进行+连接的时候，其他的任意类型都会被底层
隐式转换为String,然后再做+连接。
隐式转换的规则同显式转换。
触发的环境：+连接操作。
<script>
console.log ("a" + 1);//a1
console.log (true + 1 + "a");//2a
console.log (null + "a");//nulla
console.log (undefined + "a");//undefineda
console.log (NaN + "a");//NaNa
console.log (1 + 2 + "3");//33
console.log ("3" + 2 + 1);//321
console.log ([1,2]+"3");//1,23
console.log ({
}+"a");//[object Object]a
script>
八、对于非数值型数据大小的比较介绍
在js中，可以对任意类型使用关系运算符：> >= < <=
进行大小的比较。
对于非数值型的数据的大小的比较的规则：
1：如果是字符串之间的比较。逐个比较对应位置上的字符的Uncode码值。
一旦一方的字符大于或者小于了另外一方，就作为整个比较的结果，不在继续比较后续的字符。
2：如果，参与比较的数据中有非字符串型数据，那么就将所有的数据隐式转换为Number类型，再作比较。
<script>
console.log ("a" > "1");//true
console.log ("A" > "a");//false
console.log ("aaa" > "aa");//true
console.log ("abc" > "abbbbb");//true
console.log ("-------------")
console.log ("a" > 1);//false
console.log (true > 1);//false
console.log (null >= "0");//true
console.log (undefined <= false);//false
console.log (" 123" > NaN);//false
console.log (NaN >= NaN);//false
console.log (null >= undefined);//false
script>
九、==和 ===介绍
== : 关系运算符 等于。用于比较两个操作数是否相等的。相等为true，否则为false。
!=: 不等于。
=：绝对等于。用于比较两个操作数是否相等的。相等为true，否则为false。
!：绝对不等于。
===：绝对等于：
比较的规则：先比较两个操作数的类型，如果类型不同，直接返回false。
如果类型相同，然后再比较内容，内容不同，返回false。内容相同返回true。
!==：绝对不等于
比较的规则：类型或者是内容不同，结果就是true。类型和内容都相同就是false。
== : 关系运算符
比较规则：
1：如果类型相同，那么就比较值，值相同返回true，值不同返回false。
2：如果类型不同，那么就隐式转换为Number。然后再比较值。相同返回true，值不同返回false。
!=: 不等于：
比较规则：
== 返回true的，它返回false。 == 返回false的，它返回true
注意：null 和 undefined 进行 == 比较的时候，不进行类型转换。
优先使用绝对等于。
<script>
console.log ("1" === 1);//false
console.log (true === 1);//false
console.log (true === true);//true
console.log (1 === 1);//true
console.log ("-------------");
console.log ("1" == 1);//true
console.log (true == 1);//true
console.log (null == 0);//false ???
console.log (null == undefined);//true ???
console.log (false == 0);//true
console.log ("true" == true);//false
console.log (Number("true"));//NaN
console.log (" 123" == 123);//true
script>
十、js中的流程控制语句介绍
流程控制：控制代码执行的过程。
在任何的语言中，流程控制部分分为三类：
1：顺序执行。 从上到下依次执行。
2：分支选择：根据条件，有选择的执行某些代码，跳过某些代码。
if：单分支
if-else：双分支
if-else if....else：多分支
switch：多分支
3：循环：反复执行某些代码。
while
do-while
for
十一、if单分支
if单分支选择语句
1：语法： if(条件){ //任意的js代码 if代码块 }
2：解释：
if是js的关键字。
小括号必须要有
条件：要求是一个boolean表达式。返回值为boolean。如果条件返回的不是boolean值，那么
js底层会进行隐式的类型转换，转换为boolean值。
一对大括号：里面是任意行的js代码。
3：执行过程：
1：首先判断if后的条件的返回值。
2：如果返回值为true，那么就执行if 代码块。 然后执行后续的内容。
3：如果返回为false，那么就跳过if代码块，执行后续的内容。
注意：
1：if是一个单分支选择语句，被选择执行的语句，根据条件是否成立，选择执行或者不执行。
2: 如果if代码块中只有一条js代码。可以省略大括号。
如果是多条js代码，那么必须使用大括号包裹。
3：if后的条件的小括号后，不能添加 ; .如果添加了分号，那么条件控制的是否执行的代码
就是分号。而不是后面的大括号中的内容了。
<script>
//随机得到两个数，将比较大的求得，并打印。使用if实现。
const MIN = 10;
const MAX = 20;
var num1 = ~~(Math.random () * (MAX - MIN) + MIN);
var num2 = ~~(Math.random () * (MAX - MIN) + MIN);
var num3 = ~~(Math.random () * (MAX - MIN) + MIN);
console.log ("num1 = " + num1 + "\tnum2 = " + num2 + "\tnum3 = " + num3);
/*var max = num1;
if (max < num2) {
max = num2;
}
if(num3 > max){
max = num3;
}*/
var max;
if(num1 >= num2 && num1 >= num3){
max = num1;
}
if(num2 >= num1 && num2 >= num3){
max = num2;
}
if(num3 >= num2 && num3 >= num1){
max = num3;
}
//等价于上面的写法
if(num3 >= num2){
if(num3 >= num1){
max = num3;
}
}
console.log ("max = " + max);
script>
十二、if-else双分支选择
if-else双分支选择
语法：if(条件){ //if 代码块 }else{ //else代码块 }
解释：
条件：和if中的条件一致。
else：是js中的一个关键字。否则的意思。
else后的大括号：里面是任意的js代码。
执行过程：
1：先计算条件。必须返回一个布尔值，可能存在隐式的转换。
2：如果条件返回的结果为true，那么就执行if代码块。而不执行else代码块。
3：如果返回的结果为false，那么就跳过if代码块，执行else代码块中的内容。
注意：
1：if可以单独使用。else 不能单独存在，必须和某一个if 配对使用。
2：if 代码块和else代码块中的内容，如果只有一行js代码，可以省略大括号。
3：不要在条件小括号后添加分号，else就没有配对的if了。报错了。
4: if 和 else之间，要么是一条js代码，要么是一个if代码块。
5：if-else 双分支。这两个分支是条件互斥的。两个分支执行且必须执行其中的一个分支。
<script>
//练习：两个英雄pk，一人攻击一次。
//一个叫阿基里斯，一个叫赫克托
var aHp = 100;
var aAtk = 100;
var hHp = 100;
var hAtk = 100;
//赫克托攻击阿基里斯
var damage = hAtk + ~~(Math.random () * (11) - 5);//【-5 +5】
aHp -= damage;
if (aHp <= 0) {
//阿基里斯挂了
aHp = 0;
console.log ("赫克托攻击了阿基里斯，产生了伤害：" + damage);
console.log ("阿基里斯挂了！");
} else {
//阿基里斯残血反击
damage = aAtk + ~~(Math.random () * (11) - 5);//【-5 +5】
hHp -= damage;
if (hHp <= 0) {
hHp = 0;
console.log ("阿基里斯残血反杀了赫克托。");
console.log ("赫克托挂了");
}
}
//结果：
if (aHp === 0) {
//阿基里斯的血量为0
console.log ("赫克托胜利了！");
} else {
阿基里斯的血量不为0，还活着
if (hHp === 0) {
//赫克托血量为0
console.log ("阿基里斯胜利了！");
} else {
console.log ("aHp = " + aHp + "\thHp = " + hHp);
console.log ("平局！");
}
}
script>
十三、if-else if-else多分支 选择
if-else if…else 多分支选择语句
语法：
if(条件-1){ //代码块-1}
else if(条件-2){ //代码块-2}
else if(条件-3){ //代码块-3}
…
else{代码块-n}
执行过程：
1：先判断 条件-1，如果成立，执行 代码块-1。后续的所有的分支都被跳过。
2：条件-1 不成立。继续判断 条件-2.成立执行对应的代码块，不成立，继续判断后续的条件。
3：一次类推，只要有一个条件成立了，就执行对应的代码块，其他的代码块都被跳过。
4：如果所有的条件都不成立，那么执行最后的else 的代码块。
注意：
1：如果代码块中的内容为一条js代码，大括号可以省略。
2：这些所有的分支的条件理论上应该是互斥的。不应该存在重叠的条件。
3：每个else 都和它前面的距离它最近的if 配对。
4：if-else 多分支，执行且仅能执行其中的一个分支。
5：最后的else可以不写。取决于业务的要求。如果最后的else没有，那么这么多的分支可能
一个都不执行。如果前面的所有的条件都不成立，那么就都不执行。
<script>
/*练习 随机 得到一个分数[0,100],
* [90-100]:打印 优秀
* [80-89]:良好
* [70-79]:中等
* [60-69]:及格
* [0-59]:回炉重造。
* */
const MIN_SCORE = 0;
const MAX_SCORE = 101;
var score = ~~(Math.random () * (MAX_SCORE - MIN_SCORE) + MIN_SCORE);
console.log (`score = ${
score}`);
if (score >= 90) {
console.log ("优秀");
} else if (score >= 80) {
console.log ("良好");
}else if(score >= 70){
console.log ("中等");
}else if(score >= 60){
console.log ("及格");
}else{
console.log ("回炉重造");
}
script>
十四、switch-case多分支选择
switch-case 多分支选择:
语法：
switch(变量表达式){
case 常量表达式-1:
代码块-1
break;
case 常量表达式-2:
代码块-2
break;
case 常量表达式-3:
代码块-3
break;
…
default:
代码块-n
break;
}
解释：
switch：js关键字，开关的意思。
小括号中的变量表达式：包含变量的表达式。
后面是一对大括号。大括号中有若干对 case-break 结构体。
case 后通常是常量表达式:
代码块：任意行js代码分支语句。
break：js关键字。后面直接跟分号即可。
执行过程：
1：首先计算 switch后的变量表达式的结果。
2：然后从上到下依次计算每个case 后的常量表达式计算的结果。
然后依次和switch变量表达式计算的结果进行等值比较。
比较是否相等。如果和某一个case 后的值相等，那么就执行对应的
代码块的内容。如果不相等，就继续比对下一个case 后的值。
3：如果某一个case 相等了，那么就执行里面的内容，遇到break，
直接结束整个switch语句。
4：如果和每个case后的值都不相等，那么就执行default后的代码块。
注意：
1：每个case后的常量表达式的值应该是不同的。
2：多少个case 取决于业务的要求，没有数量的限制。
3：每个case 后的break，都是可以没有的。取决于业务的需求。
如果执行了case后需要结束switch，那就需要添加break。
4：default：是可选择添加的。根据业务要求。
5: 该机构只且最多比对相等一次。
break：在switch语句中的作用
就是用来结束switch语句的。
如果执行了case后的代码，但是case后没有break，那么后面的所有的case都将被继续执行。
直到遇到了一个break，才会结束switch。
<script>
/*练习 随机 得到一个分数[0,100],
* [90-100]:打印 优秀
* [80-89]:良好
* [70-79]:中等
* [60-69]:及格
* [0-59]:回炉重造。
* */
const MIN_SCORE = 0;
const MAX_SCORE = 101;
var score = ~~(Math.random () * (MAX_SCORE - MIN_SCORE) + MIN_SCORE);
console.log (`score = ${
score}`);
score /= 10;
score = ~~(score);
console.log (`score = ${
score}`);//[0-10]
switch (score) {
case 10: case 9:
console.log ("优秀");
break;
case 8:
console.log ("良好");
break;
case 7:
console.log ("中等");
break;
case 6:
console.log ("及格");
break;
case 5:
case 4:
case 3:
case 2:
case 1:
case 0:
console.log ("回炉重造");
break;
//等价代码
// default:
// console.log ("回炉重造");
// break;
}
script>
十五、多分支选择语句的使用选择
1：if-esle多分支：
既可以进行等值比较，也可以进行不等值的区间的比较。
2：switch case ：只能进行等值比较。
switch case 能实现的，if-else一定可以实现。
十六、 switch-case练习
模拟一次人和电脑之间的游戏：猜丁壳。
石头剪刀布。
要求：
玩家：通过键盘输入选择石头、剪刀、布
电脑：随机获得。
打印玩家和电脑的手势。
然后比较玩家和电脑的手势。
最后打印结果，谁胜利了。
<script>
//定义三个常量，代表石头剪刀布
const STONE = 0;
const SCISSORS = 1;
const PAPER = 2;
//定义变量，接收用户的输入。
var playerInput = parseInt (prompt ("请输入【0：石头】【1：剪刀】【2：布】"));
//定义变量保存电脑的随机。
var computerInput = ~~(Math.random () * (PAPER + 1 - STONE) + STONE);
//根据用户输入的值，和电脑随机的值。打印两者的手势的内容。
//玩家的
var logStr = "玩家选择了";
switch (playerInput) {
case STONE:
logStr += "【石头】";
break;
case SCISSORS:
logStr += "【剪刀】";
break;
case PAPER:
logStr += "【布】";
break;
}
console.log (logStr);
//电脑的
logStr = "电脑选择了";
switch (computerInput) {
case STONE:
logStr += "【石头】";
break;
case SCISSORS:
logStr += "【剪刀】";
break;
case PAPER:
logStr += "【布】";
break;
}
console.log (logStr);
//根据用户输入的值，和电脑随机的值 比较。谁胜利了！打印最终的结果。
switch (playerInput) {
//玩家的三种情况，
case STONE:
switch (computerInput) {
case STONE:
console.log ("平局");
break;
case SCISSORS:
console.log ("玩家胜利了");
break;
case PAPER:
console.log ("电脑胜利了");
break;
}
break;
case SCISSORS:
switch (computerInput) {
case STONE:
console.log ("电脑胜利了");
break;
case SCISSORS:
console.log ("平局");
break;
case PAPER:
console.log ("玩家胜利了");
break;
}
break;
case PAPER:
switch (computerInput) {
case STONE:
console.log ("玩家胜利了");
break;
case SCISSORS:
console.log ("电脑胜利了");
break;
case PAPER:
console.log ("平局");
break;
}
break;
}
script>
十七、while循环
循环：loop
当需要反复的，重复的执行某些代码的时候，就需要使用循环了。
while、do-while、for
while 循环
语法：
while(循环条件){ //循环体 }
解释：
while：关键字
循环条件：布尔表达式，返回一个布尔值。如果不能返回一个布尔值，
那么就需要隐式转换。
大括号中是需要反复执行的代码块。
执行过程：
1：先判断循环条件，如果是true，那么就执行循环体。然后执行完循环体，再继续判断循环条件
成立，继续执行循环体，直到循环条件为false，那么立即结束循环。
2：如果一开始循环条件就是false，那么循环体一次都不执行。
注意：
1：如果循环体就一句代码，那么可以省略大括号。
2: 千万不要在循环条件后添加 ; 号。如果加了，循环体就是分号了。
循环结构的构成：
1：循环控制部分
a：循环条件初始化
b：循环条件
c：迭代（改变循环条件部分）
2：循环体
<script>
//打印100个 helloworld。
/*var counter = 0;
while(counter < 500){
console.log ("helloworld!");
counter ++;
}
counter = 0;
while(counter++ < 500)
console.log ("helloworld!");*/
//1-100的累加和
var sum = 0;//累加和变量
var num = 0;//自变量 1--100
while (num < 100) {
num++;
sum += num;
}
console.log ("sum = " + sum);
//1--100的奇数的累加和
sum = 0;
num = 1;
while (num < 100) {
sum += num;
num += 2;
}
console.log ("sum = " + sum);
sum = 0;
num = 1;
while (num < 100) {
if (num % 2 != 0)
sum += num;
num++;
}
console.log ("sum = " + sum);
script>