迭代器和生成器

一.迭代器

1.迭代器是帶有特殊接口的對象,返回一個next方法,該方法中同時又valuedone屬性,當再沒有值可以迭代時,valueundefineddonetrue,否則value為當前值,donefalse

2.根據上面的描述實現一個迭代器,如下:

let iterator = {
    i: 0,
    items: [2, 4, 6],
    next() {
        let value, done;
        done = (this.i === this.items.length);
        value = done ? undefined : this.items[this.i++];
        return {
            value: value,
            done: done
        }
    }
};
console.log(iterator.next());  //{value: 2, done: false}
console.log(iterator.next());  //{value: 4, done: false}
console.log(iterator.next());  //{value: 6, done: false}
console.log(iterator.next());  //{value: undefined, done: true}

二.生成器

1.生成器是返回迭代器的函數,如下:

function *createIterator() {
    yield 1;
    yield 2;
    yield 3;
}
let iterator = createIterator();
console.log(iterator.next());  //{value: 1, done: false}
console.log(iterator.next());  //{value: 2, done: false}
console.log(iterator.next());  //{value: 3, done: false}
console.log(iterator.next());  //{value: undefined, done: true}

2.生成器有幾點要注意的:

  • 當執行流遇到yield語句時,該生成器就停止運轉了,直到迭代器再次調用next
  • 可以再for循環中使用yield
  • yield只能用在生成器的內部,即使是生成器內部的函數也不行,即:yield無法跨越函數邊界
  • 無法使用箭頭函數創建生成器
  • 生成器可以存在于對象的屬性中

三.for-of循環

1.可迭代類型:指那些包含Symbol.iterator屬性的對象,該屬性定義了返回迭代器的函數(如:數組,set,map等)

2.for-of循環可以循環可迭代類型,for-of循環會在可迭代類型每次執行后調用next()并將結果存儲在變量中,循環會持續進行,直到結果對象的done屬性為true

3.for-of循環會調用數組的Symbol.iterator屬性來獲取迭代器(該方法由幕后的js引擎調用),并將調用iterator.next(),并將該結果對象的value屬性的值賦給num,直到done為true,循環會退出,num不會被賦給undefined,代碼如下:

let values = [1, 2, 3];
for (let item of values) {
    console.log(item);   //1 2 3
}

4.對于非可迭代對象,如nullundefined,使用for-of循環會拋出錯誤

5.可以在for-of循環中使用解構

let map = new Map();
map.set('name', 'sxt');
map.set('age', 2);
for(let [key, value] of map) {
    console.log(key + " = " + value);
}
//輸出:
//name = sxt
//age = 2

6.for-of循環可以用于循環NodeList

四.Symbol.iterator

1.可以用Symbol.iterator屬性來訪問對象默認的迭代器,如:

let arr = [6, 7, 8];
let iterator = arr[Symbol.iterator]();
console.log(iterator.next());  //{value: 6, done: false}
console.log(iterator.next());  //{value: 7, done: false}
console.log(iterator.next());  //{value: 8, done: false}
console.log(iterator.next());  //{value: undefined, done: true}

2.判斷一個對象是否可以迭代,可以通過判斷Symbol.iterator屬性是否是一個函數來實現,如:

function isIterator(obj) {
    return typeof obj[Symbol.iterator] === 'function';
}

let arr = [1, 3, 4];
let num = 1;
console.log(isIterator(arr)); //true
console.log(isIterator(num)); //false

3.創建可迭代類型: 我們自己定義的對象默認是不可迭代類型,但是我們可以通過設置Symbol.iterator屬性來使這個對象可以迭代。因為前面第3點有講到,判斷一個對象是否可以迭代,其實是通過Symbol.iterator屬性來確定的,由此可以創建下面的對象

let obj = {
    *[Symbol.iterator]() {
        yield 1;
        yield 2;
        yield 3;
    }
};
for (let item of obj) {
    console.log(item);  //1 2 3
}

五.內置迭代器

1.我們平常迭代數組,set和map時,能拿到迭代的值,是因為這些集合中有內置的迭代器,如

let arr = [1, 3, 5];
let set = new Set();
set.add('time');
set.add('user');
set.add('family');
let map = new Map();
map.set('name', 'sxt');
map.set('age', 12);
map.set('sister', 'andy');

for(let item of arr) {
    console.log(item);  // 1 3 5
}
for(let item of set) {
    console.log(item); //time user family
}
for(let item of map) {
    console.log(item); //["name", "sxt"]  ["age", 12] ["sister", "andy"]
}

2.內置迭代器分為三種

  • entries()
  • keys()
  • values()

3.數組的entries返回的是[索引,值],set的entries是[值,值],因為set的鍵值是一樣的,map的entries是[鍵名,鍵值],如:

let arr = [1, 3, 5];
let set = new Set();
set.add('time');
set.add('user');
set.add('family');
let map = new Map();
map.set('name', 'sxt');
map.set('age', 12);
map.set('sister', 'andy');

for(let item of arr.entries()) {
    console.log(item);  // [0, 1]  [1, 3]  [2, 5]
}
for(let item of set.entries()) {
    console.log(item); //["time", "time"]  ["user", "user"] ["family", "family"]
}
for(let item of map.entries()) {
    console.log(item); //["name", "sxt"]  ["age", 12] ["sister", "andy"]
}

4.數組的keys返回的索引,set的keys返回的還是值,map的keys返回的是值
5.數組,set,map的values返回的都是值

六.向迭代器中傳遞參數

1.我們可以向迭代器中傳遞參數

function *createIterator() {
    let first = yield 1;
    let second = yield first + 2;
    yield second + 3;
}

let iterator = createIterator();
console.log(iterator.next());   //{value: 1, done: false}
console.log(iterator.next(4));  //{value: 6, done: false}
console.log(iterator.next(5));  //{value: 8, done: false}
console.log(iterator.next());   //{value: undefined, done: true}
  • 這里的難點是理解右側的代碼會和左邊的中斷
  • 首次調用next的時候,不管傳入什么參數都會被忽略,因為傳入的參數會作為yield語句的返回值,而第一次只是yield 1,而沒有變量

七.包含return語句的生成器

function *createIterator() {
    yield 1;
    return 133;
    yield 2;
    yield 3;
}

let iterator = createIterator();
console.log(iterator.next());   //{value: 1, done: false}
console.log(iterator.next(4));  //{value: 133, done: true}
console.log(iterator.next(5));  //{value: undefined, done: true}
console.log(iterator.next());   //{value: undefined, done: true}

  • return會讓它提前執行完畢并針對next的調用返回一個值

八.生成器代理

1.即,在一個生成器中調用另外的生成器,有時候,這樣的操作會更加的實用

function *create1() {
    yield 1;
    yield 2;
    yield 3;
}

function *create() {
    yield *create1();
    yield true;
}


let iterator = create();
console.log(iterator.next());  //{value: 1, done: false}
console.log(iterator.next());  //{value: 2, done: false}
console.log(iterator.next());  //{value: 3, done: false}
console.log(iterator.next());  //{value: true, done: false}
console.log(iterator.next());  //{value: undefined, done: true}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容