JavaScript中的语句个人分享

语句

语句的概述

• 在JavaScript中,语句使用分号( ; )进行分隔.
• 可以在一行编写一条语句,也可以在一行编写多条语句
• 语句分类分别是:

1. 条件语句: 就是根据一个值判断是执行还是跳过指定语句
2. 循环语句: 就是根据一个值判断是否需要重复执行指定语句
3. 跳转语句: 就是跳转到指定语句

• 注意:

1. 建议一行尽量只编写一行语句 - 原因: 是便于提高代码的阅读性
2. JavaScript解释器是按照语句的编写顺序依次进行执行的

---

语句块

• JavaScript中使用一对大括号( {} )表示一个语句块

示例代码:

if (v = '一花一世界') {
    console.log('');
}

---

空语句

• 空语句就是不编写任何内容,JavaScript解释器不会做任何执行操作
• 注意: 如果有需要用空语句的地方最好添加注释

示例代码:

;// 表示空语句

---

条件语句

• 条件语句就是通过判断指定的计算结果来决定是执行还是跳过指定语句块

if语句

• 语法:
  if (条件表达式) {

     语句块 - 当条件表达式计算结果为true时才执行

  }

• 条件表达式:

  • 作用 - 控制是否执行指定的语句块
  • 结果 - 一般为Boolean类型的值(true | false)

  • 问题 - 如果条件表达式计算的结果不是Boolean类型

    • 将结果强行转换为Boolean类型，再进行判断

示例代码:

var result = true;// boolean类型值

if (result) {
    console.log('这是if语句执行的语句块...');
}


if (1 && 0) {
    console.log('这是if语句执行的语句块...');
}


var v;/* 定义变量，但不初始化 */
if (v = '一花一世界') {/* 将变量的初始化操作，放置在条件表达式中 */
    console.log('这是if语句执行的语句块...');
}
// 等价于以下写法
v = '一花一世界';/* 变量的初始化操作 */
if (v) {
    console.log('这是if语句执行的语句块...');
}

console.log('这是if语句执行完毕后的内容...');

if语句执行流程图:

---

if...else语句

• if...else语句是提供两个语句块进行判断如果是true就执行if,如果是false就执行else.

• 语法:

  if...else语句

  if (条件表达式) {

  语句块一

  } else {

  语句块二
  }

示例代码:

var result = false;

if (result) {
    console.log('这是语句块一...');
} else {
    console.log('这是语句块二...');
}

console.log('这是if语句执行完毕后的内容...');

if...else语句执行图:

---

if语句与if...else语句需要注意的事项

• 对应的语句块的大括号"{}" - 允许被省略的

  • 前提 - 当前语句块中只存在一条语句时
• 省略大括号"{}"时，JavaScript默认认为后面的第一条语句是被控制的语句块内容
• 所以不建议省略,建议按照语法规则编写

示例代码:

if (result)
    console.log('这是if语句执行的语句块1...');
console.log('这是if语句执行的语句块2...');
console.log('这是if语句执行的语句块3...');

console.log('这是if语句执行完毕后的内容...');

控制台调用结果对比图:

---

---

if...else语句嵌套

• if...else语句支持嵌套,就是说可以在if或else后的语句块中继续编写if...else语句来进行跟多个判断
• 注意: 不建议嵌套三个以上 - 原因会影响性能

示例代码:

var score = 81;

if (score > 90) {
    console.log('优秀');
} else {
    if (score > 80) {
        console.log('良好');
    } else {
        console.log('及格');
    }
}

/ 变量声明 - 并初始化值 /
var score = 81;
/ 条件表达式 /
if (score > 90) {

/* 调用输出 */
console.log('优秀');

} else {

/* 条件表达式 */
if (score > 80) {
    /* 调用输出 */
    console.log('良好');
} else {
    /* 调用输出 */
    console.log('及格');
}

}

---

else if语句

• else if语句时在if语句基础上,允许提供多个条件判断
• else if语句优化了if...else语句的嵌套写法 - 性能较好

示例代码:

