偽數組轉數組方法(原生4種)
偽數組也稱類數組。像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(實際應該是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)
方法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
轉自 @ https://www.cnblogs.com/NTWang/p/6280447.html
偽數組轉數組方法(原生4種)