初识javaScript（三）

最新推荐文章于 2022-07-20 07:45:00 发布

打酱油的女孩子

最新推荐文章于 2022-07-20 07:45:00 发布

阅读量296

点赞数 1

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_38341556/article/details/107608684

版权

js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1 js代码的基本书写规范

js的代码的基本书写规范
1：一行代码的末尾添加分号 ;因为js对编码的要求不够严格，所以忽略了代码末尾的分号也可以执行。但是其他的语言中，分号是必不可少的，而且单独的一句分号，是有意义的一条js代码。一条空的js代码。
2: 按照标识符的命名规范去命名不同种类的标识符。
3：给代码添加合适的注释。
4：代码分组：将一个需求中的，若干个小模块，模块和模块之间使用空行隔开。

2 类型转换

定义
任何语言中，都有一条规则，那就是不同种类的数据不能一起进行运算，如果需要不同类型之间的数据进行混合运算，那么需要将不同种类的数据，转换为同类型的数据之后才能运算。这就是所谓的类型转换。
分类
（1）显示类型转换(强制类型转换)（程序员通过js代码进行类型转换）
（2）隐式类型转换（对于程序员式透明的，不需要参与）
注：所有的隐式转换都是在底层完成的。js引擎，所有转换都是依赖函数来完成的，也是依赖Number、Boolean、String.

2.1 Number 显示类型转换

显示类型转换：转换为Number类型
通过Number() 函数进行显式转换。
格式：Number(需要转换的数据)

<body>
<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>
</body>

2.2 使用Boolean()函数转换

使用Boolean()函数。进行类型转换。
在5种情况下会转换为false，其他的都是true。

<body>
<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>
</body>

2.3 使用String()进行转换

将任意类型转换为字符串
通过函数 String(数据)

<body>
<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>
</body>

2.4 隐式转换为Number类型

隐式类型转换是需要触发条件的。
当当前的环境需要将操作数当做数值型的数据进行计算的时候，
那么就会将其他的类型隐式转换为Number类型之后再做运算。
隐式的转换底层使用Number()函数转换。
隐式转换的环境：通常是四则运算

<body>
<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>
</body>

2.5隐式转换为Boolean类型

当环境需要一个布尔类型的数据的时候，如果当前数据不是布尔类型，
那么就会进行隐式转换，转换的规则通过显式转换。
只有5种情况下是false，其他的都是true
5种：0、null、undefined、"",NaN
需要布尔值的环境：if、三目、循环条件等等

<body>
<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>
</body>

2.6 隐式转换为String类型

任意类型，当和String进行 + 连接的时候，其他的任意类型都会被底层
隐式转换为String，然后再做 + 连接。
隐式转换的规则同显式转换。
触发的环境：+ 连接操作。

<body>
<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>
</body>

3 对于非数值型数据大小的比较介绍

在js中，可以对任意类型使用关系运算符：> >= < <=进行大小的比较。
对于非数值型的数据的大小的比较的规则：
1：如果是字符串之间的比较。逐个比较对应位置上的字符的Uncode码值, 一旦一方的字符大于或者小于了另外一方，就作为整个比较的结果，不在继续比较后续的字符。
2：如果，参与比较的数据中有非字符串型数据，那么就将所有的数据隐式转换为Number类型，再作比较。

<body>
<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>
</body>

4 相等和绝对相等的介绍

= = : 关系运算符等于。用于比较两个操作数是否相等的。相等为true，否则为false。
!=: 不等于。
= = =：绝对等于。用于比较两个操作数是否相等的。相等为true，否则为false。
! = =：绝对不等于。
= = =：绝对等于比较的规则：
先比较两个操作数的类型，如果类型不同，直接返回false。
如果类型相同，然后再比较内容，内容不同，返回false。内容相同返回true。
!==：绝对不等于比较的规则：
类型或者是内容不同，结果就是true。类型和内容都相同就是false。
= = : 关系运算符比较规则：
1：如果类型相同，那么就比较值，值相同返回true，值不同返回false。
2：如果类型不同，那么就隐式转换为Number。然后再比较值。相同返回true，值不同返回false。
!=: 不等于比较规则：
= = 返回true的，它返回false。 = = 返回false的，它返回true
注意：null 和 undefined 进行 == 比较的时候，不进行类型转换。
优先使用绝对等于。