/* 变量声明 - 并初始化值 */
var score = 65;
if (score > 90) {
    console.log('优秀');
} else if (score > 80) {
    console.log('良好');
} else {
    console.log('及格');
}

if...else语句与else if语句对比效果图:

---

switch...case语句

• switch...case语句又称枚举 - 将计算结果可能的值尽量的罗列完整

• 语法:
  switch (条件表达式) {

     case 值一:
         语句块一
     case 值二:
         语句块二
     ... ...
     default:
         语句块N

  • 条件表达式 - 不一定是Boolean类型，计算结果分别与case语句的值进行比较

    • 条件表达式计算结果与case语句的值是全等比较(既要比较值，也要比较类型)

  • case语句 - 罗列可能的匹配值

    • 对应的语句块最后添加 break 关键字 - 当执行对应的语句块之后，停止继续执行

  • default语句 - 类似于if...else语句中的else语句

    • 当以上所有case语句的值都不匹配时，默认执行default语句对应的语句块
• 注意 - 不是default语句不需要使用break关键字，而是default默认一般被编写在最后

示例代码:

var result = '0';

switch (result) {
    case 0:
        console.log('这是数字0');
        break;
    case 1:
        console.log('这是数字1');
        break;
    default:
        console.log('以上结果无一满足');
}

switch...case语句代码分析图:

switch...case语句执行流程图:

---

循环语句

• 循环语句就是重复执行特定的语句达到循环效果

while语句

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

• 注意: 必须通过一个变量值的改变，控制条件表达式的计算结果

  • 在循环的过程中，至少有一次计算结果为false -> 结束循环
• 如果没有这样的一个变量的话 -> 循环叫做死循环

示例代码:

/* 变量声明并赋值 */
var result = 1;
/* 条件表达式 */
while (result <= 10) {
    console.log('这是while循环语句执行...');
    /* 利用自增停止循环效果 */
    result++;// 改变变量的值，至少有一次让条件表达式计算的结果为false
}

console.log('这是while循环语句执行完毕后...');

控制台效果图:

while语句的执行流程图:

---

do...while语句

• 语法:

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

• 注意:

1. while关键字后面的小括号"( )"不能省略
2. while关键字后面的条件判断的结果必须是布尔值,如果不是JavaScript会自动转换成布尔值
3. while语句中的大括号"{ }"可以省略,但是不建议省略,以便提高代码的阅读性

示例代码:

/* 变量声明并赋值 */
var result = 0;

do {
    console.log(result);
    /* 利用自增结束循环 */
    result++;
    /* 条件表达式 */
} while (result <= 10);

• 备注: while语句与do...while语句的区别

  • while语句 - 是先判断，再执行
  • do...while语句 - 是先执行，再判断

---

for语句

• for语句时一种简洁的循环语句,其中包括三个重要的部分

1. 初始化表达式 - 用于初始化控制循环的变量
2. 条件判断表达式 - 用于判断是否要结束循环
3. 循环控制表达式 - 用于控制结束循环的节点

• 注意:

1. for语句的语法要求并不强制必须定义以上三个表达式
2. 一旦省略三个表达式的话，表达式的分隔符必须存在

• 语法:

for (初始化表达式; 条件判断表达式; 循环控制表达式) {
语句块
}
示例代码:

/* 变量声明并初始化值 */
var v = 0;
for (var v = 0; v < 10; v++) {
    console.log(v);
}

控制台调用结果图:

while语句与for语句对比图:

---

跳转语句

• 作用 - JavaScript代码从指定位置跳转到另一个指定的位置

• 场景 - 跳转语句只能用于循环执行结构，而不能用于条件判断结构

  • 注意 - switch...case语句中使用的break，并不是break的用法，而是switch语句的用法

---

break语句

• 表示结束整体循环

示例代码:

for (var i=0; i<9; i++) {
    if (i == 4) {
        break;
    }
    console.log(i);
}

调用台效果图:

---

continue语句

• 表示结束本次循环

示例代码:

for (var i=0; i<9; i++) {
    if (i == 4) {
        continue;
    }
    console.log(i);
}

控制台效果图: