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

JavaScript · 發表 2019-04-08 22:48:34

摘要：寫在開頭：在正文開始之前我們先說明一下類陣列(估計大家一定不會陌生) 類陣列的特點 1.有索引 2.有長度 3.是個物件 4.能被迭代特點說明：對於類陣列的特點前三個我就不做說明了哈，...

寫在開頭：在正文開始之前我們先說明一下類陣列(估計大家一定不會陌生)

類陣列的特點
- 1.有索引
- 2.有長度
- 3.是個物件
- 4.能被迭代

特點說明：對於類陣列的特點前三個我就不做說明了哈，主要就是最後一個，能被迭代需要具備什麼呢？由圖我們可以看出有一個 [Symbol.iterator] 屬性指向該物件的預設迭代器方法。那麼它又是如何實現的呢？

迭代器( iterator )
- 作用(參考阮一峰老師的 ES6 )
```
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

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

generator 生成器

您可能也會喜歡…

`generator` 生成器