您现在的位置是:网站首页 > 流程控制语句文章详情
流程控制语句
陈川
【
JavaScript
】
4485人已围观
4362字
流程控制语句的基本概念
流程控制语句是编程中用于控制代码执行顺序的结构。它们决定了代码块是否执行、执行多少次以及在什么条件下执行。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');