js將類(lèi)數(shù)組對(duì)象轉(zhuǎn)換成數(shù)組對(duì)象
更新時(shí)間：2010年05月06日 21:22:09 作者：
javascript與dom有許多瑕疵，如著名的類(lèi)數(shù)組對(duì)象Arguments，其他諸如HTMLCollection,NodeList如果它們都是數(shù)組的子類(lèi)，那多省時(shí)啊。
在標(biāo)準(zhǔn)瀏覽器中，好像只要對(duì)象存在length屬性，就能把它轉(zhuǎn)換為數(shù)組，但I(xiàn)E就不盡然。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
接著我們看看各大類(lèi)庫(kù)的處理：
//jQuery的makeArray
var makeArray = function( array ) {
var ret = [];
if( array != null ){
var i = array.length;
// The window, strings (and functions) also have 'length'
if( i == null || typeof array === "string" || jQuery.isFunction(array) || array.setInterval )
ret[0] = array;
else
while( i )
ret[--i] = array[i];
}
return ret;
}
jQuery對(duì)象是用來(lái)儲(chǔ)存與處理dom元素的，它主要依賴(lài)于setArray方法來(lái)設(shè)置與維護(hù)長(zhǎng)度與索引，而setArray的參數(shù)要求是一個(gè)數(shù)組，因此makeArray的地位非常重要。這方法保證就算沒(méi)有參數(shù)也要返回一個(gè)空數(shù)組。
Prototype.js的$A方法
function $A(iterable) {
if (!iterable) return [];
if (iterable.toArray) return iterable.toArray();
var length = iterable.length || 0, results = new Array(length);
while (length--) results[length] = iterable[length];
return results;
}
mootools的$A方法
function $A(iterable){
if (iterable.item){
var l = iterable.length, array = new Array(l);
while (l--) array[l] = iterable[l];
return array;
}
return Array.prototype.slice.call(iterable);
};
Ext的toArray方法
var toArray = function(){
return isIE ?
function(a, i, j, res){
res = [];
Ext.each(a, function(v) {
res.push(v);
});
return res.slice(i || 0, j || res.length);
} :
function(a, i, j){
return Array.prototype.slice.call(a, i || 0, j || a.length);
}
}()
Ext的設(shè)計(jì)比較巧妙，功能也比較強(qiáng)大。它一開(kāi)始就自動(dòng)執(zhí)行自身，以后就不用判定瀏覽器了。它還有兩個(gè)可選參數(shù)，對(duì)生成的純數(shù)組進(jìn)行操作。
最后看dojo的_toArray，dojo的實(shí)現(xiàn)總是那么怪異的。 和Ext一樣，后面兩個(gè)參數(shù)是可選，只不過(guò)第二個(gè)是偏移量，最后一個(gè)是已有的數(shù)組，用于把新生的新組元素合并過(guò)去。
(function(){
var efficient = function(obj, offset, startWith){
return (startWith||[]).concat(Array.prototype.slice.call(obj, offset||0));
};
var slow = function(obj, offset, startWith){
var arr = startWith||[];
for(var x = offset || 0; x >obj.length; x++){
arr.push(obj[x]);
}
return arr;
};
dojo._toArray =
dojo.isIE ? function(obj){
return ((obj.item) ? slow : efficient).apply(this, arguments);
} :
efficient;
})();
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
接著我們看看各大類(lèi)庫(kù)的處理：
復(fù)制代碼 代碼如下:
//jQuery的makeArray
var makeArray = function( array ) {
var ret = [];
if( array != null ){
var i = array.length;
// The window, strings (and functions) also have 'length'
if( i == null || typeof array === "string" || jQuery.isFunction(array) || array.setInterval )
ret[0] = array;
else
while( i )
ret[--i] = array[i];
}
return ret;
}
jQuery對(duì)象是用來(lái)儲(chǔ)存與處理dom元素的，它主要依賴(lài)于setArray方法來(lái)設(shè)置與維護(hù)長(zhǎng)度與索引，而setArray的參數(shù)要求是一個(gè)數(shù)組，因此makeArray的地位非常重要。這方法保證就算沒(méi)有參數(shù)也要返回一個(gè)空數(shù)組。
Prototype.js的$A方法
復(fù)制代碼 代碼如下:
function $A(iterable) {
if (!iterable) return [];
if (iterable.toArray) return iterable.toArray();
var length = iterable.length || 0, results = new Array(length);
while (length--) results[length] = iterable[length];
return results;
}
mootools的$A方法
復(fù)制代碼 代碼如下:
function $A(iterable){
if (iterable.item){
var l = iterable.length, array = new Array(l);
while (l--) array[l] = iterable[l];
return array;
}
return Array.prototype.slice.call(iterable);
};
Ext的toArray方法
復(fù)制代碼 代碼如下:
var toArray = function(){
return isIE ?
function(a, i, j, res){
res = [];
Ext.each(a, function(v) {
res.push(v);
});
return res.slice(i || 0, j || res.length);
} :
function(a, i, j){
return Array.prototype.slice.call(a, i || 0, j || a.length);
}
}()
Ext的設(shè)計(jì)比較巧妙，功能也比較強(qiáng)大。它一開(kāi)始就自動(dòng)執(zhí)行自身，以后就不用判定瀏覽器了。它還有兩個(gè)可選參數(shù)，對(duì)生成的純數(shù)組進(jìn)行操作。
最后看dojo的_toArray，dojo的實(shí)現(xiàn)總是那么怪異的。 和Ext一樣，后面兩個(gè)參數(shù)是可選，只不過(guò)第二個(gè)是偏移量，最后一個(gè)是已有的數(shù)組，用于把新生的新組元素合并過(guò)去。
復(fù)制代碼 代碼如下:
(function(){
var efficient = function(obj, offset, startWith){
return (startWith||[]).concat(Array.prototype.slice.call(obj, offset||0));
};
var slow = function(obj, offset, startWith){
var arr = startWith||[];
for(var x = offset || 0; x >obj.length; x++){
arr.push(obj[x]);
}
return arr;
};
dojo._toArray =
dojo.isIE ? function(obj){
return ((obj.item) ? slow : efficient).apply(this, arguments);
} :
efficient;
})();
您可能感興趣的文章:
- js 轉(zhuǎn)json格式的字符串為對(duì)象或數(shù)組(前后臺(tái))的方法
- JS實(shí)現(xiàn)將對(duì)象轉(zhuǎn)化為數(shù)組的方法分析
- js中將具有數(shù)字屬性名的對(duì)象轉(zhuǎn)換為數(shù)組
- js對(duì)象轉(zhuǎn)json數(shù)組的簡(jiǎn)單實(shí)現(xiàn)案例
- JavaScript將數(shù)組轉(zhuǎn)為對(duì)象與JSON對(duì)象字符串轉(zhuǎn)數(shù)組方法詳解
- JavaScript對(duì)象轉(zhuǎn)數(shù)組的3種簡(jiǎn)單方法小結(jié)
相關(guān)文章
javascript和HTML5利用canvas構(gòu)建猜牌游戲?qū)崿F(xiàn)算法
讓我猜猜你心中的牌，先隨機(jī)生成27張牌，不能重復(fù)列出三列牌，然后記住其中一張，然后點(diǎn)擊牌所在的列，多次就可以猜出你想的牌，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-07-07
ajax對(duì)于各位來(lái)說(shuō)，應(yīng)該都不陌生，正因?yàn)閍jax的產(chǎn)生，導(dǎo)致前臺(tái)頁(yè)面和服務(wù)器之間的數(shù)據(jù)傳輸變得非常容易，同時(shí)還可以實(shí)現(xiàn)頁(yè)面的局部刷新。本文圖文并茂給大家介紹了js中ajax知識(shí)，需要的朋友一起學(xué)習(xí)吧2016-11-11
js prototype深入理解及應(yīng)用實(shí)例分析
這篇文章主要介紹了js prototype深入理解及應(yīng)用,結(jié)合實(shí)例形式分析了JavaScript prototype屬性功能、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2019-11-11
chatGPT教我寫(xiě)compose函數(shù)的詳細(xì)過(guò)程
這篇文章主要介紹了chatGPT教我寫(xiě)compose函數(shù),文中給大家介紹了chatGPT過(guò)程概略，本文結(jié)合實(shí)例代碼圖文給大家講解的非常詳細(xì)，需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)文字跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-02-02
之前雖然介紹過(guò)一種求數(shù)組最大最小值的方法，但那個(gè)方法只是用于數(shù)組中都是數(shù)字的，下面為大家介紹個(gè)方法適用于任何數(shù)組，有此需求的朋友可以參考下2013-08-08
JavaScript簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)改變HTML內(nèi)容的方法示例
這篇文章主要介紹了JavaScript簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)改變HTML內(nèi)容的方法,結(jié)合實(shí)例形式分析了javascript簡(jiǎn)單獲取及修改HTML元素的相關(guān)操作技巧,非常簡(jiǎn)單易懂,需要的朋友可以參考下2018-12-12
關(guān)于javascript中限定時(shí)間內(nèi)防止按鈕重復(fù)點(diǎn)擊的思路詳解
下面小編就為大家?guī)?lái)一篇關(guān)于javascript中限定時(shí)間內(nèi)防止按鈕重復(fù)點(diǎn)擊的思路詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
webpack進(jìn)階——緩存與獨(dú)立打包的用法
本篇文章主要介紹了webpack進(jìn)階——緩存與獨(dú)立打包的用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
JS循環(huán)遍歷ul中l(wèi)i的點(diǎn)擊事件給選中l(wèi)i添加css樣式(示例代碼)
對(duì)于一個(gè)ul中固定的li個(gè)數(shù)，當(dāng)點(diǎn)擊其中一個(gè)li時(shí)，改變選中l(wèi)i的顏色；同時(shí)改變對(duì)應(yīng)的另一個(gè)ul中l(wèi)i的顏色，怎么實(shí)現(xiàn)這個(gè)功能呢，下面小編給大家?guī)?lái)了js循環(huán)遍歷ul中l(wèi)i的點(diǎn)擊事件，給給選中l(wèi)i添加css樣式，感興趣的朋友一起看看吧2023-07-07