js 【详解】伪数组/类数组

伪数组的定义

类似数组一样，具有索引(下标)和length属性，但不具备数组方法（如push，shift，map等）的对象，被称为伪数组（或类数组）。

伪数组的范例

let fakeArray = {
    length: 3,
    "0": "first",
    "1": "second",
    "2": "third"
};

// 以下形式的对象，也是伪数组
var obj3 = { length: 0 };
var obj4 = { 0: '888', length: 1 };
var obj5 = { 99: 'abc', length: 100 }

伪数组可以使用for进行遍历

for (var i = 0; i < fakeArray.length; i++) {
    console.log(fakeArray[i]);
}

伪数组与数组进行对比 

伪数组 

fakeArray instanceof Array === false;
Object.prototype.toString.call(fakeArray) === "[object Object]";
Array.isArray(fakeArray) === false;

数组 

let arr = [1,2,3,4,6];
arr instanceof Array === true;
Object.prototype.toString.call(arr) === "[object Array]"
Array.isArray(arr) === true;

常见的伪数组

• 函数的参数列表 arguments
• DOM 对象列表（如通过 document.getElementsByTags 得到的列表，jQuery中的$("div")）

判断是否为伪数组

// 使用lodash
_.isArrayLike([1, 2, 3]);
// => true
 
_.isArrayLike(document.body.children);
// => true
 
_.isArrayLike('abc');
// => true
 
_.isArrayLike(_.noop);
// => false

 伪数组 => 真数组

// 伪数组 —— DOM对象列表
let fakeArr = document.getElementsByTagName('div');

 方式一：【ES6】 Array.from() 【推荐】

let realArr = Array.from(fakeArr);

方式二：使用Array.prototype.slice.call()方法

let realArr = Array.prototype.slice.call(fakeArr);

方式三：声明一个空数组，通过遍历伪数组把它们添加到新的数组中