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

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); // 输出元素、元素索引和数组本身
});

总结

方式	适合场景
for	数组
for…in	对象
for…of	对象或数组
forEach	数组

在线运行示例：

• https://jsrun.net/3HFKp/edit