@IT·互联网Web前端之路让前端飞

002|JavaScript ES6新特性之迭代器

2017-05-30  本文已影响48人  中年小钢炮

for...of

我们知道for...in可以用于遍历对象属性名key,而for...of则可以遍历容器的value。我们通过下面的例子来比较一下:

let arr = [7, 8, 9];
arr.foo = 'James';

for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); // logs 7, 8, 9
}

迭代器

迭代器(iterator)一个是可以用于遍历容器(如Array等)的对象。迭代器只有一个方法,next()。

next()

next将依次返回容器中的新值{value:xxx, done:false},直到遍历完毕返回{done:true}

我们来看一下创建一个array的迭代器:

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

var it = makeIterator(['David', 'James']);
console.log(it.next().value); // 'David'
console.log(it.next().value); // 'James'
console.log(it.next().done);  // true

迭代协议

for..offor...in 有着本质上的不同,隐藏于 for...of 背后的是原理是迭代协议。

迭代协议的涵义是,对象的System.iterator属性应当是一个函数,当调用后返回一个全新的迭代器。

当用for...of 遍历一个object时它的工作流程如下:
1、获取object的System.iterator属性指向的函数。
2、调用该函数,返回值为一个迭代器。
3、调用迭代器next()方法,得到value、done两个值。
4、如果done为true,退出循环。
5、如果值done为false,则将value用于statements中,执行for...of循环体。执行完后返回3。

好了,完结。

什么是生成函数?

上一篇下一篇

猜你喜欢

热点阅读