极客笔记js for…of和for…in循环的区别详解
1.引言
在JavaScript中，循环是非常常见且重要的操作之一。JavaScript提供了多种循环语句来帮助开发者遍历数组、对象的属性等，其中包括for…of循环和for…in循环。本文将详细介绍for…of和for…in循环的区别，以及它们的使用场景和注意事项。
2. for…of循环
for…of循环是ES6新增的一种遍历数组、类数组对象（比如字符串）等可迭代对象的循环语句。它的语法形式如下：
for (const element of iterable) {
// 执行循环体的代码
}
在每次循环迭代中，for…of循环会将可迭代对象中的每个元素依次赋值给声明的变量element，并执行循环体内的代码。例如，可以使用for…of循环遍历一个数组，并依次打印每个元素：
const arr = [1, 2, 3, 4, 5];
for (const element of arr) {
console.log(element);
}
运行结果：
1
2
3
4
5
需要注意的是，for…of循环只能用于遍历可迭代对象，而不能用于遍历普通对象。
3. for…in循环
for…in循环是JavaScript中最早的一种循环语句，它用于遍历对象的可枚举属性。它的语法形式如下：
for (const key in object) {
// 执行循环体的代码
}
在每次循环迭代中，for…in循环会将对象的可枚举属性的键赋值给声明的变量key，并执行循环体内的代码。例如，可以使用for…in循环遍历一个对象，并依次打印每个属性的键和值：
const obj = { name: "John", age: 30, city: "New York" };
for (const key in obj) {
console.log(key + ": " + obj[key]);
}
运行结果：
name: John
age: 30
city: New York
需要注意的是，for…in循环不仅会遍历对象的自身可枚举属性，还会遍历从原型链上继承的可枚举属性。
4. for…of和for…in的区别
for…of循环和for…in循环在语法和功能上有明显的区别，主要体现在以下几个方面。
4.1 遍历的对象类型
for…of循环仅适用于可迭代对象，如数组、字符串等，而不能用于普通对象。for…in循环则适用于遍历对象的可枚举属性，但不能用于遍历数组等可迭代对象。
4.2 遍历顺序
for…of循环遍历可迭代对象时，按照元素的顺序进行遍历。而for…in循环遍历对象的可枚举属性时，并不保证遍历的顺序。
4.3 遍历的内容
for…of循环遍历可迭代对象时，直接遍历元素的值。而for…in循环遍历对象的可枚举属性时，遍历的是属性的键。
4.4 原型链上的属性
for…of循环不会遍历对象的原型链上的属性。而for…in循环会遍历对象的原型链上继承的可枚举属性。
5. 使用场景和注意事项
根据for…of和for…in循环的特点和区别，我们可以在不同的场景中选择合适的循环语句。
5.1 使用for…of的场景
- 遍历数组或类数组对象：for…of循环直接遍历元素的值，非常适合用于遍历数组或类数组对象。
- 遍历字符串：for…of循环可以按照字符的顺序遍历字符串。
- 遍历ES6新增的可迭代对象：ES6中新增了一些可迭代对象，如Set、Map等，可以使用for…of循环进行遍历。
需要注意的是，for…of循环在每次循环中会创建一个新的迭代器对象，并且不支持在循环体内修改原始可迭代对象。
5.2 使用for…in的场景
- 遍历对象的可枚举属性：for…in循环非常适合用于遍历对象的可枚举属性，可以方便地访问键和对应的值。
- 遍历对象的原型链上的属性：如果需要遍历对象及其原型链上的继承属性，可以使用for…in循环。
需要注意的是，for…in循环会遍历对象的所有可枚举属性，包括继承来的属性和对象自身的属性。为了避免遍历到原型链上的属性，可以使用hasOwnProperty()方法进行判断。
6. 总结
for…of循环和for…in循环是JavaScript中常用的遍历语句，它们适用于不同的场景并具有不同的特点。for…of循环用于遍历可迭代对象，按照顺序遍历元素的值；for…in循环用于遍历对象的可枚举属性，不保证遍历顺序。根据具体的需求，选择合适的循环语句可以提高代码的可读性和执行效率。