js中for..of..和迭代器

for..of是ES6中引入的新特性，它主要的作用是：循环一个可迭代的对象。

它可以循环遍历，数组、字符串、Set对象等等

示例一：

let str = 'hello'
for (item of str) {
  console.log(item)  // h e l l 0 依次打印
}

示例二：

let arr = [1,2,3,4,5]
for(arrItem of arr){
   console.log(arrItem)  // 1 2 3 4 5 依次打印
}

示例三：

let obj = {
  x:10,
  y:20
}
for(item of obj){
  console.log(item)  // 错误：“Uncaught TypeError: obj is not iterable”
}

Uncaught TypeError: obj is not iterable : 未捕获的类型错误:obj不可迭代

迭代器

给对象添加一个迭代器

obj[Symbol.iterator] = ()=>{

}

 

Symbol.iterator

紧接着，我们要在方法里面去写一下迭代规则，就是说，你想怎么去迭代这对象。这个方法需要返回一个next方法，next方法里面，又需要返回一个对象，

并且这个对象里面需要有"done"属性，“done”的值为bool类型的值，它相当于一个条件(或者说是开关)，

判断是否需要继续循环，值为true时，跳出循环；值为false继续下一次循环；看个例子：

let obj = {
      x:10,
      y:20
}
obj[Symbol.iterator] = ()=> {
            return {
                next(){
                    return {
                        done: false,
　　　　　　　　　　　　　　 value:2

                    }
                }
            }
        }

for(objItem of obj){
      console.log(objItem)
 }

上面这个例子，第一次循环的时候，返回{done:false,value:2}，打印“2”，第二次、第三次.... done的值一直是false，会出现死循环，一直打印“2”，

我们知道，如果要跳出循环，done的值要等于true，所以，我们可以加一些条件，当把对象遍历完毕之后，跳出循环：

let obj = {
    x:10,
    y:20
}
obj[Symbol.iterator] = ()=> {
    let keys = Object.keys(obj) //获取对象的key值
    let len = keys.length
    let n = 0
    return {
        next(){
            if (n<len){ //继续循环
                return {
                    done: false,
                    value: obj[keys[n++]] // 每次循环返回的值
                }
            } else { // 跳出循环
                return {
                    done: true
                }
            }
            
        }
    }
}
for(objItem of obj){
    console.log(objItem) // 依次打印 10  20
}

 

总结：常见的循环方法有，for循环、map()、forEach()、filter()等等，可以发现，每个方法都有自己的规则，比如返回值什么的。

那么，我们可以通过迭代器，去自定义循环规则，通过迭代器，返回自己想要的结果。