分支语句以及简易乘法表

最新推荐文章于 2025-11-29 13:42:57 发布

原创最新推荐文章于 2025-11-29 13:42:57 发布 · 置顶 · 250 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

这篇博客详细介绍了JavaScript中的分支语句，包括if、if...else、if...else if...else和switch语句的语法及使用。此外，还讨论了循环语句，如for、for/in、while和do...while循环的结构、工作原理和实例。文章最后展示了如何使用这些语句实现九九乘法表的正序和倒序展示。

分支语句

1 语句的概念

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

JavaScript 语句是发给浏览器的命令。

这些命令的作用是告诉浏览器要做的事情

下面的 JavaScript 语句向 id=“demo” 的 HTML 元素输出文本 “你好 Dolly” ：

document.getElementById(“demo”).innerHTML = “你好 Dolly”;

2 if语句

条件语句

条件语句是一种根据条件执行不同代码的语句，如果条件满足则执行一段代码，否则执行其他代码。

if 语句

只有当指定条件为 true 时，该语句才会执行代码。

语法

if (condition) {
当条件为 true 时执行的代码 }
请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！

请注意，在这个语法中，没有 …else…。您已经告诉浏览器只有在指定条件为 true 时才执行代码。

if…else 语句

请使用 if…else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

语法

if (condition)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}

if…else if…else 语句

使用 if…else if…else 语句来选择多个代码块之一来执行。

语法

if (condition1)
{
当条件 1 为 true 时执行的代码
}
else if (condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和条件 2 都不为 true 时执行的代码
}

.3 switch语句

switch 语句用于基于不同的条件来执行不同的动作。

JavaScript switch 语句

请使用 switch 语句来选择要执行的多个代码块之一。

语法

switch(n) { case 1: 执行代码块 1 break;

case 2: 执行代码块 2 break;

default: 与 case 1 和 case 2 不同时执行的代码 }

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

例如：

在这里插入代码片
  var d = Number(prompt('输入数字'))//键盘录入想要的日期
        switch (d) {
            case 1:
                alert('星期1')
                break
            case 2:
                alert('星期2')
                break
            case 3:
                alert('星期3')
                break
            case 4:
                alert('星期4')
                break
                case 5: 
                 
                 
                alert('星期5')
                break
                case 6:
                alert('星期6')
                break
                case 7:
                alert('星期日')
                break
            default:
            alert('没有这一天')
        


        }
    </script>

default 关键词

使用 default 关键词来规定匹配不存在时做的事情：

如果今天不是星期六或星期日，则会输出默认的消息：

var d=new Date().getDay(); switch (d) {

case 6:x=“今天是星期六”; break;

case 0:x=“今天是星期日”; break;

default: x=“期待周末”; }

document.getElementById(“demo”).innerHTML=x;

x 的运行结果：

期待周末

4 循环语句的概念

循环语句可以将代码块执行指定的次数。如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

5 .for循环语句

.5.1for循环语句语法和使用

for 循环的语法：

for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}

语句 1 （代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

如：

在这里插入代码片
function myFunction(){
	var x="";
	for (var i=0;i<5;i++){
		x=x + "该数字为 " + i + "<br>";
	}
	document.getElementById("demo").innerHTML=x;
}

循环代码5次。结果：

该数字为 0
该数字为 1
该数字为 2
该数字为 3
该数字为 4

从上面的例子中，您可以看到：

Statement 1 在循环开始之前设置变量 (var i=0)。

Statement 2 定义循环运行的条件（i 必须小于 5）。

Statement 3 在每次代码块已被执行后增加一个值 (i++)。

5.2 for循环分析

语句 1

通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。

语句 1 是可选的，也就是说不使用语句 1 也可以。

您可以在语句 1 中初始化任意（或者多个）值：

实例:

在这里插入代码片
for (var i=0,len=cars.length; i<len; i++) {   

   document.write(cars[i] + "<br>"); }

还可以省略语句 1（比如在循环开始前已经设置了值时）：

实例:

在这里插入代码片
var i=2,len=cars.length;

 for (; i<len; i++) {   

   document.write(cars[i] + "<br>"); }

语句 2

通常语句 2 用于评估初始变量的条件。

语句 2 同样是可选的。

如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。

	如果省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。请在本教程稍后的章节阅读有关 break 的内容。

语句 3

通常语句 3 会增加初始变量的值。

语句 3 也是可选的。

语句 3 有多种用法。增量可以是负数 (i–)，或者更大 (i=i+15)。

语句 3 也可以省略（比如当循环内部有相应的代码时）：

实例:

在这里插入代码片
var i=0,len=cars.length; 

for (; i<len; ) {     

 document.write(cars[i] + "<br>");     i++; }

For/In 循环

JavaScript for/in 语句循环遍历对象的属性：

实例

在这里插入代码片
var person={fname:"John",lname:"Doe",age:25};  

  for (x in person)  // x 为属性名

 {     txt=txt + person[x]; }

6 while循环语句

6.1 while循环语句的结构

while 循环

while 循环会在指定条件为真时循环执行代码块。

语法

while (条件)
{
需要执行的代码
}

6.2 while循环语句的使用

循环将继续运行，只要变量 i 小于 5：

实例

在这里插入代码片
while (i<5) {     x=x + "The number is " + i + "<br>";     i++; }

如果忘记增加条件中所用变量的值，该循环永远不会结束。这可能导致浏览器崩溃。

7 do while 循环语句

7.1 do while 循环语句的结构

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

语法

do
{
需要执行的代码}
while (条件);

7.2 do while 循环语句的使用

使用 do/while 循环。该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行：

实例

在这里插入代码片
do {     x=x + "The number is " + i + "<br>";     i++; } while (i<5);

别忘记增加条件中所用变量的值，否则循环永远不会结束！

8跳转语句

8.1 跳转语句的概念

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

9 break语句

3.9.1 break语句的概念

break 语句它用于跳出 switch() 语句。

break 语句可用于跳出循环。

break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）：

3.9.2 break语句的语法和实际案例

实例

在这里插入代码片
   for (i=0;i<10;i++) {    

if (i==3)     {         break;     }     

x=x + "The number is " + i + "<br>"; }  

// 这个 if 语句只有一行代码，所以可以省略花括号：

for (i=0;i<10;i++) {   

 if (i==3) break;   

 x=x + "The number is " + i + "<br>"; }

10 continue语句

3.10.1 continue语句的概念

continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。

3.10.2 continue语句的语法和实际案例

实例`

在这里插入代码片
for (i=0;i<=10;i++) {    

 if (i==3) continue;     

x=x + "The number is " + i + "<br>"; }

九九乘法表正序

在这里插入代码片
document.write('<table width="800" border="0" cellspacing="0" cellpadding="0">');

   for(var i=1;i<=9;i++){

   	// 先输出 tr 开始
    document.write('<tr>');


    for(var j=1;j<=i;j++){

     document.write('<td style="border:1px solid red">'+j+'X'+i+'='+i*j+'</td>');
     // num++;


     //  1 X  1  =  1
     //  1 X  2  =  2

    }



    document.write('</tr>');
  //tr 结束

   }

九九乘法表倒序

在这里插入代码片
document.write('<table width="800" border="0" cellspacing="0" cellpadding="0">');

   for(var i=9;i>=1;i--){

   	// 先输出 tr 开始
     
    document.write('<tr>');


    for(var j=i;j>=1;j--){

     document.write('<td style="border:1px solid red">'+j+'X'+i+'='+i*j+'</td>');
     // num++;



    }



    document.write('</tr>');
  //tr 结束

   }