Javascript(笔记19) - 类数组
原创
©著作权归作者所有:来自51CTO博客作者ahuiok的原创作品,请联系作者获取转载授权,否则将追究法律责任
【笔记19】Javascript - 类数组
类数组
1,可以利用属性名模拟数组的特性;
2,可以动态的增长length属性;
3,如果强行让类数组调用 push 方法,则会根据 length 属性值的位置进行属性的扩充。
看个情况:
function test(){
console.log(arguments);
}
test(1,3,4,5,6);
看结果:
![Javascript(笔记19) - 类数组_对象](https://s2.51cto.com/images/202211/98123e036deea5e59f4726262ddd8eec1b4738.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184)
结果看起来就像个数组,那给他push个数据看看?
function test(){
console.log(arguments);
arguments.push(7);
}
test(1,3,4,5,6);
![Javascript(笔记19) - 类数组_数组_02](https://s2.51cto.com/images/202211/9480eb611f548245d38110347a1c9c543e360c.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184)
又报错,说明看起来像,但不是。
再来看情况:
var obj = {
"0": "a",
"1": "b",
"2": "c",
"length": 3,
"push": Array.prototype.push
}
来看下控制台:
![Javascript(笔记19) - 类数组_数组_03](https://s2.51cto.com/images/202211/36db79847a91297982e99922b2d8322615188c.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184)
奇怪的情况发生了,明明是个对象,这样就具备数组的特性,即能 push 进数据,还改变了 length 的值。
类数组的特点:属性要为索引(数字)属性,必须有length属性,最好加上push。
如果再加上 splice 属性就更像了。
var obj = {
"0": "a",
"1": "b",
"2": "c",
"length": 3,
"push": Array.prototype.push,
"splice": Array.prototype.splice
}
看下控制台:
![Javascript(笔记19) - 类数组_对象_04](https://s2.51cto.com/images/202211/814988287075af1d011991f97b3e7d98fa89da.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184)
这样就更像数组了 ,那么,像数组能不能当数组那样用呢?可以。
先来看一下数组里的 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");
是什么结果。
![Javascript(笔记19) - 类数组_数组_05](https://s2.51cto.com/images/202211/b52612350f1dba72318152f36893db94057e12.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184)
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");
看下控制台:
![Javascript(笔记19) - 类数组_数组_06](https://s2.51cto.com/images/202211/2888d4f7330e6fdba2883335f16e9751616635.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184)
利用了数组的 push 方法,完美实现了添加数据的功能,还保留着对象本身的属性:
![Javascript(笔记19) - 类数组_对象_07](https://s2.51cto.com/images/202211/333cc424866e9ee708e89481b4c5c011953895.png?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=,x-oss-process=image/resize,m_fixed,w_1184)
用这个实例就呈现了类组数的3点应用,后面 DOM 的应用中,可以用到类数组。