首页 > 编程语言 > 详细

伪数组转数组方法(原生3种)

时间:2017-01-13 08:02:47      阅读:123      评论:0      收藏:0      [点我收藏+]

伪数组也称类数组。像arguments 或者 获取一组元素返回的集合都是伪数组。

伪数组如何转换成真正数组,其实我们很少去这么做,但是那帮面试官可能会问,并且不止一种方法让你去实现

方法一、 声明一个空数组,通过遍历伪数组把它们重新添加到新的数组中,大家都会,这不是面试官要的

1 var aLi = document.querySelectorAll(‘li‘);
2     var arr = [];
3     for (var i = 0; i < aLi.length; i++) {
4         arr[arr.length] = aLi[i]
5     }

方法二、使用数组的slice()方法 它返回的是数组,使用call或者apply指向伪数组 

1 var arr = Array.prototype.slice.call(aLi);

 模拟一下它的内部实现

 技术分享

 方法三 、使用原型继承

aLi.__proto__ = Array.prototype;

1 . 伪数组是html元素集合,虽然看着好像挺奇怪 ,但是总算转换成功,不管它。

到这里我使用push() 但是竟然没有变化也不报错,第一反应什么情况,方法继承却无法使用,不应该啊。试过很多方法都不行,暂时放弃了,

后来我突然想到我push的时候,length增加了啊,为什么看不到,这次我push()更多的内容,竟然出现了,length值和我push进去的length值相同,大概知道是怎么回事了,被html元素遮蔽了。具体什么原因,或许是规范或许是安全考虑 。如果不遮蔽岂不是能修改所以html元素了 ,哈哈

html 元素 
1
var aLi = document.querySelectorAll(‘li‘); 2 3 console.log(aLi.constructor === Array) //false 4 5 aLi.__proto__ = Array.prototype; 6 7 console.log(aLi.constructor === Array) //true

在上个图证明 没有push ,length = 0               添加了9个,但是前4个被覆盖。length=9

 技术分享                                     技术分享

 

2 arguments  无影响正常使用,看来只是限制了html对象

1 function test (){
2     arguments.__proto__ = Array.prototype;
3     arguments.push(10)
4     console.log(arguments)
5 }
6     test(1,2,3,4)

方法4 、 是jq的makeArray()方法,我就不做演示了 ,因为是jq的我没把它算在内,它的内部实现应该是上述第二种方法

 

有错请指出 ,我会及时更正 谢谢。期待更多的方法!

 

伪数组转数组方法(原生3种)

原文:http://www.cnblogs.com/NTWang/p/6280447.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!