<body>
<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>
</body>

5 js中的流程控制语句介绍

流程控制：控制代码执行的过程。
在任何的语言中，流程控制部分分为三类：
1：顺序执行。从上到下依次执行。
2：分支选择：根据条件，有选择的执行某些代码，跳过某些代码。
if：单分支
if-else：双分支
if-else if…else：多分支
switch：多分支
3：循环：反复执行某些代码。
while
do-while
for

5.1 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后的条件的小括号后，不能添加 ; .如果添加了分号，那么条件控制的是否执行的代码
就是分号。而不是后面的大括号中的内容了。

<body>
<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>
</body>

5.2 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 双分支。这两个分支是条件互斥的。两个分支执行且必须执行其中的一个分支。

<body>
<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>
</body>

5.3 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没有，那么这么多的分支可能一个都不执行。如果前面的所有的条件都不成立，那么就都不执行。

<body>
<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>
</body>

5.4 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。

<body>
<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>
</body>

<body>
<!--
    模拟一次人和电脑之间的游戏：猜丁壳。
    石头剪刀布。
    要求：
        玩家：通过键盘输入选择石头、剪刀、布
        电脑：随机获得。
        打印玩家和电脑的手势。
        然后比较玩家和电脑的手势。
        最后打印结果，谁胜利了。
-->
<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>
</body>

5.5 多分支选择语句的使用选择

1：if-esle多分支：
既可以进行等值比较，也可以进行不等值的区间的比较。
2：switch case ：只能进行等值比较。
switch case 能实现的，if-else一定可以实现。

5.6 while 循环

