ES6学习笔记（10）——iterator和for...of循环

╰+哭是因爲堅強的太久メ 2022-11-27 07:15 171阅读 0赞

# iterator和for…of循环 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhcGlwaQ_size_16_color_FFFFFF_t_70_pic_center]

## 引入 ##

遍历器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作

//1. 遍历器生成函数
    function makeIterator(array){ 
        var nextIndex=0;
        return { 
            next:function(){ 
                return nextIndex<array.length?
                { value:array[nextIndex++],done:false};
                { value:undefined,done:false};     
            }
        }
    }
    
    //2。 遍历器生成函数简约写法
    function makeIterator(array){ 
        var nextIndex=0;
        return { 
            next:function(){ 
                return nextIndex < array.length ?
                { value: array[nextIndex++]} :
                { done: true};
            }
        }
    }
    
    //返回一个遍历器对象,也称指针对象
    var it = makeIterator(['a', 'b']);
    
    //next方法用来移动指针，返回一个对象（具有value和done属性）
    //调用next就可以遍历给定的数据结构
    it.next() // { value: "a", done: false }
    it.next() // { value: "b", done: false }
    it.next() // { value: undefined, done: true }

在ES6中，有些数据结构原生具备Iterator接口（比如数组），即不用任何处理，就可以被`for...of`循环遍历，有些就不行（比如对象）。这与数据结构是否原生部署了`Symbol.iterator`属性有关

凡是部署了`Symbol.iterator`属性的数据结构，就称为部署了遍历器接口。调用这个接口，就会返回一个遍历器对象

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhcGlwaQ_size_16_color_FFFFFF_t_70_pic_center 1]

## 数据结构的默认Iterator接口 ##

`Symbol.iterator`是一个表达式，返回`Symbol`对象的`iterator`属性。一个数据结构只要具有`Symbol.iterator`属性，就可以认为是“可遍历的”。

**在ES6中，有三类数据结构原生具备Iterator接口：数组、某些类似数组的对象、Set和Map结构**

let arr = ['a', 'b', 'c'];
    //执行Symbol.iterator属性会返回一个遍历器对象，其基本特征就是具有next方法
    let iter = arr[Symbol.iterator]();
    //调用遍历器对象里的next方法
    iter.next() // { value: 'a', done: false }
    iter.next() // { value: 'b', done: false }
    iter.next() // { value: 'c', done: false }
    iter.next() // { value: undefined, done: true }

## 自定义Iterator接口 ##

//1. 给类部署Iterator接口（等同于部署Symbol.iterator属性）
    class RangeIterator { 
      constructor(start, stop) { 
        this.value = start;
        this.stop = stop;
      }
        
      //部署Symbol.iterator属性，返回当前对象的遍历器对象
      [Symbol.iterator]() {  return this; }
      //定义next
      next() { 
        var value = this.value;
        if (value < this.stop) { 
          this.value++;
          return { done: false, value: value};
        }
        return { done: true, value: undefined};
      }
    }

//2. 给对象部署Iterator接口
    let obj = { 
      data: [ 'hello', 'world' ],
      [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 };
            }
          }
        };
      }
    };

//3.给类似数组的对象（存在数值键名和length属性）部署Iterator接口——Symbol.iterator直接引用数组的Iterator接口
    let iterable = { 
      0: 'a',
      1: 'b',
      2: 'c',
      length: 3,
      //部署Symbol.iterator
      [Symbol.iterator]: Array.prototype[Symbol.iterator]
      //写法二：[Symbol.iterator]: [][Symbol.iterator]
    };
    
    //注意，普通对象部署数组的Symbol.iterator方法，并无效果
    let iterable = { 
      a: 'a',
      b: 'b',
      c: 'c',
      length: 3,
      [Symbol.iterator]: Array.prototype[Symbol.iterator]
    };
    for (let item of iterable) { 
      console.log(item); // undefined, undefined, undefined
    }

当使用`for...of`循环遍历某种数据结构时，该循环会自动去寻找Iterator接口。有了遍历器接口，数据结构就可以用`for...of`循环遍历，也可以使用`while`循环遍历

## 调用Iterator接口的场合 ##

*  解构赋值
    
        let set = new Set().add('a').add('b').add('c');
        
        //对数组和Set结构进行解构赋值时，会默认调用Symbol.iterator方法
        let [x,y] = set;// x='a'; y='b'
        let [first, ...rest] = set;	// first='a'; rest=['b','c'];
 *  扩展运算符
    
        //扩展运算符（...）会调用默认的iterator接口
        var str = 'hello';
        [...str] // ['h','e','l','l','o']
    
        //只要某个数据结构部署了Iterator接口，就可以对它使用扩展运算符，将其转为数组
        let arr = [...iterable];
 *  yield\*
 *  其他场合
    
    for…of、Array.from()、Map(), Set()、WeakMap()、WeakSet()（比如`new Map([['a',1],['b',2]])`）、Promise.all()、Promise.race()

## 字符串的Iterator接口 ##

var someString = "hi";
    var iterator = someString[Symbol.iterator]();
    iterator.next()  // { value: "h", done: false }
    iterator.next()  // { value: "i", done: false }
    iterator.next()  // { value: undefined, done: true }

可以覆盖原生的`Symbol.iterator`方法，修改遍历器行为

## Iterator接口与Generator函数 ##

## 遍历器对象的return()，throw() ##

遍历器对象除了具有`next`方法，还可以具有`return`方法和`throw`方法，后者是可选的。

`return`方法的使用场合：

（1）如果`for...of`循环提前退出（通常是因为出错，或者有`break`语句或`continue`语句）

（2）如果一个对象在完成遍历前，需要清理或释放资源

`throw`方法主要是配合Generator函数使用

## for…of循环 ##

`for...in`循环读取键名，`for...of`循环读取键值

var arr = ['a', 'b', 'c', 'd'];
    for (let a in arr) { 
      console.log(a); // 0 1 2 3
    }
    for (let a of arr) { 
      console.log(a); // a b c d
    }

`for...of`循环返回具有数字索引的属性，`for...in`循环不一样

let arr = [3, 5, 7];
    arr.foo = 'hello';
    for (let i in arr) { 
      console.log(i); // "0", "1", "2", "foo"
    }
    for (let i of arr) { 
      console.log(i); // "3", "5", "7"
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhcGlwaQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/105b7481bd0a4532af8723a2a0811497.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhcGlwaQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/42180d868a8d4459b4d3a5d063c01fc4.png