Array.from(arr)與[...arr]的區別是什么

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

看完上述內容，你們掌握Array.from(arr)與[...arr]的區別是什么的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！