Articles
JavaScript简介
关于JavaScript中迭代的最佳实践

关于JavaScript中迭代的最佳实践

本文将解释在JavaScript中迭代的最佳实践。

YouTube Video

关于JavaScript中迭代的最佳实践

在JavaScript中，使用for循环进行迭代是很常见的。在这里，我们将详细解释关于如何使用for循环编写高效且易读代码的最佳实践。

选择正确的循环结构

JavaScript提供了多种循环结构，每种都适合不同的用途。

 1// Example of a for loop
 2for (let i = 0; i < 5; i++) {
 3    console.log(i);
 4}
 5
 6// Example of a for...of loop
 7const array = [10, 20, 30];
 8for (const value of array) {
 9    console.log(value);
10}
11
12// Example of a for...in loop
13const obj = { a: 1, b: 2, c: 3 };
14for (const key in obj) {
15    console.log(`${key}: ${obj[key]}`);
16}
17
18// Example of a while loop
19let count = 0;
20while (count < 5) {
21    console.log(count);
22    count++;
23}
  • for语句适用于已预定循环次数的情况。
  • for...of语句适用于简洁地处理数组和可迭代对象。
  • for...in语句用于遍历对象的属性。然而，它并不适用于数组。
  • while语句和**do...while语句**用于基于条件控制循环。

使用forEach方法和for...of语句

遍历数组时，使用for语句访问索引是常见的，但forEach方法或for...of语句可能更具可读性。

 1// Using a standard for loop
 2const array = ["apple", "banana", "cherry"];
 3for (let i = 0; i < array.length; i++) {
 4    console.log(array[i]);
 5}
 6
 7// Using forEach
 8array.forEach(item => console.log(item));
 9
10// Using for...of
11for (const item of array) {
12    console.log(item);
13}
  • for语句允许在迭代时显式管理索引。
  • forEach方法使用回调函数来简洁地处理每个元素。
  • for...of语句具有很高的可读性，并允许直接访问数组中的每个元素。

优化循环条件

由于循环条件会被多次评估，避免不必要的计算可以提升性能。

 1const names = ["Alice", "Bob", "Charlie"];
 2const scores = [85, 92, 78];
 3
 4// Inefficient example
 5for (let i = 0; i < Math.min(names.length, scores.length); i++) {
 6    console.log(`${names[i]} scored ${scores[i]}`);
 7}
 8
 9// Efficient example
10for (let i = 0, len = Math.min(names.length, scores.length); i < len; i++) {
11    console.log(`${names[i]} scored ${scores[i]}`);
12}
  • 如本例所示，预先将计算结果存储在变量中可以使循环执行更高效。
 1const scores = [85, 92, 78];
 2let sum = 0;
 3let sum2 = 0;
 4
 5// Inefficient example
 6for (let i = 0; i < scores.length; i++) {
 7    sum += scores[i];
 8}
 9console.log(`Total score : ${sum}`);
10
11// Efficient example
12for (let i = scores.length - 1; i >= 0; i--) {
13    sum2 += scores[i];
14}
15console.log(`Total score : ${sum2}`);
  • 如本例所示，反转条件有时会更高效。

优化循环处理

由于循环处理是重复执行的，避免不必要的计算可以提高性能。

 1const array = ["apple", "banana", "cherry"];
 2
 3// Inefficient example
 4for (let i = 0; i < 100; i++) {
 5    const element = document.querySelector("#myElement");
 6    element.textContent = `Count: ${i}`;
 7}
 8
 9// Efficient example
10const element = document.querySelector("#myElement");
11for (let i = 0; i < 100; i++) {
12    element.textContent = `Count: ${i}`;
13}
  • 在此示例中，通过将 querySelector 方法移到循环之外，消除了不必要的重复计算。

注意作用域

使用let或const来确保循环内部的变量具有适当的作用域。由于var仅限于函数作用域，它可能会导致意外行为。

 1// Using let
 2for (let i = 0; i < 3; i++) {
 3    console.log(i);
 4}
 5
 6// Potential issue with var
 7for (var i = 0; i < 3; i++) {
 8    setTimeout(() => console.log(i), 1000); // 3, 3, 3
 9}
