將HTMLCollection/NodeList/偽數(shù)組轉(zhuǎn)換成數(shù)組的實(shí)現(xiàn)方法
更新時(shí)間：2011年06月20日 23:50:42 作者：
將HTMLCollection/NodeList/偽數(shù)組轉(zhuǎn)換成數(shù)組的實(shí)現(xiàn)方法，需要的朋友可以參考下。
這里把符合以下條件的對(duì)象稱為偽數(shù)組
1，具有l(wèi)ength屬性
2，按索引方式存儲(chǔ)數(shù)據(jù)
3，不具有數(shù)組的push,pop等方法
如
1，function內(nèi)的arguments 。
2，通過document.forms，F(xiàn)orm.elements，Select.options，document.getElementsByName() ，document.getElementsByTagName() ，childNodes/children 等方式獲取的集合（HTMLCollection，NodeList）等。
3，特殊寫法的對(duì)象 ，如
var obj={};
obj[0] = "一";
obj[1] = "二";
obj[2] = "三";
obj.length = 3;
它們不具有數(shù)組的一些方法如push, pop, shift, join等。有時(shí)候需要將這些偽數(shù)組轉(zhuǎn)成真正的數(shù)組，這樣可以使用push, pop等方法。以下是工具函數(shù)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;
}
}
以下分別測(cè)試以上三種偽數(shù)組
//定義一個(gè)函數(shù)fun,內(nèi)部使用makeArray將其arguments轉(zhuǎn)換成數(shù)組
function fun(){
var ary = makeArray(arguments);
alert(ary.constructor );
}
//調(diào)用
fun(3,5);
//假設(shè)頁面上有多個(gè)段落元素p
var els = document.getElementsByTagName("p");
var ary1 = makeArray(els);
alert(ary1.constructor);
//特殊的js對(duì)象（如jquery對(duì)象）
var obj={};
obj[0] = "一";
obj[1] = "二";
obj[2] = "三";
obj.length = 3;
var ary2 = makeArray(obj);
alert(ary2.constructor);
1，具有l(wèi)ength屬性
2，按索引方式存儲(chǔ)數(shù)據(jù)
3，不具有數(shù)組的push,pop等方法
如
1，function內(nèi)的arguments 。
2，通過document.forms，F(xiàn)orm.elements，Select.options，document.getElementsByName() ，document.getElementsByTagName() ，childNodes/children 等方式獲取的集合（HTMLCollection，NodeList）等。
3，特殊寫法的對(duì)象 ，如
復(fù)制代碼 代碼如下:
var obj={};
obj[0] = "一";
obj[1] = "二";
obj[2] = "三";
obj.length = 3;
它們不具有數(shù)組的一些方法如push, pop, shift, join等。有時(shí)候需要將這些偽數(shù)組轉(zhuǎn)成真正的數(shù)組，這樣可以使用push, pop等方法。以下是工具函數(shù)makeArray
復(fù)制代碼 代碼如下:
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;
}
}
以下分別測(cè)試以上三種偽數(shù)組
復(fù)制代碼 代碼如下:
//定義一個(gè)函數(shù)fun,內(nèi)部使用makeArray將其arguments轉(zhuǎn)換成數(shù)組
function fun(){
var ary = makeArray(arguments);
alert(ary.constructor );
}
//調(diào)用
fun(3,5);
//假設(shè)頁面上有多個(gè)段落元素p
var els = document.getElementsByTagName("p");
var ary1 = makeArray(els);
alert(ary1.constructor);
//特殊的js對(duì)象（如jquery對(duì)象）
var obj={};
obj[0] = "一";
obj[1] = "二";
obj[2] = "三";
obj.length = 3;
var ary2 = makeArray(obj);
alert(ary2.constructor);
相關(guān)文章
Draggable Elements 元素拖拽功能實(shí)現(xiàn)代碼
雖說js框架到處都是, 都封裝了很多實(shí)用的功能,能快速的讓我們實(shí)現(xiàn)如動(dòng)畫,元素拖拽等功能, 不過由于好奇心的驅(qū)使, 有時(shí)想一探究竟, 看看一些功能是如何實(shí)現(xiàn)的2011-03-03
這篇文章主要介紹了JavaScript多級(jí)判定代碼優(yōu)化，JavaScript用二元運(yùn)算符和if拆分優(yōu)化多級(jí)判定結(jié)構(gòu),?用JavaScript邏輯運(yùn)算符替換if-else結(jié)構(gòu)判定2023-02-02
javascript實(shí)現(xiàn)捕捉鍵盤上按下的鍵
JavaScript取得按下鍵盤的鍵是哪個(gè)，通過創(chuàng)建一個(gè)event.keyCode對(duì)象，可有效獲取鍵盤上的鍵，運(yùn)行代碼后，點(diǎn)擊鍵盤上的任意鍵，網(wǎng)頁上顯示你按下的是哪個(gè)鍵。2015-05-05
這篇文章主要介紹了JavaScript中ES6字符串?dāng)U展方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-08-08
javascript FormatNumber函數(shù)實(shí)現(xiàn)方法
如果有一個(gè)數(shù)字498.8573945,如何把它格式化成兩位小數(shù)據(jù)呢？用過asp的都知道,在vbscript里我們可以調(diào)用formatnumber,即用formatnumber(498.8573945,2)就可以輸出：498.86。2008-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序canvas實(shí)現(xiàn)刮刮樂效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
JavaScript設(shè)計(jì)模式中的觀察者模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式中的觀察者模式，觀察者設(shè)計(jì)模式適用于監(jiān)聽一對(duì)多的操作，例如監(jiān)聽對(duì)象屬性的修改等等，觀察者模式能夠降低代碼耦合度，提升可擴(kuò)展性2022-06-06
之前只知道eval可以解析字符串，剛剛網(wǎng)上看了又了解了一點(diǎn)，這里貼出來，不懂的也看看哈2012-07-07
Typescript模塊的導(dǎo)入導(dǎo)出與繼承方式
這篇文章主要介紹了Typescript模塊的導(dǎo)入導(dǎo)出與繼承方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了微信小程序利用Canvas繪制圖片和豎排文字詳解，合成圖片應(yīng)該按照 Canvas 的文檔來做都沒什么問題，主要是有個(gè)豎排文字的需求，這里和大家分享一下,需要的朋友可以參考下2019-06-06