Javascript(笔记19) - 类数组

【笔记19】Javascript - 类数组

类数组

1，可以利用属性名模拟数组的特性；

2，可以动态的增长length属性；

3，如果强行让类数组调用 push 方法，则会根据 length 属性值的位置进行属性的扩充。

看个情况：

function test(){
    console.log(arguments);
}
test(1,3,4,5,6);

看结果：

结果看起来就像个数组，那给他push个数据看看？

function test(){
    console.log(arguments);
    arguments.push(7);
}
test(1,3,4,5,6);

又报错，说明看起来像，但不是。

再来看情况：

var obj = {
    "0": "a",
    "1": "b",
    "2": "c",
    "length": 3,
    "push": Array.prototype.push
}

来看下控制台：

奇怪的情况发生了，明明是个对象，这样就具备数组的特性，即能 push 进数据，还改变了 length 的值。

---

类数组的特点：属性要为索引(数字)属性，必须有length属性，最好加上push。

如果再加上 splice 属性就更像了。

var obj = {
    "0": "a",
    "1": "b",
    "2": "c",
    "length": 3,
    "push": Array.prototype.push,
    "splice": Array.prototype.splice
}

看下控制台：

这样就更像数组了 ，那么，像数组能不能当数组那样用呢？可以。

先来看一下数组里的 push 是怎么实现的，只模拟 push 传一个参数的情况：

Array.prototype.push = function(target){
    obj[obj.length] = target;
    obj.length ++;
}

当年有个题是这样的： 

var obj={
    "2":"a",
    "3":"b",
    "length":2,
    "push":Array.prototype.push
}

Array.prototype.push = function(target){
    obj[obj.length] = target;
    obj.length ++;
}

现在问：

obj.push("c");
obj.push("d");

是什么结果。

obj[obj.length] = target;    // 相当于 obj[2] = "c"

代入一个 push("c") ， 相当于 ojb[2] = "c"；就把原数组的值替换了。 

---

分析完了类组的性质，来看下应用：

var obj={
    "0" : "a",
    "1" : "b",
    "2" : "c",
    name: "abc",
    age : 20,
    length: 3,
    push: Array.prototype.push,
    splice:Array.prototype.splice    
}
obj.push("d");

看下控制台：

利用了数组的 push 方法，完美实现了添加数据的功能，还保留着对象本身的属性：

    用这个实例就呈现了类组数的3点应用，后面 DOM 的应用中，可以用到类数组。