我们经常给 String,Function,Array 的原型加上自定义的扩展函数,比如去除字符串空格,数组排序等
今天重点讲下 如何给Array对象扩展
1、直接在Array.prototype 上扩展
2、用自己方法对数组对象进行扩展
直接在Array.prototype上扩展,不能直接对dom对象使用(如:document.getElementsByTagName('div')得到的nodeList);
对有洁癖的同学而言 也破了原始生态环境的 : )
先来看下 yui操作数组的一些方法,这里我对源码简单剥离并改动了下
(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<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) ? //先检测浏览器是否已支持,若有则调用原生
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原生方法来把aguments转换为JS数组的其他方法 (Dom对象不可以,只有遍历)
Array.apply(null,arguments);
[].slice.call(arguments,0);
[].splice.call(arguments,0,arguments.length);
[].concat.apply([],arguments);
...
YArray函数不仅可以操作数组对象也对nodeList对象进行了操作
YArray(document.getElementsByTagName("div"));
遍历dom对象 重新组装成一个数组 : )
a = [];
l = o.length;
for (; start<l; start++) {
a.push(o[start]);
}
return a;
YArray.each
遍历数组,如有传入函数,每次遍历都执行callback