Array.from(arr)與[...arr]到底有什麼不一樣

寫在開頭：在正文開始以前咱們先說明一下類數組(估計你們必定不會陌生)

• 類數組的特色
  • 1.有索引
  • 2.有長度
  • 3.是個對象
  • 4.能被迭代(非必須)

特色說明：對於類數組的特色前三個我就不作說明了哈，主要就是最後一個，能被迭代須要具有什麼呢？由圖咱們能夠看出有一個[Symbol.iterator]屬性指向該對象的默認迭代器方法。那麼它又是如何實現的呢？

• 迭代器(iterator)
  • 做用(參考阮一峯老師的ES6)
    • 1.爲各類數據結構提供一個統一的，簡單的訪問接口
    • 2.使數據結構的成員能按照某種次序排序
    • 3.供for...of循環消費
  • 工做原理
    • 1.建立一個指針對象，指向當前數據結構的起始位置(而且有一個next方法)
    • 2.第一次調用對象的next方法，能夠將指針指向數據結構的第一個成員
    • 3.第二次調用對象的next方法，能夠將指針指向數據結構的第二個成員
    • 4.不斷調用對象的next方法直到他指向數據結構的結束爲止
    • 注：每一次調用next方法都會返回一個包含value和done兩個屬性的對象，前者表明當前指針指向的數據結構成員的值，後者表明迭代是否結束
  • 舉例說明

// 首先咱們先建立一個待迭代的對象
let obj = {0:'Gu',1:'Yan',2:'No.1',length:3};
console.log([...obj]);// 報錯 Uncaught TypeError: obj is not iterable
console.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會暫停執行

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模塊來模擬異步

// 實現前提 同級目錄下建立name.txt age.txt 文件；name.txt中存儲age.txt，age.txt中存儲20
let 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