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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
javascript题目,重写函数让其无限相加
Feb 15 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
vue实现购物车结算功能
Jun 18 Javascript
canvas 中如何实现物体的框选
Aug 05 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
python正则-re的用法详解
2019/07/28 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
C语言编程练习
2012/04/02 面试题
优秀求职自荐信怎样写
2013/12/18 职场文书
高二历史教学反思
2014/01/25 职场文书
低碳环保口号
2014/06/12 职场文书
三问三解心得体会
2014/09/05 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
httpclient调用远程接口的方法
2022/08/14 Java/Android