循环：loop
当需要反复的，重复的执行某些代码的时候，就需要使用循环了。
while、do-while、for
while 循环
语法：
while(循环条件){ //循环体 }
解释：
while：关键字
循环条件：布尔表达式，返回一个布尔值。如果不能返回一个布尔值，
那么就需要隐式转换。
大括号中是需要反复执行的代码块。

执行过程：
1：先判断循环条件，如果是true，那么就执行循环体。然后执行完循环体，再继续判断循环条件
成立，继续执行循环体，直到循环条件为false，那么立即结束循环。
2：如果一开始循环条件就是false，那么循环体一次都不执行。
注意：
1：如果循环体就一句代码，那么可以省略大括号。
2: 千万不要在循环条件后添加 ; 号。如果加了，循环体就是分号了。
循环结构的构成：
1：循环控制部分
a：循环条件初始化
b：循环条件
c：迭代（改变循环条件部分）
2：循环体

<body>
<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>
</body>

  // 一个人有200块钱，去买水，一瓶水两块钱，退一个空瓶子两块钱，退一个瓶盖5毛，问可以买多少瓶水喝
    var money=200;
    const WATER_PRICE=2;
    const BOTTLE_PRICE=1;
    const COVER=0.5;
    var count=0;

    //买水
    while(money>=2){
        money-=WATER_PRICE;
        count++;
        money+=BOTTLE_PRICE;
        money+=COVER;
    }
    console.log(count);
    console.log(money);*/
    
    /*一个水池1000升。两个水管同时往里灌水。
   * A管每秒钟2升，B管每秒3升。问多久灌满。
   * */
    //定义一个变量，定义水高
    var water_height=1000;
    const A_SPEED=2;
    const B_SPEED=3;

    var time=0;
    while(A_SPEED*time+B_SPEED*time<water_height){
        time++
    }
    console.log(time);

5.7 do-while 循环

do-while循环
语法：
do{
//循环体
}while(循环条件);

while(循环条件){循环体}
执行过程：
1：先执行一次循环体。然后再进行条件的判断。
2：如果条件成立，继续执行循环体，周而复始。
3：直到循环条件为false，结束整个循环。
do-while的事情的情形：
如果循环条件的判断要依赖于一次循环的执行可以使用do-while
总结：while和do-while的区别
1：语法不同
2：while先进行条件的判断，然后在执行循环体。
3：do-while先执行循环体，然后再进行循环条件的判断。
4：【while有可能一次循环体都不执行。do-while至少执行一次循环】

<body>
<script>
 //1-100的累加和
 var sum = 0;
 var num = 1;
 do{
     sum += num;
     num ++;
 }while(num < 101);
 console.log ("sum = " + sum);

 //1-100的偶数的累加和
 var sum = 0;
 var num = 2;
 do{
     sum += num;
     num +=2;
 }while(num < 101);
 console.log ("sum = " + sum);

 //
 const MIN = 1;
 const MAX = 101;
 //先得到一个随机数
 /*var ran = ~~(Math.random () * (MAX - MIN) + MIN);
 while (!(ran % 5 === 0 && ran % 7 === 0)) {//ran是5和7的公倍数的条件
     ran = ~~(Math.random () * (MAX - MIN) + MIN);
 }
 console.log ("ran = " + ran);*/
 do{
     var ran = ~~(Math.random () * (MAX - MIN) + MIN);
 }while(!(ran % 5 === 0 && ran % 7 === 0));
 console.log ("ran = " + ran);
</script>
</body>

5.8 for 循环

for循环
语法：
for(循环条件初始化; 循环条件 ; 迭代){ 循环体 }

执行过程：
1：循环条件初始化：执行且仅执行一次。最先被执行。
2：进行循环条件的判断。成立，执行循环体，然后执行迭代部分。然后再进行条件的判断，循环体，迭代，周而复始。直到循环条件为false立即结束循环。
注意：
1：初始化部分可以同时初始化多个变量，迭代部分，可以同时迭代多个变量。循环条件只要返回一个布尔值即可。
2：for循环的小括号内使用2个分号分隔成了3部分。这三部分的内容都可以没有，但是2个分号是必不可少的。
3: 如果循环条件不写，意味着循环条件永远为真。

<body>
<script>
  //1--100的累加和
  /* var sum = 0;
   for (var i = 1; i <= 100; i++) {
       sum += i;
   }
   console.log ("sum = " + sum);*/
  //1--100偶数累加和
  /* var sum = 0;
   for (var i = 2; i <= 100; i += 2) {
       sum += i;
   }
   console.log ("sum = " + sum);*/

  //三部分比较特殊的情况
  /*for (var i = 0, j = 0, k = 0; i < 100 && j < 100 && k < 100; i++, j += 2, k += 3) {
  }*/

  /*var sum = 0;
  var num = 1;
  for(;num < 100;){
      sum += num;
      num ++;
  }*/

  //男程序员给女程序员的表白
 /* for (var i = 0; i < 10000; i++) {
      console.log ("I Love U");
  }
  for (;;){
      console.log ("I Love U Too");
  }*/


</script>
</body>

6 循环的选择

循环的选择：
1：如果循环的次数是固定的，通常使用for
2：如果循环的次数不固定，通常使用while

7 break;语句

break：中断的意思。
语法： break;
1：js 的关键字
2：break 只能在 switch 中和循环体中使用。
3：在swtich中，用来结束switch语句的。
4：在循环体中使用，用来结束当前循环的。只能结束一层。

   <body>
   <script>
   //使用while 和 for 实现1--100的累加和使用 break 实现
   /*var sum = 0;
   var num = 1;
   while (true) {
       sum += num;
       //当num为100 就可以结束循环了
       if (num === 100) break;
       num++;
   }
   console.log ("sum = " + sum);*/

   var sum = 0;
   for (var i = 1; ; i++) {
       sum += i;
       if (i === 100) break;
   }
   console.log ("sum = " + sum);

</script>
</body>

<body>
<!--
模拟一次人和电脑之间的游戏：猜丁壳。
    石头剪刀布。
    要求：
        玩家：通过键盘输入选择石头、剪刀、布
        电脑：随机获得。
        打印玩家和电脑的手势。
        然后比较玩家和电脑的手势。
        最后打印结果，谁胜利了。
-->
<script>
    //定义三个常量，代表石头剪刀布
    const STONE = 0;
    const SCISSORS = 1;
    const PAPER = 2;
    //最大的胜利的局数
    const MAX_WIN_COUNT = 3;

    // 变量
    var playerInput = 0;
    var computerInput = 0;
    var playerWinCount = 0;
    var computerWinCount = 0;

    //局数
    var counter = 1;

    //循环体就是一局的过程
    while (playerWinCount < MAX_WIN_COUNT && computerWinCount < MAX_WIN_COUNT) {
        console.log (`******************第${counter}局开始了****************`);
        //接收用户的输入。
        playerInput = parseInt (prompt ("请输入【0：石头】【1：剪刀】【2：布】"));

        while (isNaN(playerInput) || playerInput < STONE || playerInput > PAPER) {
            playerInput = parseInt (prompt ("输入错误！请输入【0：石头】【1：剪刀】【2：布】"));
        }
        //电脑的随机。
        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 ("本局【玩家】胜利了");
                        playerWinCount++;
                        break;
                    case PAPER:
                        console.log ("本局【电脑】胜利了");
                        computerWinCount++;
                        break;
                }
                break;
            case SCISSORS:
                switch (computerInput) {
                    case STONE:
                        console.log ("本局【电脑】胜利了");
                        computerWinCount++;
                        break;
                    case SCISSORS:
                        console.log ("本局为【平局】");
                        break;
                    case PAPER:
                        console.log ("本局【玩家】胜利了");
                        playerWinCount++;
                        break;
                }
                break;
            case PAPER:
                switch (computerInput) {
                    case STONE:
                        console.log ("本局【玩家】胜利了");
                        playerWinCount++;
                        break;
                    case SCISSORS:
                        console.log ("本局【电脑】胜利了");
                        computerWinCount++;
                        break;
                    case PAPER:
                        console.log ("本局为【平局】");
                        break;
                }
                break;
        }
        //输出当前的比分
        console.log (`【电脑】vs【玩家】比分为：${computerWinCount} : ${playerWinCount}`);
        console.log (`******************第${counter++}局结束了****************`);
    }
    //输出最终的结果。
    if (playerWinCount === MAX_WIN_COUNT) {
        console.log ("玩家胜利了");
        console.log (`【玩家】vs【电脑】比分为：${playerWinCount} : ${computerWinCount}`);
    } else {
        console.log ("电脑胜利了");
        console.log (`【电脑】vs【玩家】比分为：${computerWinCount} : ${playerWinCount}`);
    }

