数组对象_JavaScript之类数组对象

一、什么是类数组对象

它是一个对象 typeof (变量) === 'object'
拥有length属性
可以通过索引访问元素

举个栗子

var arrLike = {
    0:'jj',
    1:'ii',
    2:'nn',
    3:'gg',
    length: 4
}

类数组对象的访问

类数组对象的赋值

获取类数组对象的长度

如何判断一个对象是类数组对象？《javascript权威指南》中给出了鉴别函数

function isArrayLike(o) {
    if (o &&                                // o 的值不为null、undefined等
        typeof o === 'object' &&            // o 是一个对象
        isFinite(o.length) &&               // o.length 是有限值
        o.length >= 0 &&                    // o.length 必须大于等于0
        o.length===Math.floor(o.length) &&  // o.length 必须是一个整数
        o.length < 4294967296)              // o.length 必须小于2^32 Math.pow(2,32)
        return true;                        // 则，o是类数组
    else
        return false;                       // 否则，o不是类数组对象
}

二、类数组对象与数组的区别

类数组对象不能直接使用数组的方法

• ES5

join、push、pop、shift、unshift、slice、splice、concat、reverse、sort、indexOf、indexLastOf、

• ES6

every、some、filter、map、forEach、reduce、find、findIndex、fill、copyWithin、entries、keys、values、includes、flat、flatMap

三、类数组对象转换为数组的方法

• Array.prototype.slice.call()、[].slice.call()

ES5中slice方法的实现

Array.prototype.slice = function(start, end){
    var result = new Array()  //新建一个空数组
    var start = start || 0
    var end = end || this.length //this指向调用的对象，call改变this的指向，指向传进来的对象
    for(var i=start; i<end; i++){
        result.push(this[i])
    }
    return result
}

举个栗子

var arr1 = Array.prototype.slice.call(arrLike)

var arr2 = Array.prototype.slice.call(arrLike, 0)

var arr3 = [].slice.call(arrLike)

var arr4 = [].slice.call(arrLike,0)

• 原生JS转换

var len = arrLike.length
var arr5 = []
for(var i=0; i<len; i++){
    arr5.push(arrLike[i])
}

• ES6 Array.from()

let arr6 = Array.from(arrLike)

四、常见的类数组对象

Arguments
NodeList 节点集合

document.querySelectorAll('div')

HTMLCollection 元素通用集合

document.getElementsByTagName('div')

string: 是一个只读的类数组对象
String.prototype
window

window.length表示网页中iframe的个数

localStorage
sessionStorage
FileList

//html<input>元素的files属性
<input id='fileWrap' type='file'>

var file = document.getElementById('fileWrap').files;

五、为什么会出现类数组对象？

六、我的问题

所有的数组一定是类数组对象吗？是否可以这样提问？为什么网上没有相关解释？