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>