ES6的 for of 循环详解
其实使用ES6中的 for of 循环还是有一定的要求，就是循环的对象必须有Symbol.iterator这个属性，而且属性值一定要是一个函数。
- 循环的对象一定要有Symbol.iterator这个属性。
- Symbol.iterator这个属性的值是一个函数
- 函数的返回值，一定要符合迭代器。
示例1
let arr = [100, 200, 300, 40, 2]
console.log(arr[Symbol.iterator]) // ƒ values() { [native code] }
// 就是说 arr数组，是有这个Symbol.iterator这个属性的。而且属性值也是一个函数
for (const item of arr) {
console.log(item) // 100 200 300 40 2
}
如果我们修改Symbol.iterator属性,而且为没有的对象添加这个属性
let arr = [10,20,30,4,5];
arr[Symbol.iterator] = function () {
// 1.这里一定要返回一个对象，不然会报错的
// 2.对象中一定要有next方法
// 3.next方法调用，返回的是一个对象 { value: '', done: true/false }
let i = 0
console.log('Symbol.iterator被执行了');
return {
next() {
if ( i > 50) {
return {
value:50, done: true }
} else {
i += 5
return {
value: i, done: false }
}
}
}
}
for (const item of arr) {
console.log(item); // 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55
}
// 这里的循环不再是数组的元素
- 这里的循环不再是数组的元素
- 而是我们 i += 5 每一次递增的 i。
- 而且这里的 console.log(‘Symbol.iterator被执行了’)被执行了。
3. 我们也可以给不能使用 for of的对象添加 Symbol.iterator使其能使用 for of
let obj = {
}
for (const item of obj) {
console.log(item); // 这里会报错
}
上面的代码会报错
let obj = {
}
obj[Symbol.iterator] = function (){
let i = 10
return {
next(){
i += 10
if (i > 100) {
return {
value:i, done: true}
} else {
return {
value: i, done: false}
}
}
}
}
for (const item of obj) {
console.log(item); // 20, 30, 40, 50, 60, 70, 80, 90 .....
}
4.总结
- for of 循环的对象一定要有 Symbol.iterator属性
- 而且属性值一定要是一个函数，而且返回值是一个迭代器。
- 我们是可以修改Symbol.iterator属性值的