🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

摘要：

本文将详细介绍JavaScript中的for…in和for…of循环的区别及使用场景，帮助你对这两种循环语句有更深入的理解。

引言：

JavaScript中的for循环是基本语法之一，而在ES6中，for…in和for…of两种新的循环语句被引入。那么，这两种循环语句有什么区别？在什么场景下使用呢？接下来，我们将一起探讨这个问题。

正文：

1. for…in循环

for…in循环是JavaScript中一种特殊的循环结构，它主要用于遍历对象（Object）的属性。在for…in循环中，它会遍历对象本身的所有可枚举属性，并将其属性名赋值给循环变量。

for…in循环的结构如下：

for (let variable in object) {// 在这里使用变量
}

在这个循环中，variable是一个新的变量，它将在每次迭代中被赋值为object的一个可枚举属性名。

需要注意的是，for…in循环有一些特点：

1. 它只能遍历对象自身的可枚举属性，无法遍历到继承的属性或者不可枚举的属性。

2. 在遍历过程中，variable变量只在循环内部有效，循环外部无法访问。

下面是一个for…in循环的例子：

let obj = {name: "张三",age: 25,gender: "男"
};for (let key in obj) {console.log(key); // 输出: name, age, gender
}

在这个例子中，for…in循环遍历了obj对象的所有属性，并将属性名赋值给变量key，然后输出key的值。

如果想要在循环外部使用循环变量，可以在循环外部声明一个变量，并将循环变量赋值给这个变量。例如：

let obj = {name: "张三",age: 25,gender: "男"
};let key;
for (key in obj) {console.log(key); // 输出: name, age, gender
}console.log(key); // 输出: gender

在这个例子中，我们在循环外部声明了一个变量key，并将循环变量赋值给key，所以即使在循环外部，我们也可以访问key的值。

2. for…of循环

for…of循环是ES6中引入的一种新的循环结构，它可以用来遍历可迭代对象（如数组、字符串、Set、Map等）的元素。在for…of循环中，它会遍历可迭代对象的所有元素，并将其元素值赋值给循环变量。

for…of循环的结构如下：

for (let variable of iterable) {// 在这里使用变量
}

在这个循环中，variable是一个新的变量，它将在每次迭代中被赋值为iterable的一个元素值。iterable是一个可迭代对象，如数组、字符串、Set、Map等。

for…of循环的特点：

1. 它可以遍历可迭代对象的所有元素，而不仅仅是对象的属性。

2. 在遍历过程中，variable变量只在循环内部有效，循环外部无法访问。

下面是一个for…of循环的例子：

let arr = [1, 2, 3, 4, 5];for (let value of arr) {console.log(value); // 输出: 1, 2, 3, 4, 5
}

在这个例子中，for…of循环遍历了arr数组的所有元素，并将元素值赋值给变量value，然后输出value的值。

如果想要在循环外部使用循环变量，可以在循环外部声明一个变量，并将循环变量赋值给这个变量。例如：

let arr = [1, 2, 3, 4, 5];let value;
for (value of arr) {console.log(value); // 输出: 1, 2, 3, 4, 5
}console.log(value); // 输出: 5

在这个例子中，我们在循环外部声明了一个变量value，并将循环变量赋值给value，所以即使在循环外部，我们也可以访问value的值。

3. 区别和适用场景

for…in循环适用于遍历对象属性，特别是当对象的属性不确定时，可以通过for…in循环来遍历。而for…of循环适用于遍历可迭代对象，特别是当需要遍历的是一系列固定的值时，如数组、字符串等。

for…in循环和for…of循环都是JavaScript中用于遍历对象的循环结构，但它们在某些方面有所不同。

for…in循环：

1. 只能用于遍历对象（Object）的属性。
2. 无法直接获取到属性的值，需要通过对象[属性名]的方式获取。
3. 遍历过程中，变量在循环内部有效，循环外部无法访问。
4. 适用于遍历对象的所有可枚举属性。

for…of循环：

1. 可以用于遍历可迭代对象（如数组、字符串、Set、Map等）的所有元素。
2. 可以直接获取到元素的值，无需通过对象[属性名]的方式获取。
3. 遍历过程中，变量在循环内部有效，循环外部无法访问。
4. 适用于遍历可迭代对象的所有元素。

总结：

for…in循环适用于遍历对象的所有可枚举属性，而for…of循环适用于遍历可迭代对象的所有元素。在实际使用中，可以根据需要选择合适的循环结构。

JavaScript中的for…in和for…of循环各有特点，选择合适的循环语句可以使代码更加简洁、易读。了解它们的区别和适用场景，可以帮助你在开发过程中更好地使用这两种循环语句。

参考资料：

1. 《JavaScript高级程序设计》
2. 《ES6标准入门》

📚 以上内容仅供参考，具体实践还需结合项目实际情况。希望本文能为你在理解和使用JavaScript中的for…in和for…of循环方面带来一定的启示和帮助。如有疑问，欢迎留言交流。🤝