JavaScript 之 核心语法 [ 语句 ]

语句概况

描述

• 在JavaScript代码中，使用分号（；）分隔的可以叫做是语句

语句块

• 在JavaScript代码中，大括号（｛｝）表示语句块
• 语句块中可以存在一条或多条语句

语句的分类

• 条件语句
• 循环语句
• 跳转语句

条件语句

描述

• 通过对条件表达式的计算结果进行判断，来决定要执行的语句

if...else语句

语法

if ( 条件表达式 ) {
   语句块 - 当条件表达式计算结果为true时才执行
} else {
   语句块 - 当条件表达式计算结果为false时才执行
}

条件表达式

• 用于控制执行指定的语句块
• 条件表达式的计算结果一般为boolean类型值
• 如果表达式的计算结果不为boolean类型，会先将数据类型强转成boolean类型，在进行判断

示例代码

/* 条件表达式为boolean类型 */
var boo = true;
/* 添加条件表达式 */
if ( boo ) {
    /* 表达式结果为true时 */
    console.log( '判断结果为true' );
} else {
    /* 表达式结果为false时 */
    console.log( '判断结果为false' );
}
/* 条件表达式不是boolean类型 */
var num = 100;
/* 添加条件表达式 */
if ( num ) {
    /* 表达式结果为true时 */
    console.log( '判断结果为true' );
} else {
    /* 表达式结果为false时 */
    console.log( '判断结果为false' );
}

嵌套

• if...else 语句允许嵌套

示例代码

/* if...else语句的嵌套 */
var ss = 90;
/* 添加条件表达式 */
if ( ss > 80 ) {
    /* 表达式结果为true时 */
    console.log( '优秀' );
    /* 表达式结果为false时 */
} else {
    /* 可以嵌套在做分类 */
    /* 当第一个表达式结果为false时，在做选择 */
    if ( ss > 50 ) {
        /* 结果是true时 */
        console.log( '及格' );
        /* 结果是false时 */
    } else {
        /* 可以在嵌套在做分类（建议最多嵌套三层） */
        /* 当上一个表达式结果为false时，在做选择 */
        if ( ss > 30 ) {
            /* 结果是true时 */
            console.log( '不及格' );
        } else {
            /* 结果是false时 */
            console.log( '很差' );
        }
    }
}

else...if语句

• 是对if...else语句嵌套的一些优化

• 与if...else语句嵌套的对比

  • 代码的可读性变高
  • 代码的加载时间变快
  • 显示结果相同

示例代码

/* else...if语句 */
var sss = 95;
/* 添加条件表达式 */
if ( sss > 90 ) {
    console.log( '优秀' );
} else if ( sss > 80 ) {
    console.log( '很棒' );
} else if ( sss > 60 ) {
    console.log( '及格' );
} else if ( sss > 40 ) {
    console.log( '不及格' );
} else {
    console.log( '很差' );
}

switch...case语句

语法

switch ( 条件表达式 ) {
    case 值:
        语句块
        break;
    ... ...
    default：
        语句块
}

条件表达式

• 条件表达式的计算结果不一定是boolean类型，也可以是其他类型

case语句

• case的值与表达式的结果进行比较判断
• 结果为true时显示对应结果
• 结果为false时会在进行判断表达式的结果
• case的值与表达式的结果之间是全等比较（既要比较值，也要比较类型）

break关键字

• 表示该语句的结束
• 每个case语句所对应的语句块中都会添加 break 关键字
• break 关键字并不是switch语句的语法要求，而是switch语句的需要

default语句

• 在每个case中都没有对应条件的可以再语句中最后添加default来做最后显示
• 也可以将default添加在语句中的任意位置，表达效果一样，但是要在其中添加break

示例代码

var s = 2;
/* 添加条件表达式 */
switch ( s ) {
    /* 条件表达式的计算结果等于case值 */
    case 0:
        /* 显示当前case语句对应的语句 */
        console.log( '0' );
        /* 执行完语句后结束选择判断 */
        break;
    case 1:
        console.log( '1' );
        break;
    /* 在没有匹配的case语句时，会显示default中的语句 */
    default:
        console.log( '没有可选项' );
}

循环语句

描述

• 让一段JavaScript代码重复执行

while语句

语法

while ( 条件表达式 ) {
    语句块
}

示例代码

/* while语句 */
var s = 1;
/* 进行条件表达式判断 */
while ( s < 10 ) {
    console.log( s );// 在不改变 变量的值时会一直循环显示
    s++;// 改变 变量的值，使表达式的计算结果改变，结束循环
}

• 通过改变 变量的值 来控制条件表达式的计算结果
• 要设置出口来结束循环，不然会进行无限的死循环，无法彻底结束

do...while语句

语法

do {
    语句块
} while ( 条件表达式 )

与while语句对比

• while语句

  • 如果没有满足条件判断，将不进行循环语句显示

• do...while语句

  • 会先显示一次语句块，在进行条件表达式判断

示例代码

/* do...while语句 */
var ss = 1;
do {
    /* 先显示一次语句块 */
    console.log('哈哈哈哈');
  /* 进行条件表达式判断 */
} while ( ss > 10 );

for语句

语法

for ( 定义变量表达式; 条件表达式; 循环控制表达式 ) {
        语句块
}

表达式的解释

• 定义变量表达式 - 表示控制循环的变量
• 条件表达式 - 表示控制循环变量的值
• 循环控制表达式 - 表示控制循环结束
• 三个表达式可以省略，但是表达式的分隔符必须存在，表示站位

示例代码

for ( var i = 0; i < 10; i++ ) {
    console.log( i );
}

跳转语句

描述

• 当前执行的JavaScript代码，从当前位置跳转到另一个位置

跳转语句的注意

• 跳转语句只能用于循环语句中，而不能用于条件判断结构
• switch...case语句 中使用的 break语句，不是 break 的用法，而是 switch语句 的需要

break语句

• 表示结束整体循环

示例代码

for ( var s = 0; s < 10; s++ ) {
    if ( s == 4 ) {
        break;
    }
    console.log( s );// 显示 0 1 2 3 
}

continue语句

• 表示结束本次循环

示例代码

for ( var i = 0; i < 10; i++ ) {
    if ( i == 4 ) {
        continue;
    }
    console.log( i );// 显示 0 1 2 3   5 6 7 8 9
}