条件语句

概述

条件语句是编程中的基础控制结构，用于根据不同条件执行不同的代码。JavaScript 提供了多种条件语句：

  • if...else 语句
  • switch 语句
  • 三元运算符

if...else语句

if else 基本格式

最基本的条件语句形式：

if (condition) {
  // 条件为真时执行的代码
}
else {
  // 条件为假时执行的代码
}

示例

let shoppingData = false
let childAllowance
if (shoppingData === true) {
    childAllowance = 10;
} else {
    childAllowance = 5
}

else if语句

处理多个条件的情况：

<label for='weather'>今天的天气是:</label>
<select id='weather'>
    <option value='sunny'>晴天</option>
    <option value='cloudy'>阴天</option>
    <option value='rainy'>雨天</option>
    <option value='stormy'>暴风雨</option>
</select>
<p></p>

const select = document.querySelector('select')
const para = document.querySelector('p')

function setWeather() {
    const choice = select.value

    if (choice === "sunny") {
        para.textContent = "今天是晴天"
    } else if (choice === "cloudy") {
        para.textContent = "今天是阴天"
    } else if (choice === "rainy") {
        para.textContent = "今天是雨天"
    } else if (choice === "stormy") {
        para.textContent = "今天是暴风雨"
    } else {
        para.textContent = ""
    }
}

比较运算符

运算符说明示例
===严格相等a === b
!==严格不等a !== b
<小于a < b
>大于a > b
<=小于等于a <= b
>=大于等于a >= b

示例

let cheese = "cheddar"
if (cheese) {
    console.log("true")
} else {
    console.log('False')
}

嵌套 if...else

if (choice === 'sunny') {
    if (temperature < 86) {
        para.textContent = `外面现在是 ${temperature} 华氏度——风和日丽。`;
    } else if (temperature >= 86) {
        para.textContent = `外面现在是 ${temperature} 华氏度——很热！`;
    }
}

逻辑关系

运算符名称说明示例
&&逻辑与两个条件都为真a && b
||逻辑或至少一个条件为真a || b
!逻辑非取反!a

switch

基本语法

switch (表达式) {
  case 选择1:
    运行这段代码
    break;

  case 选择2:
    否则，运行这段代码
    break;

  // 可以有更多的 case

  default:
    // 所有 case 都不匹配时执行
}

示例

<label for="weather">选择今天的天气：</label>
<select id="weather">
  <option value="">--作出选择--</option>
  <option value="sunny">晴天</option>
  <option value="rainy">雨天</option>
  <option value="snowing">雪天</option>
  <option value="overcast">阴天</option>
</select>

<p></p>

const select = document.querySelector("select");
const para = document.querySelector("p");

select.addEventListener("change", setWeather);

function setWeather() {
  const choice = select.value;

  switch (choice) {
    case "sunny":
      para.textContent = "阳光明媚，适合外出";
      break;
    case "rainy":
      para.textContent = "下雨天，记得带伞";
      break;
    case "snowing":
      para.textContent = "下雪天，注意保暖";
      break;
    case "overcast":
      para.textContent = "阴天，可能会下雨";
      break;
    default:
      para.textContent = "";
  }
}

三元运算符

三元运算符是 if-else 的简写形式：

// 语法
condition ? expressionIfTrue : expressionIfFalse

示例 1

const greeting = isBrithday
  ? "Happy birthday!"
  : "Good day!";

示例 2

<label for="theme">选择主题：</label>
<select id="theme">
    <option value='while'>白</option>
    <option value='black'>黑</option>
</select>
<h1>this is home page</h1>

const select = document.querySelector("select");
const html = document.querySelector("html");

function update(bgColor, textColor) {
    html.style.background = bgColor
    html.style.color = textColor
}

select.addEventListener("change", () => {
    select.value === "black"
        ? update("black", "white")
        : update("white", "black")
})
最近更新时间: