ES6 迭代器 可迭代协议 与 for-of 循环 (详解)

迭代器背景知识

1.什么是迭代？

• 从一个数组集合中按照一定的顺序，不断取出数据的过程

2.迭代和遍历的区别？

• 迭代强调的是依次取数据并不保证去多少，也不保证把所有的数据取完
• 便利强调的是要把整个数据依次全部取出

3.迭代器

• 对迭代过程封装，在不同语言中的表现形式，通常为对象

4.迭代模式

是一种设计模式，用于统一迭代过程，并规范了迭代器规格：

• 迭代器应该具有得到下一个数据的能力
• 迭代器应该具有判断是否还有后续数据的能力

JavaScript中的迭代器

JS规定，如果一个对象具有next方法，并且该方法返回一个对象，该对象的格式如下：

{value: 值, done: 是否迭代完成}

则认为该对象是一个迭代器

含义：

• next方法：用于得到下一个数据
• 返回的对象
  • value：下一个数据的值
  • done：boolean，是否迭代完成

我们来讲举个例子

  const arr = [1, 2, 3, 4, 5];
        //迭代数组arr
        const iterator = {
            i: 0, //当前的数组下标
            next() {
                var result = {
                    value: arr[this.i],
                    done: this.i >= arr.length
                }
                this.i++;
                return result;
            }
        }

        //让迭代器不断的取出下一个数据，直到没有数据为止
        let data = iterator.next();
        while (!data.done) { //只要没有迭代完成，则取出数据
            console.log(data.value)
            //进行下一次迭代
            data = iterator.next();
        }

        console.log("迭代完成")

可迭代协议 与 for-of 循环

可迭代协议

概念回顾

• 迭代器(iterator)：一个具有next方法的对象，next方法返回下一个数据并且能指示是否迭代完成
• 迭代器创建函数（iterator creator）：一个返回迭代器的函数

可迭代协议

ES6规定，如果一个对象具有知名符号属性Symbol.iterator，并且属性值是一个迭代器创建函数，则该对象是可迭代的（iterable）

思考：如何知晓一个对象是否是可迭代的？
思考：如何遍历一个可迭代对象？

for-of 循环

for-of 循环用于遍历可迭代对象，格式如下

//迭代完成后循环结束
for(const item in iterable){
    //iterable：可迭代对象
    //item：每次迭代得到的数据
}

	<div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <script>
        const divs = document.querySelectorAll("div");


        // const iterator = divs[Symbol.iterator]()
        // let result = iterator.next();
        // while (!result.done) {
        //     const item = result.value; //取出数据
        //     console.log(item);
        //     //下一次迭代
        //     result = iterator.next();
        // }
        
		//同等于
        
        for (const item of divs) {
            console.log(item);
        }

展开运算符与可迭代对象

展开运算符可以作用于可迭代对象，这样，就可以轻松的将可迭代对象转换为数组。