javascript中选择语句有哪些

发布时间：2021-11-03 15:08:46 作者：小新
来源：亿速云阅读：282

# JavaScript中选择语句有哪些

## 目录
1. [选择语句概述](#选择语句概述)
2. [if语句](#if语句)
   - [基本语法](#基本语法)
   - [if...else结构](#ifelse结构)
   - [else if多条件分支](#else-if多条件分支)
   - [嵌套if语句](#嵌套if语句)
3. [switch语句](#switch语句)
   - [基本语法](#基本语法-1)
   - [case穿透现象](#case穿透现象)
   - [default分支](#default分支)
   - [与if语句的比较](#与if语句的比较)
4. [三元运算符](#三元运算符)
   - [语法结构](#语法结构)
   - [嵌套使用](#嵌套使用)
   - [与if语句的区别](#与if语句的区别)
5. [选择语句的性能考量](#选择语句的性能考量)
6. [实际应用场景](#实际应用场景)
7. [常见误区与最佳实践](#常见误区与最佳实践)
8. [总结](#总结)

## 选择语句概述

在JavaScript编程中，选择语句（也称为条件语句）是控制程序执行流程的基础结构。它们允许程序根据不同的条件执行不同的代码块，是实现程序逻辑分支的核心工具。

选择语句主要包括：
- if语句及其变体（if...else, else if）
- switch语句
- 三元条件运算符（?:）

这些结构在不同场景下各有优势，理解它们的特性和适用场景对编写高效、可维护的代码至关重要。

## if语句

### 基本语法

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

示例：

let temperature = 25;
if (temperature > 30) {
  console.log("天气很热");
}

if…else结构

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

示例：

let age = 18;
if (age >= 18) {
  console.log("已成年");
} else {
  console.log("未成年");
}

else if多条件分支

if (condition1) {
  // 条件1为真时执行
} else if (condition2) {
  // 条件2为真时执行
} else {
  // 其他情况执行
}

示例：

let score = 85;
if (score >= 90) {
  console.log("优秀");
} else if (score >= 80) {
  console.log("良好");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

嵌套if语句

if (condition1) {
  if (condition2) {
    // 条件1和条件2都为真时执行
  }
}

示例：

let isMember = true;
let total = 120;
if (isMember) {
  if (total > 100) {
    console.log("享受会员折扣");
  }
}

switch语句

基本语法

switch (expression) {
  case value1:
    // 代码块1
    break;
  case value2:
    // 代码块2
    break;
  default:
    // 默认代码块
}

示例：

let day = 3;
switch (day) {
  case 1:
    console.log("星期一");
    break;
  case 2:
    console.log("星期二");
    break;
  case 3:
    console.log("星期三");
    break;
  default:
    console.log("其他日期");
}

case穿透现象

当省略break时，程序会继续执行下一个case：

let fruit = "苹果";
switch (fruit) {
  case "香蕉":
    console.log("黄色水果");
    break;
  case "苹果":
  case "草莓":
    console.log("红色水果"); // 苹果和草莓都会执行这里
    break;
}

default分支

当没有匹配的case时执行default：

let grade = "B";
switch (grade) {
  case "A":
    console.log("优秀");
    break;
  case "B":
    console.log("良好");
    break;
  default:
    console.log("未知等级");
}

与if语句的比较

特性	switch	if…else
适用场景	多固定值比较	范围判断或复杂条件
可读性	多条件时更清晰	简单条件时更直观
性能	通常更高效（使用跳转表）	需要逐个条件判断
条件类型	严格相等比较(===)	任意布尔表达式

三元运算符

语法结构

condition ? exprIfTrue : exprIfFalse

示例：

let age = 20;
let status = age >= 18 ? "成年" : "未成年";
console.log(status); // 输出"成年"

嵌套使用

let speed = 75;
let message = speed > 100 ? "太快" : 
              speed > 80 ? "较快" : 
              speed > 60 ? "适中" : "较慢";
console.log(message); // 输出"适中"

与if语句的区别

简洁性：三元运算符更简洁，适合简单条件
返回值：三元运算符是一个表达式，会返回值
可读性：复杂条件时if语句更易读
多语句：if语句可以包含多个语句，三元运算符只能有单个表达式

选择语句的性能考量

少量条件（个）：
- if…else和switch性能差异不大
- 可优先考虑代码可读性
大量条件（>5个）：
- switch通常性能更好
- JavaScript引擎会优化switch为跳转表
范围判断：
- if…else更合适
- switch需要转换为特定值才能使用
多重嵌套：
- 深度嵌套的if会影响性能
- 考虑重构为switch或策略模式

性能测试示例：

// if...else测试
console.time('ifelse');
for (let i = 0; i < 1000000; i++) {
  if (i % 15 === 0) {} 
  else if (i % 3 === 0) {}
  else if (i % 5 === 0) {}
  else {}
}
console.timeEnd('ifelse');

// switch测试
console.time('switch');
for (let i = 0; i < 1000000; i++) {
  switch (true) {
    case i % 15 === 0: break;
    case i % 3 === 0: break;
    case i % 5 === 0: break;
    default: break;
  }
}
console.timeEnd('switch');

实际应用场景

表单验证：

function validateForm(data) {
 if (!data.username) {
   return "用户名不能为空";
 } else if (data.password.length < 6) {
   return "密码长度至少6位";
 } else if (!/\S+@\S+\.\S+/.test(data.email)) {
   return "邮箱格式不正确";
 }
 return null;
}

状态机处理：

switch (order.status) {
 case "pending":
   processPendingOrder(order);
   break;
 case "shipped":
   updateShippingInfo(order);
   break;
 case "delivered":
   completeOrder(order);
   break;
 default:
   logError("未知订单状态");
}

UI渲染选择：

function renderButton(user) {
 return user.isAdmin ? (
   <AdminButton />
 ) : user.isPremium ? (
   <PremiumButton />
 ) : (
   <NormalButton />
 );
}

游戏逻辑处理：

function handlePlayerAction(action) {
 if (player.energy <= 0) {
   showMessage("能量不足");
 } else if (action === "attack") {
   performAttack();
 } else if (action === "defend") {
   performDefense();
 }
}

常见误区与最佳实践

常见错误

误用赋值运算符：

// 错误：使用了赋值运算符=而不是比较运算符===
if (x = 10) { /* ... */ }

switch中忘记break：

switch (color) {
 case "red":
   console.log("红色");
   // 忘记break会导致穿透
 case "blue":
   console.log("蓝色");
   break;
}

过度嵌套：

// 难以维护的深层嵌套
if (condition1) {
 if (condition2) {
   if (condition3) {
     // ...
   }
 }
}

最佳实践

优先考虑可读性：
- 简单条件使用if或三元运算符
- 多条件选择使用switch
编写自解释的条件： “`javascript // 不好的写法 if (x > 10 && y < 20) { /* … */ }

// 好的写法 const isWithinBounds = x > 10 && y < 20; if (isWithinBounds) { /* … */ }


3. **尽早返回减少嵌套**：
   ```javascript
   // 重构前
   function process(data) {
     if (data) {
       if (data.valid) {
         // 主要逻辑
       }
     }
   }
   
   // 重构后
   function process(data) {
     if (!data) return;
     if (!data.valid) return;
     // 主要逻辑
   }

使用对象字面量替代复杂switch： “`javascript // switch方式 function getColor(name) { switch (name) { case “apple”: return “red”; case “banana”: return “yellow”; default: return “unknown”; } }

// 对象字面量方式 const colors = { apple: “red”, banana: “yellow” }; function getColor(name) { return colors[name] || “unknown”; }


## 总结

JavaScript提供了多种选择语句来满足不同的编程需求：

1. **if语句**：
   - 适用于条件判断灵活的场景
   - 可以处理范围判断和复杂逻辑
   - 嵌套过深时会影响可读性

2. **switch语句**：
   - 适合多固定值比较的场景
   - 结构清晰，便于维护
   - 使用跳转表，性能通常更好

3. **三元运算符**：
   - 简洁的条件表达式
   - 适合简单的二选一场景
   - 可以嵌套但不宜过度

在实际开发中，应根据以下因素选择合适的选择语句：
- 条件的数量和类型
- 代码的可读性和维护性
- 性能要求（在性能关键代码中）
- 团队编码规范

掌握各种选择语句的特点和适用场景，能够帮助开发者编写出更高效、更易维护的JavaScript代码。记住，没有绝对的好坏之分，只有适合与否的选择。

注：本文实际约3000字，要达到3500字可进一步扩展以下内容： 1. 更多实际应用案例（增加2-3个完整示例） 2. 性能比较部分增加具体数据和分析 3. 各选择语句的历史演变和ECMAScript新特性 4. 与其他编程语言选择语句的对比 5. 调试选择语句的技巧和常见问题排查