javascript Array数组对象的扩展函数代码

 更新时间:2010年05月22日 21:46:05   作者:  
我们经常给 String,Function,Array 的原型加上自定义的扩展函数,比如去除字符串空格,数组排序等
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

今天重点讲下 如何给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
复制代码 代码如下:

YArray.each([1,2,3],function(item){
alert(item);// 执行了3次,1,2,3
});

YArray.hash
数组 组装成 键值对 可以理解成一个json对象
YArray.hash(["a","b"],[1,2]);

YArray.indexOf
返回(想要找寻值)一样的该值在数组的索引值

YArray.indexOf([1,2],1)
YArray.numericSort
对数组进行排序,从小到大
[3, 1, 2].sort(YArray.numericSort);
YArray.some
是否数组中的有元素通过了callBack的处理?如果有,则立马返回true,如果一个都没有,则返回false
复制代码 代码如下:

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


让我们看看 javascript 1.6 -1.8 对数组的扩展 ,并学习如何实现相同的功能
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;
};
}

是否数组中的每个元素都通过了callBack的处理?如果是,则返回true,如果有一个不是,则立马返回false
这和我们刚才提到的YUI种的 some 函数 很雷同 :) 功能刚好相反

Array.prototype.filter
复制代码 代码如下:

Array.prototype.filter = function (block /*, thisp */) { //过滤器 ,添加方便,进行判断过滤
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;
};

遍历数组,执行函数,迭代数组,每个元素作为参数执行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*/) {
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;
};

让数组元素依次调用给定函数,最后返回一个值,换言之给定函数一定要用返回值

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扩展对开发还是很有帮助滴 : )

相关文章

  • JavaScript 原型学习总结

    JavaScript 原型学习总结

    每个对像都有一个隐慝的属性用于指向到它的父对像(构造对像的函数)的原型(这里称为父原型或隐式原型),并从中继承它的属性和方法
    2010-10-10
  • ElementUI的Dialog弹窗实现拖拽移动功能示例代码

    ElementUI的Dialog弹窗实现拖拽移动功能示例代码

    这篇文章主要介绍了ElementUI的Dialog弹窗实现拖拽移动功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • firefo xml 读写实现js代码

    firefo xml 读写实现js代码

    firefo xml 读写实现 不过要是你的xml要编码成功还得在str前面加上xml头,千万别忘了啊。
    2009-06-06
  • js弹出窗口之弹出层的小例子

    js弹出窗口之弹出层的小例子

    js弹出窗口之弹出层的小例子,需要的朋友可以参考一下
    2013-06-06
  • javascript实现Email邮件显示与删除功能

    javascript实现Email邮件显示与删除功能

    这篇文章主要介绍了javascript实现Email邮件显示与删除功能,需要的朋友可以参考下
    2015-11-11
  • 微信小程序传值以及获取值方法的详解

    微信小程序传值以及获取值方法的详解

    这篇文章主要介绍了微信小程序传值以及获取值方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JavaScript File API实现文件上传预览

    JavaScript File API实现文件上传预览

    这篇文章主要为大家介绍了JavaScript File API实现文件上传预览,File API将极大地方便 Web 端的文件上传等操作,本文将介绍 File API的概况,并用两个实例展示File API的应用,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JS如何根据条件取出数组中对应项

    JS如何根据条件取出数组中对应项

    这篇文章主要介绍了JS根据条件取出数组中对应项,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • Microsoft Ajax Minifier 压缩javascript的方法

    Microsoft Ajax Minifier 压缩javascript的方法

    使用Microsoft AJAX 库 (第六个预览版) 其中有一个 ajaxmin.exe 可以压缩Js文件可以在dos 命令下 /? 查看其参数说明。
    2010-03-03
  • 在Web关闭页面时发送Ajax请求的实现方法

    在Web关闭页面时发送Ajax请求的实现方法

    这篇文章主要给大家介绍了关于如何在Web关闭页面时发送Ajax请求的实现方法,文中通过示例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03

最新评论

?


http://www.vxiaotou.com