寫在開頭：
在正文開始之前我們先說明一下類數組(估計大家一定不會陌生)
類數組的特點
1.有索引
2.有長度
3.是個對象
4.能被迭代
特點說明：對于類數組的特點前三個我就不做說明了哈，主要就是最后一個，能被迭代需要具備什么呢？由圖我們可以看出有一個[Symbol.iterator]屬性指向該對象的默認迭代器方法。那么它又是如何實現的呢？
迭代器(iterator)
作用(參考阮一峰老師的ES6)
1.為各種數據結構提供一個統一的，簡單的訪問接口
2.使數據結構的成員能按照某種次序排序
3.供for...of循環消費
工作原理
1.創建一個指針對象，指向當前數據結構的起始位置(并且有一個next方法)
2.第一次調用對象的next方法，可以將指針指向數據結構的第一個成員
3.第二次調用對象的next方法，可以將指針指向數據結構的第二個成員
4.不斷調用對象的next方法直到他指向數據結構的結束為止
注：每一次調用next方法都會返回一個包含value和done兩個屬性的對象，前者代表當前指針指向的數據結構成員的值，后者代表迭代是否結束
舉例說明
![Array.from(arr),[...arr]](https://files.vevb.com/file_images/article/201904/201949113310138.jpg?201939113332 "實例分析Array.from(arr)與[...arr]到底有何不同")
// 首先我們先創建一個待迭代的對象let obj = {0:'Gu',1:'Yan',2:'No.1',length:3};console.log([...obj]);// 報錯 Uncaught TypeError: obj is not iterableconsole.log(Array.from(obj));// ["Gu", "Yan", "No.1"]// 接下來我們給待迭代對象添加一個迭代器obj[Symbol.iterator] = function(){ let index = 0; let self = this; return { next(){ return {value:self[index],done:index++ === self.length} } }}console.log([...obj]) // ["Gu", "Yan", "No.1"]console.log(Array.from(obj));// ["Gu", "Yan", "No.1"]通過上面的例子我相信文章前的你肯定可以懂得標題的答案了吧
雖然我們可以手動寫出迭代器函數但是你不覺得很麻煩嗎，所以又到了我們的另外一個知識點那就是generator生成器
generator 生成器
生成器返回的是迭代器，迭代器有next方法，調用next返回value和done
function* guYan(){ }console.log(guYan()) // Object [Generator] {}console.log(guYan().next) // [Function: next]console.loh(guYan().next()) // { value: undefined, done: true }
生成器配合yield來使用如果碰到yield會暫停執行
![Array.from(arr),[...arr]](https://files.vevb.com/file_images/article/201904/201949113506836.jpg?201939113513 "實例分析Array.from(arr)與[...arr]到底有何不同")
function* guYan(){ yield 1, yield 2, yield 3}let it = guYan();console.log(it.next()) // { value: 1, done: false }console.log(it.next()) // { value: 2, done: false }console.log(it.next()) // { value: 3, done: false }console.log(it.next()) // { value: undefined, done: true }通過生成器給obj增加迭代器
obj[Symbol.iterator] = function* (){ // 每次瀏覽器都會不停的調用next方法 把yield的結果作為值 let index = 0; while(index !== this.length){ yield this[index++] }}console.log([...obj]) // ["Gu", "Yan", "No.1"]console.log(Array.from(obj));// ["Gu", "Yan", "No.1"]generatour 函數的執行順序分析(配合圖片)
function* guYan(){ let a = yield 1; console.log('a',a); let b = yield 2; console.log('b',b); let c = yield 3; console.log('c',c);}let it = guYan();//第一次調用it.next()it.next() // 什么都沒有輸出// 第二次調用it.next() // a undefined /*如果我們第二次是傳入參數調用*/it.next(100) // a 100// 第三次調用it.next(200) // b 200// 第四次調用 it.next(300) // c 300
當generator函數遇到Promise來處理異步串行
代碼示例采用node的fs模塊來模擬異步
![Array.from(arr),[...arr]](https://files.vevb.com/file_images/article/201904/201949113916031.jpg?201939113924 "實例分析Array.from(arr)與[...arr]到底有何不同")
// 實現前提 同級目錄下創建name.txt age.txt 文件；name.txt中存儲age.txt，age.txt中存儲20let fs = require('mz/fs');//我們直接使用mz包來實現fs的promise化let path = require('path');function* guYan() { let name = yield fs.readFile(path.resolve(__dirname, './name.txt'), 'utf-8'); name = yield './' + name; let age = yield fs.readFile(path.resolve(__dirname, name), 'utf-8'); return age;}let it = guYan();let { value } = it.next();value.then(data => { let { value } = it.next(data); Promise.resolve(value).then(data => { let { value } = it.next(data) value.then(data => { let { value } = it.next(data); console.log(value) // 20 }) })})對上述代碼調用進行封裝（實現co庫）
let fs = require('mz/fs');let path = require('path');function* guYan() { let name = yield fs.readFile(path.resolve(__dirname, './name.txt'), 'utf-8'); name = yield './' + name; let age = yield fs.readFile(path.resolve(__dirname, name), 'utf-8'); return age;}function co(it){ return new Promise((resolve,reject)=>{ function next(val){ let {value , done} = it.next(val); if(done){ return resolve(value); } Promise.resolve(value).then(data=>{ next(data) }) } next(); })}co(guYan()).then(data=>{ console.log(data); // 20})通過async+await 來簡化
// 上述代碼可以簡化為let fs = require('mz/fs');let path = require('path');async function guYan() { let name = await fs.readFile(path.resolve(__dirname, './name.txt'), 'utf-8'); name = './' + name; let age = await fs.readFile(path.resolve(__dirname, name), 'utf-8'); return age;}// async 函數執行后返回一個promise// 可以使用try + catch ，但如果使用try + catch 返回的就是真guYan().then(data=>{ console.log(data);})處理方案比較
1.callback 多個請求并發 不好管理 鏈式調用 導致回調嵌套過多
2.promise優點 可以優雅的處理異步 處理錯誤，基于回調的，還是會有嵌套問題
3.generator + co 讓代碼像同步（比如dva）不能支持try catch
4.async + await 可以是異步像同步一樣處理，返回一個promise 支持try catch
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對VeVb武林網的支持。
新聞熱點
疑難解答
