JavaScript1.6数组新特性介绍以及JQuery的几个工具方法


Posted in Javascript onDecember 06, 2013

JavaScript 1.6 引入了几个新的Array 方法,具体的介绍见:New in JavaScript 1.6 。这些方法已经被写进了ECMA262 V5。现代浏览器(IE9/Firefox/Safari/Chrome/Opera)都已经支持,但IE6/7/8不支持。jquery的工具方法中提供了类似的功能。

1、Array.forEach()和jquery的$().each()。在数组中的每个项上运行一个函数。类似java5 增强的for循环。

var ary = [2,4,6,8]; // js1.6 Array.forEach方法 
ary.forEach(function(i){alert(i);}); 
// jquery的写法 
$(ary).each(function(){alert(this);}); 
//还可以写成这样 
$(ary).each(function(index,item){alert(item);});//index是元素的索引,item是该元素

2、Array.filter()和jquery的$.grep()。在数组中的每个项上运行一个函数,并将函数返回真值的项作为数组返回。简单的说就是用一个条件过滤掉不符合的数组元素,剩下的符合条件的元素组合成新的数组返回。
var ary = [2,4,6,8]; // js1.6 Array.filter()方法 
var otherAry1 = ary.filter(function(item){return item>4;}); 
alert(otherAry1);//输出6,8 
// jquery写法(注意和$.each的区别) 
// 此处函数中第一个参数是数组元素自身,第二个参数是数组元素索引 
// 而$().each方法刚好相反,作者应该统一下。 
var otherAry2 = $.grep(ary,function(item,index){ 
     return item>4; 
}); 
alert(otherAry2);//输出6,8

3、Array.map()和jquery的$.map()。在数组中的每个项上运行一个函数,并将全部结果作为数组返回。这个方法非常强大,尤其是作用于DOM数组时(在abcc项目上用过,对每个查询模块DOM生成查询字符串)。简单说就是把每个数组元素运算的结果作为新数组元素(还是很拗口)。
var ary = [2,4,6,8]; // js1.6 Array.map()方法 
var newAry1 = ary.map(function(item){return item+1;});//每个元素加1 
alert(newAry1);//输出3,5,7,9 
// jquery写法 
var newAry2 = $.map(ary,function(item,index){return item+1;}); 
alert(newAry2);//输出3,5,7,9

4、Array.every()方法。检查数组元素是否都符合某个条件,只要有一个不符合返回false,否则返回true
var ary = [2,4,6,8,10]; alert(ary.every(function(item){return item>1}));//true 
alert(ary.every(function(item){return item>2}));//false

5、Array.some()方法。检查数组中元素是否符合某个条件,只要有一个符合返回true,否则返回false
var ary = [2,4,,6,8,10]; alert(ary.some(function(item){return item>9;}));//true 
alert(ary.some(function(item){return item>10;}));//false

最后给出 IE6/7/8的解决方案,让这些浏览器完美支持JS1.6的Array新方法。
-function(){ function applyIf(o, c) { 
    if(o) { 
        for(var p in c) { 
            if(o[p]===undefined) { 
                o[p] = c[p]; 
            } 
        } 
    } 
    return o; 
} 
applyIf(Array.prototype, { 
    indexOf : function(obj, idx) { 
        var from = idx == null ? 0 : (idx < 0 ? Math.max(0, arr.length + idx) : idx); 
        for(var i = from, l = this.length; i < l; i++) { 
            if(i in this && this[i] === obj) { 
                return i; 
            } 
        } 
        return -1; 
    }, 
    lastIndexOf : function(obj, idx) { 
        var len = this.length, from = idx == null ? len - 1 : idx; 
        if(from < 0) { 
            from = Math.max(0, len + from); 
        } 
        for(var i = from; i >= 0; i--) { 
            if (i in this && this[i] === obj) { 
                return i; 
            } 
        } 
        return -1; 
    }, 
    every : function(fn, thisObj) { 
        var l = this.length; 
        for(var i = 0; i < l; i++) { 
            if(i in this && !fn.call(thisObj, this[i], i, this)) { 
                return false; 
            } 
        } 
        return true; 
    }, 
    some : function(fn, thisObj) { 
        var l = this.length; 
        for(var i = 0; i < l; i++) { 
            if(i in this && fn.call(thisObj, this[i], i, this)) { 
                return true; 
            } 
        } 
        return false; 
    }, 
    filter : function(fn, thisObj) { 
        var l = this.length, res = [], resLength = 0; 
        for(var i = 0; i < l; i++) { 
            if(i in this) { 
                var val = this[i]; 
                if(fn.call(thisObj, val, i, this)) { 
                    res[resLength++] = val; 
                } 
            } 
        } 
        return res; 
    }, 
    map : function(fn, thisObj) { 
        var l = this.length, res = []; 
        for(var i = 0; i < l; i++) { 
            if(i in this) { 
                res[i] = fn.call(thisObj, this[i], i, this); 
            } 
        } 
        return res; 
    }, 
    forEach : function(fn, thisObj) { 
        var l = this.length; 
        for(var i = 0; i < l; i++) { 
            if(i in this) { 
                fn.call(thisObj, this[i], i, this); 
            } 
        } 
    } 
});  
}();
Javascript 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
详解Javascript中prototype属性(推荐)
Sep 03 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
Javascript中克隆一个数组的实现代码
Dec 06 #Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 #Javascript
如何判断元素是否为HTMLElement元素
Dec 06 #Javascript
随鼠标上下滚动的jquery代码
Dec 05 #Javascript
js简单实现删除记录时的提示效果
Dec 05 #Javascript
Jquery 切换不同图片示例代码
Dec 05 #Javascript
jquery 快速回到页首的方法
Dec 05 #Javascript
You might like
PHP简单获取视频预览图的方法
2015/03/12 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
python实现dijkstra最短路由算法
2019/01/17 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
生日邀请函范文
2014/01/13 职场文书
聚美优品的广告词
2014/03/14 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
离职报告格式
2014/11/04 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
15个值得收藏的JavaScript函数
2021/09/15 Javascript
使用javascript解析二维码的三种方式
2021/11/11 Javascript