招商信息发布网站大全七牛部署WordPress

for…of

for-of循环用于遍历可迭代对象，如数组、字符串、Map、Set等。它直接访问每个元素的值，而不是键名。

const arr = [3,5,6,7,0]
for(let item of arr){console.log(item);
}
// 3
// 5
// 6
// 7
// 0

只有部署了Iterator接口的数据结构才能使用for…of遍历。
原生具备Iterator接口的数据结构有以下几个。

1. Array。
2. Map。
3. Set。
4. String。
5. 函数的arguments对象。
6. NodeList对象。

for …in

for-in循环主要用于遍历对象的所有可枚举属性，包括对象自身的属性和继承自原型的属性。它不适用于遍历数组，因为数组的索引会被当作字符串处理，且遍历顺序可能不是按照数组的实际顺序。

var person = { name: 'John', age: 30, gender: 'male' 
};for (var key in person) {console.log(key, person[key]);
}
// 输出：name John, age 30, gender male

for in 遍历数组容易引发的问题：

• 遍历顺序不确定性，在一些非连续数组。
• 会遍历非数字索引。
• 性能问题会比 for of 差，因为 for in 会遍历原型链上有的可枚举属性。

如何让一个对象支持使用for of来迭代循环遍历

const obj = { a: 'xx', b: 'dd', c: 4 };// 为对象添加 [Symbol.iterator] 属性并指向一个迭代器函数
obj[Symbol.iterator] = function* () {for (let key in this) {yield this[key];}
};// 使用 for...of 循环遍历对象
for (let value of obj) {console.log(value); // 输出属性值：1, 2, 3
}

function Person(name, age) {this.name = name;this.age = age;
}
// 在原型中添加[Symbol.iterator]属性
Person.prototype[Symbol.iterator] = function () {// 设置变量，记录遍历的次数let count = 0;// 通过Object.keys()函数获取实例自身的所有属性let propArr = Object.keys(this);return {next: function () {// 每执行一次遍历，count值加1// 当count值小于属性的长度时，表示仍然可以遍历，设置done值为falseif (count < propArr.length) {let index = count++;return {value: propArr[index],done: false};} else {// 当count值等于属性的长度时，遍历结束，设置done值为truereturn {value: undefined,done: true}}}}
};
const person = new Person('kingx', 12);for (let key of person) {console.log(key, ':', person[key]);
}