条件语句

目录

• 概述
• if…else语句
  • if else 基本格式
  • 示例
  • else if语句
  • 比较运算符
  • 示例
  • 嵌套 if…else
  • 逻辑关系
• switch
  • 基本语法
  • 示例
• 三元运算符
  • 示例 1
  • 示例 2

---

概述

条件语句根据不同的条件执行不同的代码。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")
})