js之数组，对象，类数组对象

数组定义：简而言之就是一组有序的数据集合，其索引为从0开始且自然增长的整数，其元素值可以是任何js数据！并且包含一个名为length的属性，该属性表示数组元素的个数！

看着上面的定义，我们很容易就能大概知道数组是什么样的东西，下面我们来看个简单的例子：

1 2 3 4 5

var  array = [1,2,3]; console.log(array[0]) //1 ​console.log(array[1]) //2 ​console.log(array[2]) //3 ​console.log(array[ 'length' ]) //3

　　

从上面的例子我们可以看到，在声明数组时，我们只是显式的声明了数组元素的值，并没有显式的给这些值定义索引和length属性，但是在数组定义好后我们发现就可以直接使用数组的索引值来操作数组的元素了，从这不难看出，数组元素的索引和length属性是在数组定义时根据数组元素语言自动就帮你定义好了！而且很容易就能看出来，索引值是从0开始并且自然递增的！

 

对象定义：js中对象类型为一组无序的由键->值组成的数据集合，其元素的键名和值都可以自定义！

我们来看一个例子：

1 2 3 4

var  object = { 'a' : 1,  'b' : 2} console.log(object[ 'a' ]) //1 console.log(object[ 'b' ]) //2 console.log(object[ 'length' ]) //undefined

　　

从上面的例子简单来看，对象自身所拥有的（不包括继承来的）任何属性都是有用户自定义的！

 

数组与对象：

从上面的定义和例子上来看，不知道大家有没有发现，数组和对象在某些地方或时候其实是很相像的！

我们先看看他们相同的部分，首先我们可以把数组的索引值看成的元素的键名，元素看成是值，那么数组是不是也变成了键->值构成的了！

我们在来看看他们不一样的地方，数组的所以值始终的从0开始递增的数字，对象的属性值可以是任何自定义的字符串，并且数组包含一个length属性，而对象自身所拥有的（不包括继承来的）任何属性都是有用户自定义的！也就是说我们，我们可以给显式的给对象定义length属性！

1 2 3 4

var  arr = [1,2,3]; var  obj = {0: 1, 1: 2, 2: 3, length: 3}; console.log(arr[0], obj[0]) //1, 1 console.log(arr[ 'length' ], obj[ 'length' ]) //1, 1

　　

通过对比，我们发现完全可以使用对象来模拟数组，只要我们定义的对象的每个元素的键名都使用数字并且让其保持递增，且动态的定义一个length属性来表示元素个数，那么从效果上来说，基本就个数组相同了！这就是我们要说的：

类数组对象：只包含使用从零开始，且自然递增的整数做键名，并且定义了length表示元素个数的对象，我们就认为他是类数组对象！

 

类数组对象不仅是效果上跟数组相似，并且在某些操作上也相同：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//定义数组和类数组对象 var  arr = [1,2,3]; var  obj = {0: 1, 1: 2, 2: 3, length: 3}; //元素读写操作 console.log(arr[0], obj[0]) //1, 1 console.log(arr[ 'length' ], obj[ 'length' ]) //1, 1 arr[0] = 9; obj[0] = 9;   //遍历 for ( var  i = 0, len = arr.length; i < len; i++) {      arr[i].... } for ( var  i = 0, len = obj.length; i < len; i++) {      obj[i].... }

　　

我们看到，不仅在读写等操作上类数组对象和数组相似，并且在遍历元素上都可以使用for循环进行遍历！

 

 

通过上面我们对于定义的介绍，以及简单的对比，我们不难看出，其实我们可以从数据结构上把js的数组归为对象，因为我们可以使用对象来模拟数组，当然这里仅仅说的是数据结构上，其实他们本身所继承来的方法和一些属性是不同的！在平常的理解中大家可以把数组看成是特殊的对象，以方便理解！ 

类数组Array-like定义：

• 拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)
• 不具有数组所具有的方法

ps：这是我参考的定义，实际上，只要有length属性，且它的属性值为number类型就行了。请围观评论。

类数组示例：

var a = {'1':'gg','2':'love','4':'meimei',length:5};
Array.prototype.join.call(a,'+');//'+gg+love++meimei'

非类数组示例：

var c = {'1':2};

没有length属性，所以就不是类数组。

javascript中常见的类数组有arguments对象和DOM方法的返回结果。
比如 document.getElementsByTagName()。

类数组判断

《javascript权威指南》上给出了代码用来判断一个对象是否属于“类数组”。如下：

// Determine if o is an array-like object.
// Strings and functions have numeric length properties, but are 
// excluded by the typeof test. In client-side JavaScript, DOM text
// nodes have a numeric length property, and may need to be excluded 
// with an additional o.nodeType != 3 test.
function isArrayLike(o) {
    if (o &&                                // o is not null, undefined, etc.
        typeof o === 'object' &&            // o is an object
        isFinite(o.length) &&               // o.length is a finite number
        o.length >= 0 &&                    // o.length is non-negative
        o.length===Math.floor(o.length) &&  // o.length is an integer
        o.length < 4294967296)              // o.length < 2^32
        return true;                        // Then o is array-like
    else
        return false;                       // Otherwise it is not
}

类数组表现

之所以成为“类数组”，就是因为和“数组”类似。不能直接使用数组方法，但你可以像使用数组那样，使用类数组。

var a = {'0':'a', '1':'b', '2':'c', length:3};  // An array-like object
Array.prototype.join.call(a, '+'');  // => 'a+b+c'
Array.prototype.slice.call(a, 0);   // => ['a','b','c']: true array copy
Array.prototype.map.call(a, function(x) { 
    return x.toUpperCase();
});                                 // => ['A','B','C']:

类数组对象转化为数组

有时候处理类数组对象的最好方法是将其转化为数组。

Array.prototype.slice.call(arguments)

然后就可以直接使用数组方法啦。

var a = {'0':1,'1':2,'2':3,length:3};
var arr = Array.prototype.slice.call(a);//arr=[1,2,3]

对于IE9以前的版本(DOM实现基于COM)，我们可以使用makeArray来实现。

// 伪数组转化成数组
var makeArray = function(obj) {
    if (!obj || obj.length === 0) {
        return [];
    }
    // 非伪类对象，直接返回最好
    if (!obj.length) {
        return obj;
    }
    // 针对IE8以前 DOM的COM实现
    try {
        return [].slice.call(obj);
    } catch (e) {
        var i = 0,
            j = obj.length,
            res = [];
        for (; i < j; i++) {
            res.push(obj[i]);
        }
        return res;
    }

};