</script>
</body>

<body>
<!--
模拟一次人和电脑之间的游戏：猜丁壳。
    石头剪刀布。
    要求：
        玩家：通过键盘输入选择石头、剪刀、布
        电脑：随机获得。
        打印玩家和电脑的手势。
        然后比较玩家和电脑的手势。
        最后打印结果，谁胜利了。
-->
<script>
    //定义三个常量，代表石头剪刀布
    const STONE = 0;
    const SCISSORS = 1;
    const PAPER = 2;
    //最大的胜利的局数
    const MAX_WIN_COUNT = 3;

    // 变量
    var playerInput = 0;
    var computerInput = 0;
    var playerWinCount = 0;
    var computerWinCount = 0;

    //局数
    var counter = 1;

    //循环体就是一局的过程
    while (true) {
        console.log (`******************第${counter}局开始了****************`);
        //接收用户的输入。
        playerInput = parseInt (prompt ("请输入【0：石头】【1：剪刀】【2：布】"));
        //电脑的随机。
        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 ("本局【玩家】胜利了");
                        playerWinCount++;
                        break;
                    case PAPER:
                        console.log ("本局【电脑】胜利了");
                        computerWinCount++;
                        break;
                }
                break;
            case SCISSORS:
                switch (computerInput) {
                    case STONE:
                        console.log ("本局【电脑】胜利了");
                        computerWinCount++;
                        break;
                    case SCISSORS:
                        console.log ("本局为【平局】");
                        break;
                    case PAPER:
                        console.log ("本局【玩家】胜利了");
                        playerWinCount++;
                        break;
                }
                break;
            case PAPER:
                switch (computerInput) {
                    case STONE:
                        console.log ("本局【玩家】胜利了");
                        playerWinCount++;
                        break;
                    case SCISSORS:
                        console.log ("本局【电脑】胜利了");
                        computerWinCount++;
                        break;
                    case PAPER:
                        console.log ("本局为【平局】");
                        break;
                }
                break;
        }
        //输出当前的比分
        console.log (`【电脑】vs【玩家】比分为：${computerWinCount} : ${playerWinCount}`);
        console.log (`******************第${counter++}局结束了****************`);

        if(computerWinCount === MAX_WIN_COUNT || playerWinCount === MAX_WIN_COUNT)
            break;
    }
    //输出最终的结果。
    if(playerWinCount === MAX_WIN_COUNT){
        console.log ("玩家胜利了");
        console.log (`【玩家】vs【电脑】比分为：${playerWinCount} : ${computerWinCount}`);
    }else{
        console.log ("电脑胜利了");
        console.log (`【电脑】vs【玩家】比分为：${computerWinCount} : ${playerWinCount}`);
    }

