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

Array.from(arr)與[...arr]的區(qū)別是什么？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

創(chuàng)新互聯(lián)建站專注于藁城網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供藁城營銷型網(wǎng)站建設(shè)，藁城網(wǎng)站制作、藁城網(wǎng)頁設(shè)計、藁城網(wǎng)站官網(wǎng)定制、小程序定制開發(fā)服務(wù)，打造藁城網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供藁城網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

類數(shù)組的特點

1.有索引

2.有長度

3.是個對象

4.能被迭代

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

迭代器(iterator)

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

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

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

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

工作原理

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

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

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

4.不斷調(diào)用對象的next方法直到他指向數(shù)據(jù)結(jié)構(gòu)的結(jié)束為止

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

舉例說明

// 首先我們先創(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"]

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

雖然我們可以手動寫出迭代器函數(shù)但是你不覺得很麻煩嗎，所以又到了我們的另外一個知識點那就是generator生成器

generator 生成器

生成器返回的是迭代器，迭代器有next方法，調(diào)用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* (){
 // 每次瀏覽器都會不停的調(diào)用next方法 把yield的結(jié)果作為值
 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();
//第一次調(diào)用it.next()
it.next() // 什么都沒有輸出
// 第二次調(diào)用
it.next() // a undefined 
/*如果我們第二次是傳入?yún)?shù)調(diào)用*/
it.next(100) // a 100
// 第三次調(diào)用
it.next(200) // b 200
// 第四次調(diào)用 
it.next(300) // c 300

當(dāng)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
  })
 })
})

對上述代碼調(diào)用進(jìn)行封裝（實現(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ā) 不好管理 鏈?zhǔn)秸{(diào)用 導(dǎo)致回調(diào)嵌套過多

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

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

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

看完上述內(nèi)容，你們掌握Array.from(arr)與[...arr]的區(qū)別是什么的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享名稱：Array.from(arr)與[...arr]的區(qū)別是什么
分享鏈接：http://bm7419.com/article40/igeiho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、網(wǎng)站設(shè)計、商城網(wǎng)站、網(wǎng)站改版、、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)