js中將HTMLCollection/NodeList/偽數組轉換成數組的代碼
更新時間：2011年07月31日 21:51:16 作者：
js中將HTMLCollection/NodeList/偽數組轉換成數組的代碼，需要的朋友可以參考下。
這里把符合以下條件的對象稱為偽數組
1，具有l(wèi)ength屬性
2，按索引方式存儲數據
3，不具有數組的push,pop等方法
如
1，function內的arguments 。
2，通過document.forms，F(xiàn)orm.elements，Select.options，document.getElementsByName() ，document.getElementsByTagName() ，childNodes/children 等方式獲取的集合（HTMLCollection，NodeList）等。
3，特殊寫法的對象 ，如
var obj={};
obj[0] = "一";
obj[1] = "二";
obj[2] = "三";
obj.length = 3;
它們不具有數組的一些方法如push, pop, shift, join等。有時候需要將這些偽數組轉成真正的數組，這樣可以使用push, pop等方法。以下是工具函數makeArray
var makeArray = function(obj){
return Array.prototype.slice.call(obj,0);
}
try{
Array.prototype.slice.call(document.documentElement.childNodes, 0)[0].nodeType;
}catch(e){
makeArray = function(obj){
var res = [];
for(var i=0,len=obj.length; i<len; i++){
res.push(obj[i]);
}
return res;
}
}
以下分別測試以上三種偽數組
//定義一個函數fun,內部使用makeArray將其arguments轉換成數組
function fun(){
var ary = makeArray(arguments);
alert(ary.constructor );
}
//調用
fun(3,5);
//假設頁面上有多個段落元素p
var els = document.getElementsByTagName("p");
var ary1 = makeArray(els);
alert(ary1.constructor);
//特殊的js對象（如jquery對象）
var obj={};
obj[0] = "一";
obj[1] = "二";
obj[2] = "三";
obj.length = 3;
var ary2 = makeArray(obj);
alert(ary2.constructor);
1，具有l(wèi)ength屬性
2，按索引方式存儲數據
3，不具有數組的push,pop等方法
如
1，function內的arguments 。
2，通過document.forms，F(xiàn)orm.elements，Select.options，document.getElementsByName() ，document.getElementsByTagName() ，childNodes/children 等方式獲取的集合（HTMLCollection，NodeList）等。
3，特殊寫法的對象 ，如
復制代碼 代碼如下:
var obj={};
obj[0] = "一";
obj[1] = "二";
obj[2] = "三";
obj.length = 3;
它們不具有數組的一些方法如push, pop, shift, join等。有時候需要將這些偽數組轉成真正的數組，這樣可以使用push, pop等方法。以下是工具函數makeArray
復制代碼 代碼如下:
var makeArray = function(obj){
return Array.prototype.slice.call(obj,0);
}
try{
Array.prototype.slice.call(document.documentElement.childNodes, 0)[0].nodeType;
}catch(e){
makeArray = function(obj){
var res = [];
for(var i=0,len=obj.length; i<len; i++){
res.push(obj[i]);
}
return res;
}
}
以下分別測試以上三種偽數組
復制代碼 代碼如下:
//定義一個函數fun,內部使用makeArray將其arguments轉換成數組
function fun(){
var ary = makeArray(arguments);
alert(ary.constructor );
}
//調用
fun(3,5);
//假設頁面上有多個段落元素p
var els = document.getElementsByTagName("p");
var ary1 = makeArray(els);
alert(ary1.constructor);
//特殊的js對象（如jquery對象）
var obj={};
obj[0] = "一";
obj[1] = "二";
obj[2] = "三";
obj.length = 3;
var ary2 = makeArray(obj);
alert(ary2.constructor);
相關文章
html5+CSS 實現(xiàn)禁止IOS長按復制粘貼功能
因為在移動端APP需要實現(xiàn)長按執(zhí)行別的事件，但是在iOS系統(tǒng)有默認的長按選擇復制粘貼。禁止在網上找了很多資料，下面小編給大家分享解決方案，一起看看吧2016-12-12
微信小程序實現(xiàn)自動播放視頻模仿gif動圖效果實例
這篇文章主要給大家介紹了關于微信小程序實現(xiàn)自動播放視頻模仿gif動圖效果的相關資料,通過本文介紹的方法可以實現(xiàn)自動播放視頻，視頻無控制條無聲音且自動循環(huán)播放,需要的朋友可以參考下2021-07-07
由于項目上需要解析xml，于是各種百度，然后自己總結了下各個主流瀏覽器解析xml的方法，下面通過本文給大家詳細介紹下使用JS讀取XML文件的方法，一起看看吧2016-11-11
這篇文章主要介紹了uni-app 支持多端第三方地圖定位的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
這篇文章主要幫助大家理解javascript中的嚴格模式，何為嚴格模式，如何啟用嚴格模式，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了JS實現(xiàn)DIV容器賦值的方法,可結合ajax使用,涉及JavaScript針對頁面元素的動態(tài)操作技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了js生成隨機數方法和實例,由js生成一切隨機數的基礎都是Math.random(),有興趣的可以了解一下。2017-01-01
這篇文章主要介紹了微信小程序實現(xiàn)打開內置地圖功能,涉及微信小程序使用wx.openLocation函數獲取經緯度信息的相關使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
JavaScript實現(xiàn)數組對象轉換為鍵值對的四種方式
本文探討了將包含 {icon: "abc", url: "123"} 形式對象的數組轉換為鍵值對形式的四種方法,并從實現(xiàn)方式的簡潔性、可讀性和性能角度進行了分析比較,感興趣的朋友可以參考下2024-02-02
這篇文章主要為大家詳細介紹了微信小程序實戰(zhàn)之自定義抽屜菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04