</script>
</body>

8 continue;语句

continue:继续的意思
1: js的一个关键字。
2：只能在循环体中使用。
3：作用：用来跳过本次循环，继续下次循环。
4：while、do-while的循环体中使用continue。continue后续循环体中的代码将被跳过，去到下次循环条件的判断处去执行。
5：for 循环体中使用，会跳过continue 后续的代码，跳到迭代处去执行。

<body>
<script>
    //1--100的奇数的累加和
    var sum = 0;
    var num = 0;
    while (num < 100) {
        num++;
        //当num是偶数的时候执行continue。就直接跳转到了循环条件判断处去执行了。
        if (num % 2 === 0)
            continue;
        //偶数的时候，下面的代码被跳过。
        sum += num;
    }
    console.log (sum);
</script>
</body>

9 关于分支选择的嵌套问题

单分支if
双分支 if-else
多分支等等
有嵌套的需求：
那么嵌套的深度不要太深，不建议超过3层。
循环的嵌套：循环体中包含了其他的循环。

嵌套循环的特点：
1：外层循环迭代一次，内层循环执行一遍。
2：内层循环体执行的次数等于，每一层循环执行的次数的乘积。
关于使用率：单层循环使用最多。双层的使用一般般。三层很少使用。

10 一些练习

<body>
<script>
   for (var i = 0; i <3 ; i++) {//外层循环
       for (var j = 0; j <3 ; j++) {//内层循环
           console.log (`i=${i}\tj=${j}`);
       }
   }

   console.log ("-----------------");
   for (var i = 0; i <3 ; i++) {//外层循环
       for (var j = 0; j <3 ; j++) {//内层循环
           for (var k = 0; k <3 ; k++) {
               console.log (`i=${i}\tj=${j}\tk=${k}`);
           }
       }
   }

</script>
</body>

<body>
<!--
    今有鸡翁一，值钱伍；鸡母一，值钱三；鸡鶵三，值钱一。凡百钱买鸡百只，问鸡翁、母、鶵各几何？
-->
<script>
    //所有的排列组合
    for (var i = 0; i <= 20; i++) {//公鸡数量
        for (var j = 0; j <= 33; j++) {//母鸡的数量
            for (var k = 0; k <= 300; k += 3) {//小鸡的数量，3的倍数
                if (i + j + k === 100 && i * 5 + j * 3 + k / 3 === 100) {
                    console.log (`公鸡：${i}\t母鸡：${j}\t小鸡：${k}`);
                }
            }
        }
    }

    console.log ("------------------")
    //
    for (var i = 0; i <= 20; i++) {//公鸡数量
        for (var j = 0; j <= 33; j++) {//母鸡的数量
            var k = 100 - i - j;//小鸡的数量
            if (i * 5 + j * 3 + k / 3 === 100 && k % 3 === 0) {
                console.log (`公鸡：${i}\t母鸡：${j}\t小鸡：${k}`);
            }
        }
    }


</script>
</body>

<body>
<!--
    1--100以内的素数
    素数：又称为质数，只能被1和自身整除的数。1不是质数。
    2,3,5,7,11,13,17,19
