JavaScript類數(shù)組和可迭代對象如何實(shí)現(xiàn)
本篇內(nèi)容介紹了“JavaScript類數(shù)組和可迭代對象如何實(shí)現(xiàn)”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
成都創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)渭濱,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792
可迭代對象（Iterable object）
數(shù)組是一個特殊的對象，它和普通對象的區(qū)別不僅僅在于元素的順序訪問、存儲。另外一個重要的區(qū)別是：數(shù)組是可迭代的，也就是可以使用for ... of語句訪問（迭代）所有的元素。
我們可以簡單的做一個小實(shí)驗(yàn)：
let arr = [1,2,3,4,5]for(let val of arr){
console.log(val)}代碼執(zhí)行結(jié)果：
以上代碼就簡單的使用了數(shù)組的迭代特性，我們在訪問數(shù)組元素的時(shí)候，不必使用元素的下標(biāo)。
如果我們對一個普通對象使用for ... of語句會發(fā)生什么呢？
let obj = {
name:'xiaoming',
age:12,}for(let para of obj){ //代碼會報(bào)錯
console.log(para)}執(zhí)行效果如下：
這就證明普通的對象和數(shù)組之間還有一個可迭代的差距，我們稱具備迭代功能的對象為可迭代對象。
Symbol.iterator
如果我們希望一個對象可以迭代，必須為對象添加一個名為Symbol.iterator的方法（一個專門使對象可迭代的內(nèi)建Symbol）。
方法作用包括：
當(dāng)使用
for ... of循環(huán)迭代對象時(shí)，就會調(diào)用Symbol.iterator方法，這個方法必須返回一個迭代器（一個有next()方法的對象）。得到迭代器后，
for ... of會不斷的調(diào)用迭代器的next()方法獲得下一個元素。next()方法返回的內(nèi)容必須符合格式：{done:Boolean,value:any}，當(dāng)done:true時(shí)，循環(huán)結(jié)束，否則value就是下一個值。
迭代器：
迭代器是借鑒
C++等語言的概念，迭代器的原理就像指針一樣，它指向數(shù)據(jù)集合中的某個元素，你可以獲取它指向的元素，也可以移動它以獲取其它元素。迭代器類似于數(shù)組中下標(biāo)的拓展，各種數(shù)據(jù)結(jié)構(gòu)，如鏈表（List）、集合（Set）、映射（Map）都有與之對應(yīng)的迭代器。
JS中的迭代器是專門為了遍歷這一操作設(shè)計(jì)的。每次獲取到的迭代器總是初始指向第一個元素，并且迭代器只有next()一種行為，直到獲取到數(shù)據(jù)集的最后一個元素。我們無法靈活移動迭代器的位置，所以，迭代器的任務(wù)，是按某種次序遍歷數(shù)據(jù)集中的元素。
實(shí)現(xiàn)一個可迭代對象：
let obj = {
from:1,
to:5,}obj[Symbol.iterator] = function(){
//返回一個迭代器
return {
current:this.from,
last:this.to,
next(){
if(this.current代碼執(zhí)行效果：
注意，以上對象雖然可以進(jìn)行迭代了，但是，迭代使用使用的材料并非對象，而是Symbol.iterator返回的迭代器（也是一個對象）。
把對象本身構(gòu)造成迭代器
以上代碼構(gòu)造了一個內(nèi)建函數(shù)Symbol.iterator()，這個函數(shù)返回了一個迭代器對象。我們還可以采用另外一種實(shí)現(xiàn)迭代器的方式：把對象本身做成迭代器：
let obj = {
from:1,
to:5,
[Symbol.iterator](){
this.current = this.from;
return this;//返回對象本身
},
next(){//給對象添加一個next方法
if(this.current代碼執(zhí)行效果和上面的圖片展示相同。
這么做雖然代碼更加簡潔了，但是由于并沒有新的可迭代對象產(chǎn)生，我們就沒有辦法同時(shí)執(zhí)行兩個for ... of循環(huán)迭代同一個對象了，但是兩個并行的迭代在同一個對象上是非常罕見的。
我們可以總結(jié)可迭代對象的概念：
所謂可迭代對象，就是比普通對象多了一個名為Symbol.iterator方法的普通對象，這個方法返回一個迭代器。
或者，一個具備Symbol.iterator同時(shí)具備next方法的對象也是一個可迭代的對象。
String也是可迭代的
數(shù)組和字符串都是可以迭代的，我們可以很方便的使用for...of語句迭代數(shù)組中的字符元素：
let str = '123'for(let c of str){
console.log(c)}這對于代理對（UTF-16擴(kuò)展字符）同樣是有效的：
let str = '...'for(let c of str){
console.log(c)}執(zhí)行效果如下：
String的迭代器
并非只有for...of語句能夠使用迭代器，我們還可以顯式的調(diào)用迭代器：
let str = '12345'let itr = str[Symbol.iterator]()while(true){
let result = itr.next()
if(result.done)break;
console.log(result.value)}代碼執(zhí)行效果：
以上代碼執(zhí)行了遍歷字符串字符的操作，是不是覺得可迭代對象就沒有這么神秘了！
類數(shù)組對象和可迭代對象
類數(shù)組和可迭代在遍歷功能上非常相似，都可以方便的方式內(nèi)部元素，但是二者仍然有明顯的區(qū)別：
iterable可迭代對象：實(shí)現(xiàn)了Symbol.iterator的對象；
array-like類數(shù)組對象：具有數(shù)字索引，并且有length屬性；
字符串就是一個即使類數(shù)組又是可迭代的對象。
可迭代和類數(shù)組對象通常都不是數(shù)組，如果我們想把一個可迭代或者類數(shù)組對象轉(zhuǎn)為數(shù)組，需要使用Array.from方法。
Array.from
使用Array.from將字符串轉(zhuǎn)為數(shù)組：
let str = '123'let arr = Array.from(str)console.log(arr)
代碼執(zhí)行效果如下：
把自定義的類數(shù)組對象轉(zhuǎn)為數(shù)組：
let obj = {
0:'0',
1:'1',
2:'2',
length:3}let arr = Array.from(obj)console.log(arr)代碼執(zhí)行結(jié)果：
Array.from的完整語法：
Array.from(obj[, mapFunc, thisArg])
mapFunc方法會在生成數(shù)組之前對每個可迭代或類數(shù)組元素調(diào)用，如果mapFunc是一個成員方法，可以使用thisArg提供this指針。
舉個例子：
let str = '12345'let arr = Array.from(str,itm=>+itm)console.log(arr)
代碼執(zhí)行結(jié)果：
這里通過映射函數(shù)，將本應(yīng)該生成字符數(shù)組轉(zhuǎn)為數(shù)字?jǐn)?shù)組。
“JavaScript類數(shù)組和可迭代對象如何實(shí)現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
當(dāng)前題目：JavaScript類數(shù)組和可迭代對象如何實(shí)現(xiàn)
轉(zhuǎn)載來于：http://m.jiaotiyi.com/article/ihspdj.html