跳到主要内容

JavaScript 循环技巧

在JavaScript编程中，循环是程序流控制的核心部分。掌握循环不仅仅是了解基本语法，更重要的是学会一些实用技巧，这些技巧可以让你的代码更加简洁、高效和易于维护。本文将介绍JavaScript循环的各种技巧，从基础到进阶，帮助你更好地控制程序流程。

循环基础回顾​

在深入技巧之前，让我们简要回顾JavaScript中的基本循环类型：

  1. for循环：最常见的循环结构
  2. while循环：当条件为真时执行代码块
  3. do...while循环：至少执行一次代码块
  4. for...in循环：遍历对象的属性
  5. for...of循环：遍历可迭代对象的值

技巧1：巧用循环计数器​

递增与递减​

javascript
// 正向循环
for (let i = 0; i < 5; i++) {
  console.log(i); // 输出: 0, 1, 2, 3, 4
}

// 反向循环
for (let i = 4; i >= 0; i--) {
  console.log(i); // 输出: 4, 3, 2, 1, 0
}

自定义步长​

javascript
// 步长为2
for (let i = 0; i < 10; i += 2) {
  console.log(i); // 输出: 0, 2, 4, 6, 8
}
提示

反向循环在某些情况下可以提高性能，特别是当你需要从数组末尾开始处理元素时。

技巧2：提前中断循环​

使用break语句​

当满足特定条件时立即退出循环：

javascript
const numbers = [1, 2, 3, 4, 5, 6];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] === 4) {
    console.log('找到数字4，退出循环');
    break;
  }
  console.log(numbers[i]);
}
// 输出:
// 1
// 2
// 3
// 找到数字4，退出循环

使用continue语句​

跳过当前迭代，继续下一次循环：

javascript
for (let i = 0; i < 5; i++) {
  if (i === 2) {
    console.log('跳过数字2');
    continue;
  }
  console.log(i);
}
// 输出:
// 0
// 1
// 跳过数字2
// 3
// 4

技巧3：循环嵌套与性能优化​

基本嵌套循环​

javascript
for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    console.log(`i=${i}, j=${j}`);
  }
}

优化嵌套循环​

在处理大型数据集时，嵌套循环可能导致性能问题。这里有一些优化技巧：

javascript
// 缓存数组长度，避免在每次迭代中重新计算
const arr = [1, 2, 3, 4, 5];
for (let i = 0, len = arr.length; i < len; i++) {
  console.log(arr[i]);
}

// 减少不必要的嵌套深度
const matrix = [[1,2], [3,4], [5,6]];
for (let i = 0; i < matrix.length; i++) {
  const row = matrix[i];
  for (let j = 0; j < row.length; j++) {
    console.log(row[j]);
  }
}

技巧4：使用for...of处理可迭代对象​

for...of是ES6引入的一种更简洁的循环方式，特别适合处理数组和其他可迭代对象：

javascript
const fruits = ['苹果', '香蕉', '橙子'];

// 使用传统for循环
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// 使用for...of循环（更简洁）
for (const fruit of fruits) {
  console.log(fruit);
}

结合析构赋值使用​

javascript
const entries = [['name', '小明'], ['age', 25], ['city', '北京']];

// 使用析构赋值简化代码
for (const [key, value] of entries) {
  console.log(`${key}: ${value}`);
}
// 输出:
// name: 小明
// age: 25
// city: 北京

技巧5：使用for...in遍历对象属性​

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

javascript
const person = {
  name: '张三',
  age: 30,
  job: '程序员'
};

for (const key in person) {
  if (Object.hasOwnProperty.call(person, key)) {
    console.log(`${key}: ${person[key]}`);
  }
}
// 输出:
// name: 张三
// age: 30
// job: 程序员
注意

使用for...in时，应该使用hasOwnProperty方法检查属性是否直接属于对象，而不是继承的。

技巧6：循环中的数组操作​

过滤元素​

javascript
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = [];

for (const num of numbers) {
  if (num % 2 === 0) {
    evenNumbers.push(num);
  }
}
console.log(evenNumbers); // 输出: [2, 4, 6]

转换元素​

javascript
const numbers = [1, 2, 3, 4, 5];
const squared = [];

for (let i = 0; i < numbers.length; i++) {
  squared.push(numbers[i] * numbers[i]);
}
console.log(squared); // 输出: [1, 4, 9, 16, 25]

