JavaScript程式中Array數組物件的擴充函數實例

我們常常給String,Function,Array 的原型加上自訂的擴充函數,例如去除字串空格,陣列排序等

今天重點講下如何給Array物件擴充

1、直接在Array.prototype 上擴充

2、用自己方法對數組物件進行擴展

直接在Array.prototype上擴展,不能直接對dom對象使用(如:document.getElementsByTagName('div')得到的nodeList);

對有潔癖的同學們而言也破了原始生態環境的: )

先來看下yui操作數組的一些方法，這裡我對源碼簡單剝離並改動了下

(function(){
var YArray;

YArray =function(){
var YArray;

YArray = function(o,idx,arraylike){
var t = (arraylike) ? 2 : YArray.test(o),
l, a, start = idx || 0;
if (t) {
try {
return Array .prototype.slice.call(o, start); //借助Array原生方法來把aguments轉換為JS數組
} catch(e) {
a = [];
l = o.length;
for (; start a.push(o[start]);
}
return a;
}

} else {

return [o];

}

}

(Array.) {
var r = 0;
if (o && (typeof o == 'object' ||typeof o == 'function')) {
if (Object.prototype.toString.call(o) === "[ object Array]") {
r = 1;
} else {
try {
if (('length' in o) && !o.tagName && !o.alert && !o.apply) {
r = 2;
}
} catch(e) {}
}

}

return r;
}

YArray.each = (Array.prototype.forEach) ? //先偵測瀏覽器是否已支援，若有則呼叫原生
function (a, f, o) {
Array.prototype.forEach.call(a || [], f, o || Y);
return YArray;
} :
function (a, f, o) {
var l = (a && a.length) || 0, i;
for (i = 0; i f.call(o || Y, a[i], i , a);

}

return YArray;
};

YArray.hash = function(k, v) {
var o = {}, l = k.length, vl = v && v.length, i;
for (i=0; iif (k[i]) {

o[k[i]] = (vl && vl > i) ? v[i] : true;

}
}

return o;
};

YArray.indexOf = (Array.prototype.indexOf) ?
function(a, val) {
return Array.prototype. } :
function(a, val) {
for (var i=0; iif (a[i] === val) {
return i;
}
}

return -1; //找不到的情況

};

YArray.numericSort = function(a, b) {

return (a - b); //從小到大排序, return (b - a ); 從大到小

};

YArray.some = (Array.prototype.some) ?
function (a, f, o) {
return Array.prototype.some.call(a, f, o);
} :
function (a, f, o) {
var l = a.length, i;
for (i=0; iif (f.call(o, a[i], i, a)) {
return true;
}
}

return false;

};

})();

(Array方法來把aguments轉換為JSS數組的其他方法Dom物件不可以，只有遍歷)

Array.apply(null,arguments);
[].slice.call(arguments,0);
[].splice.call(arguments,0,arguments,0);

[].splice.call(arguments,0,arguments.length );

[].concat.apply([],arguments);
...

YArray函數不僅可以操作數組物件也對nodeList物件進行了操作

YArray(document.getElementsdivsdivsdivsdiv""ByTagName""By) );
遍歷dom物件重新組裝成一個陣列: )

a = [];
l = o.length;
for (; starta.push(o[start] );

}
return a;

YArray.each
遍歷數組,如有傳入函數,每次遍歷都執行callback

(item){

alert(item);// 執行了3次，1,2,3
});

YArray.hash

數組組裝成鍵值對可以理解成一個json
YArray.hash

數組組裝成鍵值對可以理解成一個json。 hash(["a","b"],[1,2]);

YArray.indexOf
回傳(想要找尋值)一樣的該值在數組的索引值

YArray.indexOf([1, 2],1)
YArray.numericSort

對數組進行排序,從小到大

[3, 1, 2].sort(YArray.numericSort);
YArray.some

是否數組中的有元素通過了callBack的處理了callBack的處理元素？如果有，則立刻回傳true,如果一個都沒有，則回傳false

YArray.some([3, 1, 2],function(el){
return el })

return el })




讓我們看看javascript 1.6 -1.8 對數組的擴展,並學習如何實現相同的功能
every

filter

forEach

indexOf

lastIndexOf
map.

if (!Array.prototype.every)
{
Array.prototype.every = function(fun /*, thisp*/)
{
var len = this.length >>> 0;
if (type funun ! = "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i {
if (i in this &&
!fun.call( thisp, this[i], i, this))
return false;
}
return true;
};

}

🎜

是否數組中的每個元素都通過了callBack的處理？如果是，則回傳true,如果有一個不是，則立刻回傳false
這和我們剛才提到的YUI種的some 函數很雷同：） 功能剛好相反

Array.prototype.filter

Armm

Array. prototype.filter = function (block /*, thisp */) { //過濾器，增加方便，進行判斷過濾

var values = [];
var thisp = arguments[1];
for (var i = 0; i if (block.call(thisp, this[i]))
values.push(this[i]);
return values;
};

var val= numbers.filter(function(t){

return t })

alert(val);

forEach 和indexOfsome 可以參考上面重述
lastIndexOf 和indexOf 程式碼相似只是從最後開始遍歷

下面講下' map'




Array.prototype.map = function(fun /* >> 0;
if (typeof fun != "function")

throw new TypeError();

var res = new Array(len);
var thisp = arguments[1];

for (var i = 0; i if (i in this)
res[i] = fun.call(thisp, this[i], i, this);
}

return res;

};

return res;

};



數組，執行函數,迭代數組，每個元素作為參數執行callBack方法，由callBack方法對每個元素進行處理，最後返回處理後的一個數組
var numbers = [1, 4, 9];
var roots = numbers.map(function(a){return a * 2});

Array.prototype.reduce




Array.prototype.reduce = function(fun /*, initial*/) {this varal* .length >>> 0;
if (typeof fun != "function")
throw new TypeError();
if (len == 0 && arguments.length == 1)
throw new TypeError(var); = 0;
if (arguments.length >= 2) {
var rv = arguments[1];
} else {
do {
if (i in this) {
rv = this[i++];
break;

break; }

if (++i >= len)
throw new TypeError();

} while (true);

}

for (; i if (i in this)
rv = fun. call(null, rv, this[i], i, this);}

return rv;
};

讓陣列元素依序呼叫給定函數，最後傳回一個值，換言之給定函數一定要用回傳值

Array.prototype.reduceRight
見名故而思意,從右往左




Array.prototype.reduceRight = function(fun /this, initial*/varal >>> 0;
if (typeof fun != "function")
throw new TypeError();
if (len == 0 && arguments.length == 1)
throw new TypeError();
var i = len - 1;
if (arguments.length >= 2) {
var rv = arguments[1];
} else {
do {
if (i in this) {
rv = this[i--];
break ;
}

if (--i throw new TypeError();
} while (true);}

for (; i >= 0; i--) {
if (i in this)

rv = fun.call(null, rv, this[i], i, this);

}
return rv;

};

除了這些，只用想用到的方法都能加到Array. prototype上
例如常用的toString

Array.prototype.toString = function () {

return this.join('');🎜};🎜🎜🎜 🎜等等🎜🎜🎜🎜