JS之类数组对象以及转换方法大全

---

什么是类数组对象

有length属性和若干索引属性的对象。

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

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

为什么叫类数组

类数组对象可以执行一些常见的数组操作，比如读写数据、获取长度（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

虽称为类数组但是他不是真正的数组，因此直接调用数组的方法会报错。
可以通过Function.call来间接调用。

Array.prototype.slice.call(arguments);

类数组转换为数组

• call + 多个数组方法实现

[].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)}) //创建一个数组
[].reduce.call(arrayLike,(pre,cur)=>{return pre.concat(cur)},[]);
//([].reduceRight.call(arrayLike,(pre,cur)=>{return pre.concat(cur)},[])).reverse();  
//本想通过这样实现，不过这种方法是从后往前遍历，
//如果Length属性放到arrayList最后面，就无法正常转换出来

• apply + concat

[].concat.apply([],arguments); //注意空数组的位置

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

Array.from()方法可以接受一个可迭代对象或类数组对象作为第一个参数，返回一个数组。如果想对类数组对象有进一步的操作，可以在from()方法中传入一个映射函数作为第二个参数。

Array.from(arguments);

• ES6展开运算符...

let arr = [...arguments]

这里要特别注意： 展开运算符只能用于可迭代对象，对于arguments，nodelist这样的内置iterator接口的可以用这种方式，类似arrayLike的对象，需要给Symbol.iterator属性添加一个生成器，就可以变成一个可迭代对象。

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

这样通过[...arrayLike]就可以获得一个数组了

常见的类数组对象

• arguments
• nodeList

NodeList中拥有默认的迭代器，其行为与数组的默认迭代器相同，即使用的是内置的values()迭代器

• HTMLCollection

参考

JavaScript深入之类数组对象与arguments