技巧7：使用标签语句控制嵌套循环​

标签语句可以帮助你更精确地控制嵌套循环的流程：

javascript
outerLoop: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      console.log('跳出外层循环');
      break outerLoop; // 直接跳出外层循环
    }
    console.log(`i=${i}, j=${j}`);
  }
}

技巧8：循环优化与数组方法​

ES6提供了许多数组方法，可以替代传统循环，使代码更加简洁和可读：

javascript
const numbers = [1, 2, 3, 4, 5];

// 使用forEach方法
numbers.forEach((num, index) => {
  console.log(`索引${index}的值是${num}`);
});

// 使用map方法转换数组
const doubled = numbers.map(num => num * 2);
console.log(doubled); // 输出: [2, 4, 6, 8, 10]

// 使用filter方法过滤数组
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]

// 使用reduce方法计算总和
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 输出: 15

实际应用案例​

案例1：购物车商品计算​

javascript
const shoppingCart = [
  { name: '笔记本电脑', price: 6000, quantity: 1 },
  { name: '鼠标', price: 100, quantity: 2 },
  { name: '键盘', price: 200, quantity: 1 }
];

// 计算总价
let totalPrice = 0;
for (const item of shoppingCart) {
  totalPrice += item.price * item.quantity;
}
console.log(`购物车总价: ¥${totalPrice}`); // 输出: 购物车总价: ¥6400

案例2：构建数据表格​

javascript
const students = [
  { id: 1, name: '张三', score: 85 },
  { id: 2, name: '李四', score: 92 },
  { id: 3, name: '王五', score: 78 }
];

// 构建HTML表格
let tableHTML = '<table border="1"><tr><th>ID</th><th>姓名</th><th>分数</th><th>等级</th></tr>';

for (const student of students) {
  let grade;
  if (student.score >= 90) {
    grade = 'A';
  } else if (student.score >= 80) {
    grade = 'B';
  } else if (student.score >= 70) {
    grade = 'C';
  } else {
    grade = 'D';
  }
  
  tableHTML += `<tr>
    <td>${student.id}</td>
    <td>${student.name}</td>
    <td>${student.score}</td>
    <td>${grade}</td>
  </tr>`;
}

tableHTML += '</table>';
console.log(tableHTML);
// 输出HTML表格代码

案例3：数据处理与统计​

javascript
const salesData = [
  { product: 'A', region: '北', sales: 100 },
  { product: 'B', region: '北', sales: 150 },
  { product: 'A', region: '南', sales: 120 },
  { product: 'B', region: '南', sales: 90 },
  { product: 'A', region: '东', sales: 80 },
];

// 按产品统计销售总额
const productTotals = {};
for (const data of salesData) {
  if (!productTotals[data.product]) {
    productTotals[data.product] = 0;
  }
  productTotals[data.product] += data.sales;
}

console.log(productTotals);
// 输出: { A: 300, B: 240 }

// 求平均销售额
let totalSales = 0;
for (const data of salesData) {
  totalSales += data.sales;
}
const averageSales = totalSales / salesData.length;
console.log(`平均销售额: ${averageSales}`);
// 输出: 平均销售额: 108

总结​

在本文中，我们学习了各种JavaScript循环技巧，从基本的循环计数器使用到高级的数组方法应用。掌握这些技巧可以帮助你：

  1. 编写更简洁、可读性更强的代码
  2. 提高程序的执行效率
  3. 更灵活地处理各种数据结构
  4. 解决实际开发中的常见问题

循环是编程的基础，但掌握这些技巧可以将你的代码提升到一个新的水平。随着你编程经验的增长，你会发现在不同场景下选择合适的循环方式是非常重要的。

练习题​

为了巩固所学知识，尝试完成以下练习：

  1. 编写一个函数，使用不同的循环方式找出数组中的最大值。
  2. 创建一个函数，接收一个字符串参数，返回该字符串中每个字符的出现频率。
  3. 实现一个简单的购物车功能，可以添加商品、计算总价并显示所有商品。
  4. 使用嵌套循环生成一个乘法表（9×9表）。

进一步学习资源​

循环是JavaScript开发的重要基础，熟练掌握各种循环技巧将帮助你成为更高效的开发者。开始练习吧！