僞數組轉數組方法(原生4種)

僞數組也稱類數組。像arguments 或者 獲取一組元素返回的集合都是僞數組。html

僞數組如何轉換成真正數組,其實咱們不多去這麼作,可是那幫面試官可能會問,而且不止一種方法讓你去實現面試

方法1、 聲明一個空數組,經過遍歷僞數組把它們從新添加到新的數組中,你們都會,這不是面試官要的數組

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     }

方法2、使用數組的slice()方法 它返回的是數組,使用call或者apply指向僞數組 安全

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

 模擬一下它的內部實現app

 

 方法三 、使用原型繼承spa

aLi.__proto__ = Array.prototype;

1 . 僞數組是html元素集合,雖然看着好像挺奇怪 ,可是總算轉換成功,無論它。prototype

到這裏我使用push() 可是居然沒有變化也不報錯,第一反應什麼狀況,方法繼承卻沒法使用,不該該啊。試過不少方法都不行,暫時放棄了,code

後來我忽然想到我push的時候,length增長了啊,爲何看不到,此次我push()更多的內容,居然出現了,length值和我push進去的length值相同,大概知道是怎麼回事了,被html元素遮蔽了。具體什麼緣由,或許是規範或許是安全考慮 。若是不遮蔽豈不是能修改因此html元素了 ,哈哈htm

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(實際應該是4)      push()添加了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)

方法四、 ES6中數組的新方法 from()

1 function test(){
2     var arg = Array.from(arguments);
3     arg.push(5);
4     console.log(arg);//1,2,3,4,5
5 
6 }
7 test(1,2,3,4);

方法5 、 順便說下jq的makeArray(),toArray()方法 它們也能夠實現僞數組轉數組的功能,可是實現的原理並不太同樣

core_deletedIds = []

core_slice = core_deletedIds.slice,

core_push = core_deletedIds.push,

toArray: 使用了數組的slice方法

makeArray:使用了push方法

 

var aDiv = $('div');
console.log($.isArray(aDiv)); //false
var aDiv = aDiv.toArray(); //實例方法
var aDiv = $.makeArray(aDiv);//靜態方法
console.log($.isArray(aDiv));//true

 

有錯請指出 ,我會及時更正 謝謝。期待更多的方法!

相關文章
相關標籤/搜索