JS 史上最强 迭代协议 理解

小友：哟，史上最强，我就进来看看多强，骗我流量的话，别逼我**

博主：呜呜，嘤嘤~

迭代协议

 迭代协议分两种：

1. 可迭代协议
2. 迭代器协议

协议 就是要遵循的事情。

可迭代协议

重要：可迭代协议 === 可迭代对象。 通过后面讲解和案例你就能够更加明白这句话的意思

官网说了 满足可迭代协议的前提  

1. 必须有[Symbol.iterator]属性名，并且属性值是一个无参数的函数，其返回值为一个符合迭代器协议的对象。
2. 必须有迭代器。
3. 可迭代协议 可以 被for of循环、数组结构赋值

这些都是官网要求我们必须要这样做的。怎么做，是不是用对象来遵循协议。这样是不是 可迭代对象 === 可迭代协议。(小友：哇，哥哥太强了，我一下子就明白 他们之间的关系啦)

那什么是迭代器啊哥哥？

迭代器协议

说白了就是我在写迭代器的时候，如何写? 遵循官网的协议,那这个协议是什么呢?

1. 必须要有next方法 
2. next方法 必须返回指定的结构 {value:"这里是值",done:布尔值}

小友：看文章好累，上代码

提示：别说看不懂，静下心来 好好看。这是原生的迭代器写法

function makeIterator(array) {
    let nextIndex = 0;
    return {
       next: function () {
           return nextIndex < array.length ? {
               value: array[nextIndex++],
               done: false
           } : {
               done: true
           };
       }
    };
}

let it = makeIterator(['哟', '呀']);

console.log(it.next().value); // '哟' 
console.log(it.next().value); // '呀'
console.log(it.next().done);  // true

// done : 如果还有值 就是false 没有值就是true

总结: 这就是官网说的协议。你必须用next方法 这个方法返回{value:"这里是值",done:布尔值}，

不这样做 我就很不认可。

很好！ 你看到了这里，你再仔细回味一下。

小友：我终于入门了，我太开心了，可是手写生成器太夸张了吧 不爽，有没有其他的语法替代

博主：它来了 生成器

生成器

1. 生成器比较特殊，及是迭代器 也是 可迭代对象
2. 拥有yild 和next 关键字

语法

let aGeneratorObject = function* () {
     yield 1;
     yield 2;
     yield 3;
}()

console.log(aGeneratorObject.next())// {value: 1, done: false}

console.log(aGeneratorObject.next())// {value: 2, done: false}

console.log(aGeneratorObject.next())// {value: 3, done: false}

console.log(aGeneratorObject.next())// {value: undefined, done: true}

大家看，是不是有next方法 ，是不是满足返回{value:'',done:''}，那他是不是满足迭代器。所以他是比较特殊的

yild

1. 暂停的意思，用next进行播放。
2. 你可以把一个一个的yield 看成一个数组集合，这样更好理解

小友：你是不是偷懒  你还没有说为什么是可迭代对象，想浑水摸鱼? 我给你一*

上面已经说到，可迭代对象 可以被for of  和数组结构，看案例

let aGeneratorObject = function* () {
       yield 1;
       yield 2;
       yield 3;
}()

console.log([...aGeneratorObject]) // [1,2,3]

for (let item of aGeneratorObject) {
     console.log('item', item)
}
// 1 2 3

是不是可以被解构，所以他是可迭代对象。通过解构我们应该能想到，数组为什么能解构，解构的前提的是什么。不错！就是必须是可迭代对象。 抓住这个特性我们去看看 对象是不是也可以这样做

自定义可迭代对象

const person = {
  name: "Lydia Hallie",
  age: 21,
  *[Symbol.iterator]() { yield Object.values(this) }
}

[...person] // ["Lydia Hallie", 21]

讲解

1. object.values(this),this 指向当前对象，object.values 把对象的属性值变成一个数组["Lydia Hallie", 21]
2. 因为这个满足了可迭代协议，那么在结构 或者 for of 循环的时候，是直接去找这个迭代器

最后

希望兄弟们  学习知识点 不要感觉会了 就过了，要多磨炼 。放松心态好好卷吧！