您现在的位置是:网站首页 > 流程控制语句文章详情

流程控制语句

流程控制语句的基本概念

流程控制语句是编程中用于控制代码执行顺序的结构。它们决定了代码块是否执行、执行多少次以及在什么条件下执行。JavaScript中的流程控制语句主要分为条件语句和循环语句两大类。

// 最简单的if语句示例
if (true) {
  console.log('这行代码会执行');
}

条件语句

if语句

if语句是最基础的条件判断结构,根据条件表达式的布尔值决定是否执行代码块。

let age = 18;
if (age >= 18) {
  console.log('你已经成年了');
}

if...else语句

当需要处理两种对立情况时,可以使用if...else结构。

let temperature = 25;
if (temperature > 30) {
  console.log('天气很热');
} else {
  console.log('天气不算太热');
}

else if多条件判断

对于多个互斥条件的情况,可以使用else if链。

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

switch语句

switch语句适合处理多个固定值的条件判断,比多个if...else更清晰。

let day = 3;
let dayName;
switch (day) {
  case 1:
    dayName = '星期一';
    break;
  case 2:
    dayName = '星期二';
    break;
  case 3:
    dayName = '星期三';
    break;
  default:
    dayName = '未知';
}
console.log(dayName); // 输出"星期三"

循环语句

while循环

while循环在条件为真时重复执行代码块。

let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

do...while循环

do...while循环至少执行一次,然后检查条件。

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 3);

for循环

for循环是最常用的循环结构,包含初始化、条件和迭代三部分。

for (let i = 0; i < 5; i++) {
  console.log(i);
}

for...in循环

for...in循环用于遍历对象的可枚举属性。

const person = {name: 'Alice', age: 25};
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

for...of循环

for...of循环用于遍历可迭代对象(如数组、字符串等)。

const colors = ['red', 'green', 'blue'];
for (let color of colors) {
  console.log(color);
}

循环控制语句

break语句

break语句用于立即退出循环。

for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i); // 只输出0到4
}

continue语句

continue语句跳过当前迭代,继续下一次循环。

for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i); // 输出0,1,3,4
}

标签语句

标签语句可以与break或continue配合使用,控制多层循环的流程。

outerLoop: 
for (let i = 0; i < 3; i++) {
  innerLoop:
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break outerLoop;
    }
    console.log(`i=${i}, j=${j}`);
  }
}

三元运算符

三元运算符是简化的条件表达式,适合简单的条件赋值。

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

逻辑运算符的短路特性

逻辑运算符&&和||可以用于条件执行,利用它们的短路特性。

// && 当第一个操作数为真时,才执行第二个操作数
let isLoggedIn = true;
isLoggedIn && console.log('用户已登录');

// || 当第一个操作数为假时,才执行第二个操作数
let name = '';
console.log(name || '匿名用户'); // 输出"匿名用户"

异常处理中的流程控制

try...catch...finally结构也属于流程控制,用于处理可能出现的错误。

try {
  // 可能出错的代码
  let result = riskyOperation();
  console.log(result);
} catch (error) {
  // 错误处理
  console.error('发生错误:', error.message);
} finally {
  // 无论是否出错都会执行
  console.log('操作完成');
}

现代JavaScript中的流程控制

可选链操作符(?.)

可选链操作符简化了对可能为null或undefined的属性的访问。

const user = {
  profile: {
    name: 'Alice'
  }
};
console.log(user?.profile?.name); // "Alice"
console.log(user?.address?.city); // undefined而不是报错

空值合并运算符(??)

空值合并运算符提供默认值,仅在左侧为null或undefined时返回右侧值。

let input = null;
let value = input ?? '默认值';
console.log(value); // "默认值"

异步流程控制

Promise和async/await

现代JavaScript使用Promise和async/await处理异步操作流程。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}
fetchData();

函数式编程中的流程控制

数组方法替代循环

高阶函数如map、filter、reduce等可以替代传统循环。

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 15

性能考虑

不同的流程控制结构在性能上可能有细微差别,特别是在循环大量数据时。

// 测试for循环和forEach的性能
const largeArray = Array(1000000).fill(0);

console.time('for loop');
for (let i = 0; i < largeArray.length; i++) {
  // 空循环
}
console.timeEnd('for loop');

console.time('forEach');
largeArray.forEach(() => {
  // 空循环
});
console.timeEnd('forEach');

我的名片

网名:~川~

岗位:console.log 调试员

坐标:重庆市-九龙坡区

邮箱:cc@qdcc.cn

沙漏人生

站点信息

  • 建站时间:2013/03/16
  • 本站运行
  • 文章数量
  • 总访问量
微信公众号
每次关注
都是向财富自由迈进的一步