-->
<script>
    //遍历1-100以内的所有的数
    for (var i = 2; i <= 100; i++) {
        //对每一个i进行是否是素数的判断。
        var flag = false;
        for (var j = 2; j < i; j++) {
            //在整个内层循环中，如果所有的j的取值都不能整除i，那么i就是素数
            if (i % j === 0) {
                flag = true;
                //i不是素数
                break;
            }
        }
        //如果内层循环执行完毕之后，flag 还是false。意味着if (i % j === 0)条件在整个内层循环中都没有成立。i是素数。
        //不建议的写法
        // if(flag === false){
        //     console.log (i);
        // }
        // if(flag = false){
        //     console.log (i);
        // }
        //好理解的，也不回有误操作的写法
        // if(false === flag){
        //     console.log (i);
        // }
        //最简便的写法
        if(!flag){
            console.log (i);
        }


    }
</script>
</body>

<body>
<!--
    1：随机得到两个整数，一个代表宽，一个代表高度。在页面输出
    该宽高的 * 组成的矩形。使用单层循环实现。
    要求 document.write("*");

    2: 嵌套循环实现上述的内容

    3：打印指定宽高的平行四边形
      ********  2  0  height-i-1
     ********  1   1
    ********  0    2
    4: 打印等腰三角形
      *    2    0  height-i-1   1 i*2+1
     ***   1    1               3
    *****  0    2               5

-->
<script>
    /* var width = ~~(Math.random () * 10 + 5);
     var height = ~~(Math.random () * 5 + 2);
     console.log (`width = ${width}\theight = ${height}`);

     var loopCount = width * height;
     for (var i = 1; i <= loopCount; i++) {
         document.write (" * ");
         //i是width的倍数的时候，换行
         if (i % width === 0) {
             document.write ("<br>");
         }
     }*/

    /*var width = ~~(Math.random () * 10 + 5);
    var height = ~~(Math.random () * 5 + 2);
    console.log (`width = ${width}\theight = ${height}`);
    //外层循环控制行数
    for (var i = 0; i <height ; i++) {
        //内层循环控制每一行的*的打印
        for (var j = 0; j <width ; j++) {
            document.write(" * ");
        }
        //末尾添加换行符
        document.write ("<br>");
    }*/

    /* //平行四边形
     var width = ~~(Math.random () * 10 + 5);
     var height = ~~(Math.random () * 5 + 2);
     console.log (`width = ${width}\theight = ${height}`);
     //外层循环控制行数
     for (var i = 0; i <height ; i++) {
         //每一行的前面添加若干个空格。
         for (var j = 0; j <height-i-1 ; j++) {
             document.write ("<span style='opacity: 0'>*</span>");
         }
         //内层循环控制每一行的*的打印
         for (var j = 0; j <width ; j++) {
             document.write("*");
         }
         //末尾添加换行符
         document.write ("<br>");
     }*/

    //等腰三角形
    var width = ~~(Math.random () * 20 + 15);
    var height = ~~(Math.random () * 20 + 2);
    console.log (`width = ${width}\theight = ${height}`);
    //外层循环控制行数
    for (var i = 0; i < height; i++) {
        //每一行的前面添加若干个空格。
        for (var j = 0; j < height - i - 1; j++) {
            document.write ("<span style='opacity: 0'>*</span>");
        }
        //内层循环控制每一行的*的打印
        for (var j = 0; j < 2 * i + 1; j++) {
            document.write ("*");
        }
        //末尾添加换行符
        document.write ("<br>");
    }
</script>
</body>

<body>
<!--

-->
<script>
    //外层循环控制行数。i还要参与乘法运算。第二个操作数。
    for (var i = 1; i <= 9; i++) {
        //内层循环控制第i行的n列的打印
        for (var j = 1; j <=i ; j++) {
            var num = j * i;
            document.write(`${j}*${i}=${num};&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`)
        }
        document.write("<br>");
    }
</script>
</body>

打酱油的女孩子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
初识javaScript（三）

类型转换定义任何语言中，都有一条规则，那就是不同种类的数据不能一起进行运算，如果需要不同类型之间的数据进行混合运算，那么需要将不同种类的数据，转换为同类型的数据之后才能运算。这就是所谓的类型转换。分类（1）显示类型转换|强制类型转换（程序员通过js代码进行类型转换）（2）隐式类型转换（对于程序员式透明的，不需要参与）注：所有的隐式转换都是在底层完成的。js引擎，所有转换都是依赖函数来完成的，也是依赖Number、Boolean、String.Number 显示类型转换显示类型转换：转换为
复制链接

扫一扫