es6 itaertor遍历器

客官°小女子只卖身不卖艺 2022-06-09 14:44 129阅读 0赞

**iterator遍历器: **  
遍历器是一种接口，它为不同的数据结构提供了统一的访问机制。   
如果一个数据结构具有遍历器接口，那么就可以依次处理该数据结构的成员。   
当前javascript用来表示集合的数据结构有四种，分别是数组、对象、Set和Map，并且这四种数据结构可以相互嵌套使用，比如数组的成员可以是对象，对象的成员又可以是Set等等。   
一.遍历器接口:   
如果一个结构具有Symbol.iterator属性，那么就称这个数据结构具有遍历器接口。   
Symbol.iterator返回Symbol对象的iterator属性，这是一个预定义好的、类型为Symbol的特殊值。   
Symbol.iterator属性指向一个方法，调用此方法返回一个遍历器对象，它是一个指针对象，默认指向数据结构的起始位置。   
   
let arr = \["源库网", 4, "www.yuankuwang.com", "北京大学"\];   
let it = arr\[Symbol.iterator\]();   
console.log(it.next());   
console.log(it.next());   
console.log(it.next());   
//每一次调用next()方法都会返回一个对象，此对象包含value和done属性，value属性值是数据结构成员的值，如果遍历完成value属性值为undefined；done属性是一个布尔值，如果为true，说明遍历完成，如果为false，说明遍历尚未完成   
   
二.默认具有遍历器接口的数据结构,for of循环   
当对一个数据结构使用for of循环遍历的时候，会自动调用遍历器接口。   
ES6中有四类数据结构默认具有遍历器接口:   
（1）数组   
（2）某些类数组   
（3）Map   
（4）Set   
var arr = \[1,2,3,'aa','bb','cc'\];   
for(let elem of arr) \{   
  console.log(elem);   
\}   
某些类数组：   
let obj = \{   
  data: \["aa","bb",'cc',3,9,8\],   
  \[Symbol.iterator\]() \{   
    const self = this;   
    let index = 0;   
    return \{   
      next() \{   
        if (index < self.data.length) \{   
          return \{   
            value: self.data\[index++\],   
            done: false   
          \};   
        \} else \{   
          return \{ value: undefined, done: true \};   
        \}   
      \}   
    \};   
  \}   
\};   
let it = obj\[Symbol.iterator\]();   
console.log(it.next().value)   
   
三、展开运算符:   
如果一个数据结构具有遍历器接口，那么除了可以使用for of循环以外，也可以使用展开运算符。   
代码实例如下:   
   
let arr = \["源库网", 4, "www.yuankuwang.com"\];   
console.log(...arr);