JavaScript条件语句与循环语句

程序员桔子
176 阅读6分钟

之前的文章中在区块部分有提到循环语句，今天就来详细聊聊条件语句和循环语句的语法、作用和使用场景。

1.条件语句

在JavaScript中，有if 和Switch两种条件语句，即如果满足其中的条件就会执行相应的语句。

if结构

if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是 JavaScript 的两个特殊值，true表示“真”，false表示“伪”。为true时就会执行后面的语句，为false时则跳过后面的语句

if (布尔值){
  语句;
}

// 或者if (布尔值) 语句;适用于语句简单的情况

if(true){ //为true时执行console.log(123)，从而打印123
    console.log(123)
}

if( 2 > 3) { //因为括号内表达式的结果是false,所以不会执行之后的语句
    console.log(123)
}

if ... else 结构

在if结构后面加上else代码块，代表不满足if中的条件时执行else中的代码

if( 2 > 3) {
    console.log(123)
} else {
    console.log(456)
}

还是拿上一个 2 > 3举例。因为不满足if中的条件，那么就会执行console.log(456)从而打印456。
对同一个变量进行多次判断时，多个if...else语句可以连写在一起。

if (grade > 80) {
  // ...
} else if (grade > 60) {
  // ...
} else if (grade === 60) {
  // ...
} else {
  // ...
}

switch 结构

上述多个if ... else连用的情况可以用Switch结构取代

let fruit = 'banana'
switch (fruit) {
  case "banana":
  //满足banana情况下的执行代码
   console.log('banana')
   break;
  case "apple":
  //满足apple情况下的执行代码
  console.log('apple')
    break;
  default:
    // 默认内容
    console.log('该水果不是香蕉或苹果')
}

执行上述代码我们可以很明显的知道它会执行这一段代码：console.log('banana')，从而打印banana。因为fruit的值是banana，满足case是banana的条件分支。如果所有的case都不符合的话会执行default中的语句
注意，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构，从而陷入无限循环。
当然了，switch语句部分和case语句部分也可以是表达式。例如下面的代码，是永远不会执行default代码块中的代码的:

switch (1 + 1) {
  case 2:
    console.log(2)
    break;
  default:
    console.log('打印默认值')
}

break 语句和 continue 语句

在上述的switch条件结构中我们有看到break，它的作用想必大家都已经猜到了，就是跳出代码块和循环。这里就简单介绍一下break语句以及有着类似效果的continue语句。两者都具有跳转的作用，可以不让代码按照既定的顺序执行。
在for循环中使用break语句跳出循环。

for (var i = 0; i < 10; i++) {
    console.log(i);
    if (i === 3){
        break;
    }
}
//上述代码只会执行到3就跳出循环 故打印结果为 0 1 2 3

在while循环中使用break

var i = 0;

while(i < 100) {
  console.log(i);
  i++;
  if (i === 5) break;
}
//上述代码只会执行5次就跳出循环

而continue语句则用于立刻终止本轮循环，开始下一轮新的循环。可以理解为跳过本次循环，继续下一轮循环。我们来举个例子：
你邀请了一些朋友参加聚会，你会给他们准备巧克力作为小礼物。而出于安全性考虑，决定不给那些带了宠物的朋友分发礼物，以免宠物误食巧克力对其造成一定的副作用。这时我们可以用continue对到达的朋友进行筛选，如果朋友带了宠物，则跳过发放礼物的环节，继续给下一位朋友发放。
我们可以使用对象数组定义参会朋友，并通过hasPet字段判断其有没有带宠物。

let guests = [
    { name: "Alice", hasPet: true },
    { name: "Bob", hasPet: false },
    { name: "Carol", hasPet: false },
    { name: "Dave", hasPet: true },
    { name: "Eve", hasPet: false }
];

console.log("分发聚会礼物：");

for (let i = 0; i < guests.length; i++) {
    if (guests[i].hasPet) { //判断朋友带了宠物
        console.log(guests[i].name + " 带了宠物，跳过分发礼物。");
        continue; // 跳过这位带宠物的朋友
    }
    // 为没有带宠物的朋友准备礼物
    console.log("给 " + guests[i].name + " 一份礼物。");
}

运行结果：
分发聚会礼物：
Alice 带了宠物，跳过分发礼物。
给 Bob 一份礼物。
给 Carol 一份礼物。
Dave 带了宠物，跳过分发礼物。
给 Eve 一份礼物。

2.循环语句

循环语句用于重复执行一段代码块，直到指定的条件不再满足。这对于处理数组、对象集合或执行任何重复任务时非常有用。

for循环

这是最常见的循环形式，用于当你知道循环应该执行的次数时。它包含三个部分：初始化表达式、条件表达式和递增表达式。

  • 初始化表达式：确定循环变量的初始值，只在循环开始时执行一次。
  • 条件表达式：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环。
  • 递增表达式：每轮循环的最后一个操作，通常用来递增循环变量。
for (初始化表达式; 条件表达式; 递增表达式) {
  语句
}
for (let i = 0; i < 10; i++) {
    console.log(i); //输出0 1 2 3 4 5 6 7 8 9 
}

在这个例子中，循环从0开始计数，增加到9。每次循环增加1。
所有的for循环都可以改写为while循环：

var x = 10
while( i < x){
    console.log(i)
    i++
}

for语句的三个部分，可以省略任何一个，也可以全部省略。下列代码省略了for语句表达式的三个部分，结果就导致了一个无限循环。

for ( ; ; ){
  console.log('无限循环');
}

while循环

while语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。

while (条件) {
  语句;
}

例如：
var i= 0；
while( i < 10){
    console.log(i)
    i = i + 1
}

//上述代码块中的语句会循环执行10次，直到i = 10不满足条件时退出循环

do...while循环

与while循环不同的是do...while会先执行一次循环体，然后再进行循环。该循环最大的特点就是不论条件是真是假，循环都至少会执行一次，需要注意的是，while后的分号;不能省略

do {
  语句
} while (条件);

例如：
var x = 10;
var i = 0;

do {
  console.log(i);
  i++;
} while(i < x);
avatar
文章
阅读
粉丝