javascript Array數(shù)組對象的擴(kuò)展函數(shù)代碼
更新時(shí)間：2010年05月22日 21:46:05 作者：
我們經(jīng)常給 String,Function,Array 的原型加上自定義的擴(kuò)展函數(shù),比如去除字符串空格,數(shù)組排序等
今天重點(diǎn)講下 如何給Array對象擴(kuò)展
1、直接在Array.prototype 上擴(kuò)展
2、用自己方法對數(shù)組對象進(jìn)行擴(kuò)展
直接在Array.prototype上擴(kuò)展,不能直接對dom對象使用(如:document.getElementsByTagName('div')得到的nodeList);
對有潔癖的同學(xué)而言 也破了原始生態(tài)環(huán)境的 : )
先來看下 yui操作數(shù)組的一些方法，這里我對源碼簡單剝離并改動(dòng)了下
(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原生方法來把a(bǔ)guments轉(zhuǎn)換為JS數(shù)組
} catch(e) {
a = [];
l = o.length;
for (; start<l; start++) {
a.push(o[start]);
}
return a;
}
} else {
return [o];
}
}
YArray.test = function(o){
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) ? //先檢測瀏覽器是否已支持，若有則調(diào)用原生
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 < l; i=i+1) {
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; i<l; i=i+1) {
if (k[i]) {
o[k[i]] = (vl && vl > i) ? v[i] : true;
}
}
return o;
};
YArray.indexOf = (Array.prototype.indexOf) ?
function(a, val) {
return Array.prototype.indexOf.call(a, val);
} :
function(a, val) {
for (var i=0; i<a.length; i=i+1) {
if (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; i<l; i=i+1) {
if (f.call(o, a[i], i, a)) {
return true;
}
}
return false;
};
})();
借助Array原生方法來把a(bǔ)guments轉(zhuǎn)換為JS數(shù)組的其他方法 (Dom對象不可以，只有遍歷)
Array.apply(null,arguments);
[].slice.call(arguments,0);
[].splice.call(arguments,0,arguments.length);
[].concat.apply([],arguments);
...
YArray函數(shù)不僅可以操作數(shù)組對象也對nodeList對象進(jìn)行了操作
YArray(document.getElementsByTagName("div"));
遍歷dom對象 重新組裝成一個(gè)數(shù)組 : )
a = [];
l = o.length;
for (; start<l; start++) {
a.push(o[start]);
}
return a;
YArray.each
遍歷數(shù)組,如有傳入函數(shù),每次遍歷都執(zhí)行callback
YArray.each([1,2,3],function(item){
alert(item);// 執(zhí)行了3次，1,2,3
});
YArray.hash
數(shù)組 組裝成 鍵值對 可以理解成一個(gè)json對象
YArray.hash(["a","b"],[1,2]);
YArray.indexOf
返回(想要找尋值)一樣的該值在數(shù)組的索引值
YArray.indexOf([1,2],1)
YArray.numericSort
對數(shù)組進(jìn)行排序,從小到大
[3, 1, 2].sort(YArray.numericSort);
YArray.some
是否數(shù)組中的有元素通過了callBack的處理？如果有，則立馬返回true,如果一個(gè)都沒有，則返回false
YArray.some([3, 1, 2],function(el){
return el < 4;
})
讓我們看看 javascript 1.6 -1.8 對數(shù)組的擴(kuò)展 ,并學(xué)習(xí)如何實(shí)現(xiàn)相同的功能
every
filter
forEach
indexOf
lastIndexOf
map
some
reduce
reduceRight
Array.prototype.every
if (!Array.prototype.every)
{
Array.prototype.every = function(fun /*, thisp*/)
{
var len = this.length >>> 0;
if (typeof fun != "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++)
{
if (i in this &&
!fun.call(thisp, this[i], i, this))
return false;
}
return true;
};
}
是否數(shù)組中的每個(gè)元素都通過了callBack的處理？如果是，則返回true,如果有一個(gè)不是，則立馬返回false
這和我們剛才提到的YUI種的 some 函數(shù) 很雷同 ：） 功能剛好相反
Array.prototype.filter
Array.prototype.filter = function (block /*, thisp */) { //過濾器 ，添加方便，進(jìn)行判斷過濾
var values = [];
var thisp = arguments[1];
for (var i = 0; i < this.length; i++)
if (block.call(thisp, this[i]))
values.push(this[i]);
return values;
};
使用方法
var val= numbers.filter(function(t){
return t < 5 ;
})
alert(val);
forEach 和 indexOf 和 some 可以參考 上面yui的代碼 ,不再重述
lastIndexOf 和 indexOf 代碼相似 只是從最后開始遍歷
下面講下 ‘ map'
Array.prototype.map = function(fun /*, thisp*/) {
var len = this.length >>> 0;
if (typeof fun != "function")
throw new TypeError();
var res = new Array(len);
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this)
res[i] = fun.call(thisp, this[i], i, this);
}
return res;
};
遍歷數(shù)組，執(zhí)行函數(shù),迭代數(shù)組，每個(gè)元素作為參數(shù)執(zhí)行callBack方法，由callBack方法對每個(gè)元素進(jìn)行處理，最后返回處理后的一個(gè)數(shù)組
var numbers = [1, 4, 9];
var roots = numbers.map(function(a){return a * 2});
Array.prototype.reduce
Array.prototype.reduce = function(fun /*, initial*/) {
var len = this.length >>> 0;
if (typeof fun != "function")
throw new TypeError();
if (len == 0 && arguments.length == 1)
throw new TypeError();
var i = 0;
if (arguments.length >= 2) {
var rv = arguments[1];
} else {
do {
if (i in this) {
rv = this[i++];
break;
}
if (++i >= len)
throw new TypeError();
} while (true);
}
for (; i < len; i++) {
if (i in this)
rv = fun.call(null, rv, this[i], i, this);
}
return rv;
};
讓數(shù)組元素依次調(diào)用給定函數(shù)，最后返回一個(gè)值，換言之給定函數(shù)一定要用返回值
Array.prototype.reduceRight
見名故而思意,從右往左
Array.prototype.reduceRight = function(fun /*, initial*/) {
var len = this.length >>> 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 < 0)
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('');
};
還可以添加 toJson ,uniq ,compact，reverse等
Array擴(kuò)展對開發(fā)還是很有幫助滴 : )
1、直接在Array.prototype 上擴(kuò)展
2、用自己方法對數(shù)組對象進(jìn)行擴(kuò)展
直接在Array.prototype上擴(kuò)展,不能直接對dom對象使用(如:document.getElementsByTagName('div')得到的nodeList);
對有潔癖的同學(xué)而言 也破了原始生態(tài)環(huán)境的 : )
先來看下 yui操作數(shù)組的一些方法，這里我對源碼簡單剝離并改動(dòng)了下
復(fù)制代碼 代碼如下:
(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原生方法來把a(bǔ)guments轉(zhuǎn)換為JS數(shù)組
} catch(e) {
a = [];
l = o.length;
for (; start<l; start++) {
a.push(o[start]);
}
return a;
}
} else {
return [o];
}
}
YArray.test = function(o){
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) ? //先檢測瀏覽器是否已支持，若有則調(diào)用原生
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 < l; i=i+1) {
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; i<l; i=i+1) {
if (k[i]) {
o[k[i]] = (vl && vl > i) ? v[i] : true;
}
}
return o;
};
YArray.indexOf = (Array.prototype.indexOf) ?
function(a, val) {
return Array.prototype.indexOf.call(a, val);
} :
function(a, val) {
for (var i=0; i<a.length; i=i+1) {
if (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; i<l; i=i+1) {
if (f.call(o, a[i], i, a)) {
return true;
}
}
return false;
};
})();
借助Array原生方法來把a(bǔ)guments轉(zhuǎn)換為JS數(shù)組的其他方法 (Dom對象不可以，只有遍歷)
復(fù)制代碼 代碼如下:
Array.apply(null,arguments);
[].slice.call(arguments,0);
[].splice.call(arguments,0,arguments.length);
[].concat.apply([],arguments);
...
YArray函數(shù)不僅可以操作數(shù)組對象也對nodeList對象進(jìn)行了操作
YArray(document.getElementsByTagName("div"));
遍歷dom對象 重新組裝成一個(gè)數(shù)組 : )
復(fù)制代碼 代碼如下:
a = [];
l = o.length;
for (; start<l; start++) {
a.push(o[start]);
}
return a;
YArray.each
遍歷數(shù)組,如有傳入函數(shù),每次遍歷都執(zhí)行callback
復(fù)制代碼 代碼如下:
YArray.each([1,2,3],function(item){
alert(item);// 執(zhí)行了3次，1,2,3
});
YArray.hash
數(shù)組 組裝成 鍵值對 可以理解成一個(gè)json對象
YArray.hash(["a","b"],[1,2]);
YArray.indexOf
返回(想要找尋值)一樣的該值在數(shù)組的索引值
YArray.indexOf([1,2],1)
YArray.numericSort
對數(shù)組進(jìn)行排序,從小到大
[3, 1, 2].sort(YArray.numericSort);
YArray.some
是否數(shù)組中的有元素通過了callBack的處理？如果有，則立馬返回true,如果一個(gè)都沒有，則返回false
復(fù)制代碼 代碼如下:
YArray.some([3, 1, 2],function(el){
return el < 4;
})
讓我們看看 javascript 1.6 -1.8 對數(shù)組的擴(kuò)展 ,并學(xué)習(xí)如何實(shí)現(xiàn)相同的功能
every
filter
forEach
indexOf
lastIndexOf
map
some
reduce
reduceRight
Array.prototype.every
復(fù)制代碼 代碼如下:
if (!Array.prototype.every)
{
Array.prototype.every = function(fun /*, thisp*/)
{
var len = this.length >>> 0;
if (typeof fun != "function")
throw new TypeError();
var thisp = arguments[1];
for (var i = 0; i < len; i++)
{
if (i in this &&
!fun.call(thisp, this[i], i, this))
return false;
}
return true;
};
}
是否數(shù)組中的每個(gè)元素都通過了callBack的處理？如果是，則返回true,如果有一個(gè)不是，則立馬返回false
這和我們剛才提到的YUI種的 some 函數(shù) 很雷同 ：） 功能剛好相反
Array.prototype.filter
復(fù)制代碼 代碼如下:
Array.prototype.filter = function (block /*, thisp */) { //過濾器 ，添加方便，進(jìn)行判斷過濾
var values = [];
var thisp = arguments[1];
for (var i = 0; i < this.length; i++)
if (block.call(thisp, this[i]))
values.push(this[i]);
return values;
};
使用方法
復(fù)制代碼 代碼如下:
var val= numbers.filter(function(t){
return t < 5 ;
})
alert(val);
forEach 和 indexOf 和 some 可以參考 上面yui的代碼 ,不再重述
lastIndexOf 和 indexOf 代碼相似 只是從最后開始遍歷
下面講下 ‘ map'
復(fù)制代碼 代碼如下:
Array.prototype.map = function(fun /*, thisp*/) {
var len = this.length >>> 0;
if (typeof fun != "function")
throw new TypeError();
var res = new Array(len);
var thisp = arguments[1];
for (var i = 0; i < len; i++) {
if (i in this)
res[i] = fun.call(thisp, this[i], i, this);
}
return res;
};
遍歷數(shù)組，執(zhí)行函數(shù),迭代數(shù)組，每個(gè)元素作為參數(shù)執(zhí)行callBack方法，由callBack方法對每個(gè)元素進(jìn)行處理，最后返回處理后的一個(gè)數(shù)組
var numbers = [1, 4, 9];
var roots = numbers.map(function(a){return a * 2});
Array.prototype.reduce
復(fù)制代碼 代碼如下:
Array.prototype.reduce = function(fun /*, initial*/) {
var len = this.length >>> 0;
if (typeof fun != "function")
throw new TypeError();
if (len == 0 && arguments.length == 1)
throw new TypeError();
var i = 0;
if (arguments.length >= 2) {
var rv = arguments[1];
} else {
do {
if (i in this) {
rv = this[i++];
break;
}
if (++i >= len)
throw new TypeError();
} while (true);
}
for (; i < len; i++) {
if (i in this)
rv = fun.call(null, rv, this[i], i, this);
}
return rv;
};
讓數(shù)組元素依次調(diào)用給定函數(shù)，最后返回一個(gè)值，換言之給定函數(shù)一定要用返回值
Array.prototype.reduceRight
見名故而思意,從右往左
復(fù)制代碼 代碼如下:
Array.prototype.reduceRight = function(fun /*, initial*/) {
var len = this.length >>> 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 < 0)
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
復(fù)制代碼 代碼如下:
Array.prototype.toString = function () {
return this.join('');
};
還可以添加 toJson ,uniq ,compact，reverse等
Array擴(kuò)展對開發(fā)還是很有幫助滴 : )
您可能感興趣的文章:
- js將類數(shù)組對象轉(zhuǎn)換成數(shù)組對象
- JavaScript中的類數(shù)組對象介紹
- JavaScript 里的類數(shù)組對象
- js 用于檢測類數(shù)組對象的函數(shù)方法
- JQuery $.each遍歷JavaScript數(shù)組對象實(shí)例
- js使用Array.prototype.sort()對數(shù)組對象排序的方法
- js接收并轉(zhuǎn)化Java中的數(shù)組對象的方法
- JS從非數(shù)組對象轉(zhuǎn)數(shù)組的方法小結(jié)
- JavaScript類數(shù)組對象轉(zhuǎn)換為數(shù)組對象的方法實(shí)例分析
相關(guān)文章
下面小編就為大家?guī)硪黄狫S之相等操作符詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了ES6基礎(chǔ)之默認(rèn)參數(shù)值，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
JavaScript變量作用域及內(nèi)存問題實(shí)例分析
這篇文章主要介紹了JavaScript變量作用域及內(nèi)存問題,結(jié)合實(shí)例形式分析了javascript全局變量、局部變量、塊級作用域等概念及內(nèi)存優(yōu)化問題相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
flexigrid 參數(shù)說明，需要的朋友可以參考下。2010-11-11
這篇文章主要介紹了js中數(shù)組常用方法總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JS的encodeURI和java的URLDecoder.decode使用介紹
如果不想在url中看到有明文可以使用js的encodeURI的URLDecoder.decode一起使用一起來把url加密下，下面有個(gè)不錯(cuò)的示例，大家不妨參考下2014-05-05
JavaScript利用canvas實(shí)現(xiàn)炫酷的碎片切圖效果
這篇文章主要和大家分享一個(gè)炫酷的碎片式切圖效果，本文主要利用canvas來實(shí)現(xiàn)，代碼量不多，但有些地方還是需要花點(diǎn)時(shí)間去理解的，感興趣的可以學(xué)習(xí)一下2022-10-10
JavaScript模仿Pinterest實(shí)現(xiàn)圖片預(yù)加載功能
圖片預(yù)加載是web開發(fā)中一種應(yīng)用相當(dāng)廣泛的技術(shù)，比如我們在做圖片翻轉(zhuǎn)顯示等特效的時(shí)候，為了讓圖片在轉(zhuǎn)換的時(shí)候不出現(xiàn)等待，我們最好是先讓圖片下載到本地，然后在繼續(xù)執(zhí)行后續(xù)的操作。今天本文主要介紹的是利用JS模仿Pinterest圖片社交網(wǎng)站的圖片預(yù)加載功能。2016-10-10
微信小程序連接服務(wù)器展示MQTT數(shù)據(jù)信息的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序連接服務(wù)器展示MQTT數(shù)據(jù)信息的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
js實(shí)現(xiàn)中文轉(zhuǎn)拼音的完整步驟記錄
這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)中文轉(zhuǎn)拼音的相關(guān)資料,主要利用了pinyin-pro包,可以完美的實(shí)現(xiàn)所需要的功能,需要的朋友可以參考下2021-06-06