什么是類數(shù)組對象

有l(wèi)ength屬性和若干索引屬性的對象。

var array = ['name', 'age', 'sex'];

var arrayLike = {
    0: 'name',
    1: 'age',
    2: 'sex',
    length: 3
}

為什么叫類數(shù)組

類數(shù)組對象可以執(zhí)行一些常見的數(shù)組操作，比如讀寫數(shù)據(jù)、獲取長度（length屬性）、遍歷

• 讀寫

array[0]   //name
arrayLike[0] //name

array[0] = "Jona";   //Jona age sex
arrayLike[0] = "Jonason";  // 0 : Jonason

• 獲取長度

array.length //3
arrayLike.length // 3

• 遍歷

for(let i=0;i<arrayLike.length;i++)
console.log(arrayLike[i]);
// name age sex

雖稱為類數(shù)組但是他不是真正的數(shù)組，因此直接調(diào)用數(shù)組的方法會報(bào)錯。
可以通過Function.call來間接調(diào)用。

Array.prototype.slice.call(arguments);

類數(shù)組轉(zhuǎn)換為數(shù)組

• call + 多個數(shù)組方法實(shí)現(xiàn)

[].slice.call(arrayLike)
[].splice.call(arraayLike)
[].map.call(arrayLike,(item)=>{return item})
[].filter.call(arrayLike,(item)=>{return item})
[].forEach.call(arrayLike.(item)=>{arr.push(item)}) //創(chuàng)建一個數(shù)組
[].reduce.call(arrayLike,(pre,cur)=>{return pre.concat(cur)},[]);
//([].reduceRight.call(arrayLike,(pre,cur)=>{return pre.concat(cur)},[])).reverse();  
//本想通過這樣實(shí)現(xiàn)，不過這種方法是從后往前遍歷，
//如果Length屬性放到arrayList最后面，就無法正常轉(zhuǎn)換出來

• apply + concat

[].concat.apply([],arguments); //注意空數(shù)組的位置

• ES6中的Array.from()方法。

Array.from()方法可以接受一個可迭代對象或類數(shù)組對象作為第一個參數(shù)，返回一個數(shù)組。如果想對類數(shù)組對象有進(jìn)一步的操作，可以在from()方法中傳入一個映射函數(shù)作為第二個參數(shù)。

Array.from(arguments);

• ES6展開運(yùn)算符...

let arr = [...arguments]

這里要特別注意： 展開運(yùn)算符只能用于可迭代對象，對于arguments，nodelist這樣的內(nèi)置iterator接口的可以用這種方式，類似arrayLike的對象，需要給Symbol.iterator屬性添加一個生成器，就可以變成一個可迭代對象。

var arrayLike = {
    0:"name",
    1:"age",
    2:"gender",
    *[Symbol.iterator]() {
        yield arrayLike[0];
        yield arrayLike[1];
        yield arrayLike[2];
    }
}

這樣通過[...arrayLike]就可以獲得一個數(shù)組了

常見的類數(shù)組對象

• arguments
• nodeList

NodeList中擁有默認(rèn)的迭代器，其行為與數(shù)組的默認(rèn)迭代器相同，即使用的是內(nèi)置的values()迭代器

• HTMLCollection

參考

JavaScript深入之類數(shù)組對象與arguments