JS中的循环怎么使用

JS中的循环主要用于重复执行一段代码，直到满足特定条件为止。 掌握它们对于处理数组、对象以及执行重复性任务至关重要。

解决方案

JavaScript 提供了几种循环结构，各有用途：

1. for

   登录后复制
   循环：

   这是最常用的循环之一，尤其适用于已知循环次数的情况。

   for (let i = 0; i < 10; i++) {
     console.log(i); // 输出 0 到 9
   }

   登录后复制

   • let i = 0

     登录后复制
     ：初始化循环变量

     i

     登录后复制
     。

   • i < 10

     登录后复制
     ：循环条件，只要

     i

     登录后复制
     小于 10，循环就继续执行。

   • i++

     登录后复制
     ：每次循环结束后，

     i

     登录后复制
     的值加 1。

   for

   登录后复制
   循环的灵活性很高，可以根据需要调整初始化、条件和递增/递减部分。 比如，可以倒序循环：

   for (let i = 9; i >= 0; i--) {
     console.log(i); // 输出 9 到 0
   }

   登录后复制

2. while

   登录后复制
   循环：

   while

   登录后复制
   循环在给定条件为真时重复执行代码块。 当循环次数未知，而是依赖于某个条件变化时，

   while

   登录后复制
   循环就派上用场了。

   let i = 0;
   while (i < 10) {
     console.log(i);
     i++; // 别忘了更新 i，否则会变成死循环！
   }

   登录后复制

   如果

   while

   登录后复制
   循环的条件一开始就是

   false

   登录后复制
   ，那么循环体一次都不会执行。

3. do...while

   登录后复制
   循环：

   do...while

   登录后复制
   循环与

   while

   登录后复制
   循环类似，但它保证循环体至少执行一次。

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

   登录后复制

   即使

   i

   登录后复制
   的初始值大于等于 10，循环体也会先执行一次，然后再判断条件。

4. for...in

   登录后复制
   循环：

   for...in

   登录后复制
   循环用于遍历对象的属性。 它会迭代对象的所有可枚举属性（包括继承的属性）。

   const person = {
     name: 'Alice',
     age: 30,
     city: 'New York'
   };
   
   for (let key in person) {
     console.log(key + ': ' + person[key]); // 输出属性名和属性值
   }

   登录后复制

   需要注意的是，

   for...in

   登录后复制
   循环遍历的是属性名（字符串），而不是属性值。 另外，要小心继承的属性，可能需要使用

   hasOwnProperty()

   登录后复制
   方法来过滤。
   

   米乐商城程序源码

   米乐商城是一款独立购物软件程序，遵循开源软件开发和发布协议，可以自由下载、安装和使用，并可以根据自己的需要进行修改和发布，可以应用到任何的商业环境中

   294

   查看详情

5. for...of

   登录后复制
   循环：

   for...of

   登录后复制
   循环用于遍历可迭代对象（例如数组、字符串、Map、Set 等）的值。

   const numbers = [1, 2, 3, 4, 5];
   
   for (let number of numbers) {
     console.log(number); // 输出数组中的每个元素
   }
   
   const str = "Hello";
   for (let char of str) {
     console.log(char); // 输出字符串中的每个字符
   }

   登录后复制

   for...of

   登录后复制
   循环是 ES6 引入的，比传统的

   for

   登录后复制
   循环更简洁易读。 它专门用于遍历值，而不需要关心索引。

如何避免 JS 循环中的常见错误？

循环中的错误可能导致程序崩溃或产生意外结果。 最常见的错误包括：

• 死循环：循环条件永远为真，导致程序无限循环。 务必确保循环条件最终会变为

  false

  登录后复制
  。
• 索引越界：访问数组时，索引超出数组的范围。 检查索引是否在有效范围内。
• 错误的循环条件：循环条件设置不正确，导致循环次数不符合预期。 仔细检查循环条件是否符合逻辑。
• 在循环内部修改循环变量：在循环内部修改循环变量可能导致循环行为异常。 尽量避免这样做，或者至少要非常小心。

例如，下面这段代码就很容易出错：

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  if (arr[i] === 2) {
    arr.splice(i, 1); // 从数组中删除元素
  }
  console.log(arr[i]);
}

这段代码的目的是遍历数组，如果遇到值为 2 的元素，就将其删除。 但是，由于

splice()

i

filter()

如何选择合适的 JS 循环类型？

选择哪种循环类型取决于具体的需求：

• 如果已知循环次数，或者需要精确控制循环过程，可以使用

  for

  登录后复制
  循环。
• 如果循环次数未知，而是依赖于某个条件变化，可以使用

  while

  登录后复制
  或

  do...while

  登录后复制
  循环。
• 如果需要遍历对象的属性，可以使用

  for...in

  登录后复制
  循环。
• 如果需要遍历可迭代对象的值，可以使用

  for...of

  登录后复制
  循环。

一般来说，

for...of

for...in

while

do...while

如何优化 JS 循环的性能？

循环是性能瓶颈的常见来源。 以下是一些优化循环性能的技巧：

• 减少循环体内的计算量：将循环体内的常量计算移到循环外部。
• 避免在循环内部创建对象：在循环内部创建对象会增加垃圾回收的负担。 尽量在循环外部创建对象，然后在循环内部重用。
• 使用

  for...of

  登录后复制
  循环代替传统的

  for

  登录后复制
  循环：

  for...of

  登录后复制
  循环通常比

  for

  登录后复制
  循环更快，因为它避免了索引相关的计算。
• 减少 DOM 操作：频繁的 DOM 操作会严重影响性能。 尽量减少 DOM 操作的次数，例如先将修改应用到内存中的变量，然后一次性更新 DOM。
• 使用 Web Workers：如果循环计算量很大，可以考虑使用 Web Workers 将计算任务放到后台线程执行，避免阻塞主线程。

例如，下面这段代码可以优化：

const arr = document.querySelectorAll('.item');
for (let i = 0; i < arr.length; i++) {
  arr[i].style.width = '100px';
  arr[i].style.height = '100px';
  arr[i].style.backgroundColor = 'red';
}

这段代码会遍历所有 class 为

item

const arr = document.querySelectorAll('.item');
const len = arr.length; // 将 arr.length 缓存起来
for (let i = 0; i < len; i++) {
  const item = arr[i]; // 将 arr[i] 缓存起来
  item.style.width = '100px';
  item.style.height = '100px';
  item.style.backgroundColor = 'red';
}

或者，可以使用 CSS 类来一次性设置样式：

const arr = document.querySelectorAll('.item');
for (let i = 0; i < arr.length; i++) {
  arr[i].classList.add('red-item');
}

.red-item {
  width: 100px;
  height: 100px;
  background-color: red;
}

总之，理解 JS 循环的各种类型、避免常见错误、选择合适的循环类型以及优化循环性能，是编写高效 JavaScript 代码的关键。

以上就是JS中的循环怎么使用的详细内容，更多请关注php中文网其它相关文章！