JavaScript之 For 循环的写法汇总和适用场景

客官°小女子只卖身不卖艺 2024-03-17 15:38 46阅读 0赞

JavaScript 中有多种循环方式可用来迭代数组、对象及其属性，以及一些其他的迭代。

### for 循环的方式 ###

1.  for 循环
2.  for … in 循环
3.  for … of 循环
4.  forEach()  
    除了 for循环外， JavaScript 还具有其他循环方式，例如 while、do…while、map() 方法等

### 1. for 循环 ###

for 循环是 JavaScript 中最常见的循环类型，它通常用于迭代数组， 示例如下：

const arr = [1,2,3,4];
    for(let i =0 ;i<arr.length;i++){
        console.log(arr[i]);
    }

### 2. for … in 循环 ###

for…in 循环用于迭代对象的可枚举属性，并提供属性的名称及其相应的值，示例如下:

const obj = { a: 1, b: 2, c: 3 };
    for (let key in obj) {
      console.log(key, obj[key]); // 输出属性名和属性值
    }

for … in 循环也可以使用在数组中，循环的是数组的下标，比如：

for(var i in arr){ //如果是数组， 则循环的是元素的下标
     console.log(arr[i]);
    }

注意： for…in 循环不建议用于数组的迭代，因为它不保证属性的顺序

### 3. for … of 循环 ###

for…of 循环遍历数组或对象属性的内容，而不是它的索引或属性。

遍历数组的值：

for (let value of arr) {
      console.log(value); // 输出数据元素
    }

遍历对象属性的值

for (let value of arr) {
      console.log(value); // 输出对象属性值
    }

### 4. forEach() ###

forEach() 方法用于在数组中迭代每个元素，提供一个回调函数作为参数，它接受三个参数：元素值、元素索引和数组本身。forEach() 方法适用于需要遍历数组。

arr.forEach((value, index, array) => {
      console.log(value, index, array); // 输出元素、元素索引和数组本身
    });

### 总结 ###

<table> 
 <thead> 
  <tr> 
   <th>方式</th> 
   <th>适合场景</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>for</td> 
   <td>数组</td> 
  </tr> 
  <tr> 
   <td>for…in</td> 
   <td>对象</td> 
  </tr> 
  <tr> 
   <td>for…of</td> 
   <td>对象或数组</td> 
  </tr> 
  <tr> 
   <td>forEach</td> 
   <td>数组</td> 
  </tr> 
 </tbody> 
</table>

### 在线运行示例： ###

*  [https://jsrun.net/3HFKp/edit][https_jsrun.net_3HFKp_edit]

[https_jsrun.net_3HFKp_edit]: https://jsrun.net/3HFKp/edit