JavaScript 循环：拥有最佳性能的最佳实践 _JavaScript

译者 | 刘汪洋
审校 | 重楼
概括：这篇文章介绍了 JAVAScript 中各种循环语句的特点和性能，以及如何根据不同的场景选择合适的循环方式。文章通过一些实例和测试，给出了一些使用循环的最佳实践，如避免不必要的计算、使用缓存变量、使用 break 和 continue 等。

文章插图
介绍循环是编程语言的基本组成部分，在 JavaScript 中也同样不可或缺。JavaScript 循环是一种功能强大的编程工具，它让开发者能够遍历数据集合，针对每个项目执行特定操作，并根据具体条件作出决策。
然而，实现方式不当可能导致负面问题。编写错误的循环不仅可能引发性能问题和编程错误，还可能使代码变得难以维护。
无论你是编程新手还是有丰富经验的开发人员，编写高效且合理的循环总是一项充满挑战的任务。
在本全面指南中，我们将详细探讨编写 JavaScript 循环的最佳实践，助你将代码从新手水平提升至专家水平。我们将从最基本的部分开始，涵盖如何选择正确的循环类型和优化循环性能等方面。
后面，我们还将深入探讨更高级的主题，包括如何运用函数式编程技巧，以及如何在处理异步循环时保持谨慎，以避免代码运行时出现不可预见的情况。
不论你是使用数组、对象还是其他数据结构，我们所分享的技巧和方法都将有助于你编写干净、简洁且无 bug 的循环代码。
因此，如果你准备深入了解 JavaScript 循环的精髓，那就做好准备，让我们共同探索吧！
选择正确类型的循环在 JavaScript 编程中，选择合适的循环类型很关键。JavaScript 提供了几种主要的循环类型，包括 for 循环、while 循环和do-while 循环，每种类型都有其适用场景及优缺点。
For 循环For 循环是 JavaScript 中最常用的循环类型，特别适用于在已知循环次数的情况。
例如，要计算数字数组的和：

let numbers = [1, 2, 3, 4, 5];let sum = 0;for (let i = 0; i < numbers.length; i++) {sum += numbers[i];}console.log(sum); // 输出：15

在此示例中，for 循环遍历数组的每个元素并累加其值。
While 循环While 循环适用于重复执行代码块直到满足某条件的场景。
例如，生成大于 0.5 的随机数：

let randomNumber = Math.random();while (randomNumber <= 0.5) {randomNumber = Math.random();}console.log(randomNumber); // 输出：大于 0.5 的数字

此例中，while 循环不断生成新的随机数，直到满足条件。
Do-While 循环Do-while 循环与while 循环相似，但无论初始条件如何，至少会执行一次代码块。
例如，要求用户输入一个介于 1 和 10 之间的数字：

let number;do {number = prompt('输入一个介于 1 和 10 之间的数字：');} while (number < 1 || number > 10);console.log(number); // 输出：介于 1 和 10 之间的数字

此例中，do-while 循环反复提示用户输入合法数字。
选择合适的循环类型取决于具体需求和任务。如果已知执行次数，通常选择 for 循环；如果需要满足某个条件才停止执行，则 while 循环或 do-while 循环可能更合适。通过慎重选择循环类型，可以使代码执行更高效、更易于理解。
循环控制语句的正确使用选择了合适的循环结构后，你还需要深入了解如何在 JavaScript 中正确运用两种主要的循环控制语句：break 和 continue 。
这两种控制语句可以让你更灵活地控制循环的执行流程。当满足特定条件时，break 语句用于完全终止循环，而 continue 语句则用于跳过当前迭代并进入下一个迭代。
例如，设有一个数字数组，你想通过 for 循环找到数组中的第一个偶数数字。一旦找到第一个偶数，你可以使用 break 语句退出循环：

const numbers = [1, 3, 2, 5, 4, 7, 6];for (let i = 0; i < numbers.length; i++) {if (numbers[i] % 2 === 0) {console.log(`第一个偶数是 ${numbers[i]}`);break;}}

在这个例子中，一旦找到第一个偶数（即 2），循环就会终止。如果没有 break 语句，循环会继续遍历数组的其余部分。
相对于上述情况，如果你想在数组中打印所有的奇数，并跳过所有偶数，可以使用 continue 语句：

const numbers = [1, 3, 2, 5, 4, 7, 6];for (let i = 0; i < numbers.length; i++) {if (numbers[i] % 2 === 0) {continue;}console.log(`奇数：${numbers[i]}`);}

在这个例子中，循环会跳过偶数，仅打印奇数（即 1、3、5 和 7）。如果没有 continue 语句，循环将会打印数组中的所有数字。