Skip to content

JavaScript 条件语句

条件语句的概念

条件语句是 JavaScript 中的一种控制流语句,用于根据不同的条件执行不同的代码块。条件语句允许程序根据特定条件做出决策,从而执行相应的操作。

if 语句

if 语句是最基本的条件语句,用于在条件为真时执行代码块:

基本语法

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

示例

javascript
let age = 18;

if (age >= 18) {
  console.log("You are an adult.");
}

// 输出: You are an adult.

if...else 语句

if...else 语句用于在条件为真时执行一个代码块,在条件为假时执行另一个代码块:

基本语法

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

示例

javascript
let age = 16;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

// 输出: You are a minor.

if...else if...else 语句

if...else if...else 语句用于在多个条件中选择一个执行:

基本语法

javascript
if (condition1) {
  // 条件1为真时执行的代码
} else if (condition2) {
  // 条件2为真时执行的代码
} else {
  // 所有条件都为假时执行的代码
}

示例

javascript
let score = 85;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else if (score >= 70) {
  console.log("Grade: C");
} else if (score >= 60) {
  console.log("Grade: D");
} else {
  console.log("Grade: F");
}

// 输出: Grade: B

嵌套 if 语句

if 语句可以嵌套在另一个 if 语句中:

基本语法

javascript
if (condition1) {
  // 条件1为真时执行的代码
  if (condition2) {
    // 条件2为真时执行的代码
  }
}

示例

javascript
let age = 20;
let hasLicense = true;

if (age >= 18) {
  console.log("You are old enough to drive.");
  if (hasLicense) {
    console.log("You can drive.");
  } else {
    console.log("You need a license to drive.");
  }
} else {
  console.log("You are too young to drive.");
}

// 输出:
// You are old enough to drive.
// You can drive.

条件表达式

条件表达式(也称为三元运算符)是一种简洁的条件语句:

基本语法

javascript
condition ? expression1 : expression2;

如果条件为真,则返回 expression1;否则返回 expression2。

示例

javascript
let age = 18;
let message = age >= 18 ? "You are an adult." : "You are a minor.";
console.log(message);

// 输出: You are an adult.

let x = 10;
let y = 20;
let max = x > y ? x : y;
console.log(max);

// 输出: 20

条件语句的最佳实践

1. 保持条件简洁

条件应该简洁明了,避免过于复杂的条件:

javascript
// 好的做法
if (isAdult && hasLicense) {
  // 代码
}

// 不好的做法
if (age >= 18 && hasLicense === true && !isSuspended) {
  // 代码
}

2. 使用括号

即使条件语句只有一条语句,也应该使用花括号包围,以提高代码的可读性和可维护性:

javascript
// 好的做法
if (condition) {
  doSomething();
}

// 不好的做法
if (condition) doSomething();

3. 避免嵌套过深

避免过多的嵌套 if 语句,以提高代码的可读性:

javascript
// 好的做法
if (!isValid) {
  return error;
}

if (!hasPermission) {
  return error;
}

// 处理逻辑

// 不好的做法
if (isValid) {
  if (hasPermission) {
    // 处理逻辑
  } else {
    return error;
  }
} else {
  return error;
}

4. 使用早期返回

对于错误情况或特殊情况,使用早期返回可以减少嵌套:

javascript
// 好的做法
function processInput(input) {
  if (!input) {
    return "Input is required";
  }

  if (input.length < 3) {
    return "Input must be at least 3 characters";
  }

  // 处理逻辑
  return "Success";
}

// 不好的做法
function processInput(input) {
  if (input) {
    if (input.length >= 3) {
      // 处理逻辑
      return "Success";
    } else {
      return "Input must be at least 3 characters";
    }
  } else {
    return "Input is required";
  }
}

5. 使用常量

对于固定的条件值,使用常量可以提高代码的可读性和可维护性:

javascript
// 好的做法
const MIN_AGE = 18;
if (age >= MIN_AGE) {
  // 代码
}

// 不好的做法
if (age >= 18) {
  // 代码
}

6. 避免使用魔法数字

避免在条件中使用没有解释的数字(魔法数字):

javascript
// 好的做法
const MAX_SCORE = 100;
const PASSING_SCORE = 60;
if (score >= PASSING_SCORE && score <= MAX_SCORE) {
  // 代码
}

// 不好的做法
if (score >= 60 && score <= 100) {
  // 代码
}

条件语句的常见错误

1. 使用赋值运算符而不是比较运算符

javascript
// 错误:使用了赋值运算符 = 而不是比较运算符 == 或 ===
if ((age = 18)) {
  // 代码
}

// 正确
if (age === 18) {
  // 代码
}

2. 忘记使用花括号

javascript
// 错误:如果添加第二条语句,它不会受到 if 条件的控制
if (condition) doSomething();
doSomethingElse(); // 这条语句总是会执行

// 正确
if (condition) {
  doSomething();
  doSomethingElse();
}

3. 条件过于复杂

javascript
// 错误:条件过于复杂
if (
  (age >= 18 && hasLicense) ||
  (age >= 16 && hasLearnersPermit && isSupervised)
) {
  // 代码
}

// 正确:将复杂条件分解为变量
const canDrive =
  (age >= 18 && hasLicense) || (age >= 16 && hasLearnersPermit && isSupervised);
if (canDrive) {
  // 代码
}

4. 嵌套过深

javascript
// 错误:嵌套过深
if (condition1) {
  if (condition2) {
    if (condition3) {
      // 代码
    }
  }
}

// 正确:使用早期返回或组合条件
if (!condition1) return;
if (!condition2) return;
if (!condition3) return;
// 代码

小结

条件语句是 JavaScript 中的基本控制流语句,用于根据不同的条件执行不同的代码块。JavaScript 提供了多种条件语句,包括 ifif...elseif...else if...else 和条件表达式(三元运算符)。在使用条件语句时,应该遵循最佳实践,保持条件简洁,避免嵌套过深,使用早期返回等技巧,以提高代码的可读性和可维护性。