10
11// Using let to avoid the issue
12for (let i = 0; i < 3; i++) {
13    setTimeout(() => console.log(i), 1000); // 0, 1, 2
14}
  • var 具有函数作用域，所以在循环结束后 i 为 3，由 setTimeout 执行的所有函数输出 3。
  • 使用 let 时，setTimeout 回调函数中的 i 在每次循环中引用一个新值，因此按预期输出 0, 1, 2。

通过早退出来提高可读性

为了简化循环处理，适当地使用break和continue可以增强可读性。

 1// Example using break
 2for (let i = 0; i < 10; i++) {
 3    if (i === 5) {
 4        break; // Exit the loop
 5    }
 6    console.log(i);
 7}
 8
 9// Example using continue
10for (let i = 0; i < 10; i++) {
11    if (i % 2 === 0) {
12        continue; // Skip to the next iteration
13    }
14    console.log(i);
15}
  • 使用 break 可中途终止循环处理，跳过所有后续的迭代。
  • 使用 continue 可跳过当前的循环处理并进入下一次迭代。

避免深层嵌套

深层嵌套会使代码难以阅读，因此可以使用早返回或将功能拆分成函数，来保持浅层嵌套。

 1// Deeply nested example
 2for (let i = 0; i < 5; i++) {
 3    for (let j = 0; j < 5; j++) {
 4        if (i + j > 5) {
 5            console.log(i, j);
 6        }
 7    }
 8}
 9
10// Improved using function decomposition
11function processPairs(i) {
12    for (let j = 0; j < 5; j++) {
13        if (i + j > 5) {
14            console.log(i, j);
15        }
16    }
17}
18
19for (let i = 0; i < 5; i++) {
20    processPairs(i);
21}
  • 在此示例中，使用函数减少了嵌套。

请考虑错误处理

如果循环中可能发生错误，请实施适当的错误处理。

 1const data = ["123", "abc", "456", "xyz"];
 2
 3// Without Error Handling
 4for (const item of data) {
 5    const result = parseInt(item);
 6    console.log(`Parsed value: ${result}`);
 7}
 8
 9// With Error Handling
10for (const item of data) {
11    try {
12        const result = parseInt(item);
13        if (isNaN(result)) {
14            throw new Error(`Invalid number: ${item}`);
15        }
16        console.log(`Parsed value: ${result}`);
17    } catch (error) {
18        console.error(`Error processing item: ${item}. ${error.message}`);
19    }
20}
  • 在此示例中，为处理无效数据执行了错误处理，检测并报告了问题。

异步处理中的注意事项

在循环中处理异步操作时，使用async/await可以使代码简洁且直观。

 1const urls = ["https://example.com/1", "https://example.com/2"];
 2
 3// Proper handling of asynchronous operations
 4async function fetchUrls() {
 5    for (const url of urls) {
 6        const response = await fetch(url);
 7        const data = await response.json();
 8        console.log(data);
 9    }
10}
11
12fetchUrls();
  • 此代码以异步方式从 urls 数组中逐一获取 URL，并以 JSON 格式处理结果。使用 async/await 简化了异步操作，按顺序获取每个 URL 的数据并将其输出到控制台。

理解在异步处理中的 for...of 语句和 forEach() 之间的区别。 

 1async function asyncTask(num) {
 2    return new Promise(resolve => {
 3        setTimeout(() => {
 4            console.log(`Task ${num} done`);
 5            resolve();
 6        }, 100);
 7    });
 8}
 9
10async function runWithForOf() {
11    console.log("Start for...of");
12    for (const num of [1, 2, 3]) {
13        await asyncTask(num);
14    }
15    console.log("End for...of");
16}
17
18async function runWithForEach() {
19    console.log("Start forEach");
20    [1, 2, 3].forEach(async num => {
21        await asyncTask(num);
22    });
23    console.log("End forEach");
24}
25
26async function executeExamples() {
27    await runWithForOf();
28    await runWithForEach();
29}
30
31executeExamples();

  • 在循环中处理异步操作时，请注意使用 for...of 结合 async/await 和 forEach() 之间的行为差异，正如该示例所示。

  • 对于 for...of，代码会按顺序执行，并在循环中的 await 停止等待，然后继续下一次迭代。另一方面，forEach() 会并行执行处理。

结论

for语句是JavaScript中一个简单但功能强大的工具。通过利用这里介绍的最佳实践，您可以编写高效且易于阅读的代码。请注意选择适当的循环结构、作用域管理和错误处理，以实现高度可维护的代码。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

JavaScript中的重复处理JavaScript中的`真值`和`假值`