實例分析Array.from(arr)與[...arr]到底有何不同

更新時間：2019年04月09日 11:37:11 作者：Gu_Yan

這篇文章通過實例主要給大家分析介紹了關于Array.from(arr)與[...arr]到底有何不同的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧

寫在開頭：

在正文開始之前我們先說明一下類數(shù)組(估計大家一定不會陌生)

類數(shù)組的特點

1.有索引

2.有長度

3.是個對象

4.能被迭代

特點說明：對于類數(shù)組的特點前三個我就不做說明了哈，主要就是最后一個，能被迭代需要具備什么呢？由圖我們可以看出有一個[Symbol.iterator]屬性指向該對象的默認迭代器方法。那么它又是如何實現(xiàn)的呢？

迭代器(iterator)

作用(參考阮一峰老師的ES6)

1.為各種數(shù)據(jù)結構提供一個統(tǒng)一的，簡單的訪問接口

2.使數(shù)據(jù)結構的成員能按照某種次序排序

3.供for...of循環(huán)消費

工作原理

1.創(chuàng)建一個指針對象，指向當前數(shù)據(jù)結構的起始位置(并且有一個next方法)

2.第一次調用對象的next方法，可以將指針指向數(shù)據(jù)結構的第一個成員

3.第二次調用對象的next方法，可以將指針指向數(shù)據(jù)結構的第二個成員

4.不斷調用對象的next方法直到他指向數(shù)據(jù)結構的結束為止

注：每一次調用next方法都會返回一個包含value和done兩個屬性的對象，前者代表當前指針指向的數(shù)據(jù)結構成員的值，后者代表迭代是否結束

舉例說明

// 首先我們先創(chuàng)建一個待迭代的對象
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"]

通過上面的例子我相信文章前的你肯定可以懂得標題的答案了吧

雖然我們可以手動寫出迭代器函數(shù)但是你不覺得很麻煩嗎，所以又到了我們的另外一個知識點那就是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來使用如果碰到y(tǒng)ield會暫停執(zhí)行

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 函數(shù)的執(zhí)行順序分析(配合圖片)

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 
/*如果我們第二次是傳入?yún)?shù)調用*/
it.next(100) // a 100
// 第三次調用
it.next(200) // b 200
// 第四次調用 
it.next(300) // c 300

當generator函數(shù)遇到Promise來處理異步串行

代碼示例采用node的fs模塊來模擬異步

// 實現(xiàn)前提 同級目錄下創(chuàng)建name.txt age.txt 文件；name.txt中存儲age.txt，age.txt中存儲20
let fs = require('mz/fs');//我們直接使用mz包來實現(xiàn)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
  })
 })
})

對上述代碼調用進行封裝（實現(xiàn)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 函數(shù)執(zhí)行后返回一個promise
// 可以使用try + catch ，但如果使用try + catch 返回的就是真
guYan().then(data=>{
 console.log(data);
})

處理方案比較

1.callback 多個請求并發(fā) 不好管理鏈式調用導致回調嵌套過多

2.promise優(yōu)點可以優(yōu)雅的處理異步處理錯誤，基于回調的，還是會有嵌套問題

3.generator + co 讓代碼像同步（比如dva）不能支持try catch

4.async + await 可以是異步像同步一樣處理，返回一個promise 支持try catch

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。

您可能感興趣的文章: