將HTMLCollection/NodeList/偽數組轉換成數組的實現方法
更新時間：2011年06月20日 23:50:42 作者：
將HTMLCollection/NodeList/偽數組轉換成數組的實現方法，需要的朋友可以參考下。
這里把符合以下條件的對象稱為偽數組
1，具有l(wèi)ength屬性
2，按索引方式存儲數據
3，不具有數組的push,pop等方法
如
1，function內的arguments 。
2，通過document.forms，Form.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，Form.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);
相關文章
雖說js框架到處都是, 都封裝了很多實用的功能,能快速的讓我們實現如動畫,元素拖拽等功能, 不過由于好奇心的驅使, 有時想一探究竟, 看看一些功能是如何實現的2011-03-03
這篇文章主要介紹了JavaScript多級判定代碼優(yōu)化，JavaScript用二元運算符和if拆分優(yōu)化多級判定結構,?用JavaScript邏輯運算符替換if-else結構判定2023-02-02
JavaScript取得按下鍵盤的鍵是哪個，通過創(chuàng)建一個event.keyCode對象，可有效獲取鍵盤上的鍵，運行代碼后，點擊鍵盤上的任意鍵，網頁上顯示你按下的是哪個鍵。2015-05-05
這篇文章主要介紹了JavaScript中ES6字符串擴展方法的相關資料,非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-08-08
如果有一個數字498.8573945,如何把它格式化成兩位小數據呢？用過asp的都知道,在vbscript里我們可以調用formatnumber,即用formatnumber(498.8573945,2)就可以輸出：498.86。2008-12-12
這篇文章主要為大家詳細介紹了微信小程序canvas實現刮刮樂效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了JavaScript設計模式中的觀察者模式，觀察者設計模式適用于監(jiān)聽一對多的操作，例如監(jiān)聽對象屬性的修改等等，觀察者模式能夠降低代碼耦合度，提升可擴展性2022-06-06
之前只知道eval可以解析字符串，剛剛網上看了又了解了一點，這里貼出來，不懂的也看看哈2012-07-07
這篇文章主要介紹了Typescript模塊的導入導出與繼承方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了微信小程序利用Canvas繪制圖片和豎排文字詳解，合成圖片應該按照 Canvas 的文檔來做都沒什么問題，主要是有個豎排文字的需求，這里和大家分享一下,需要的朋友可以參考下2019-06-06