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 相关文章推荐
JavaScript 获取用户客户端操作系统版本
Aug 25 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
JavaScript设计模式初探
Jan 07 Javascript
最简单的tab切换实例代码
May 13 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
Vue Object 的变化侦测实现代码
Apr 15 Javascript
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 加密与解密的斗争
2009/04/17 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
php+highchats生成动态统计图
2014/05/21 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
python中xlrd模块的使用详解
2021/02/01 Python
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android