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的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
原生js实现吸顶效果
Mar 13 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
Vue 的 v-model用法实例
Nov 23 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 作用域解析运算符(::)
2010/07/27 PHP
php中的三元运算符使用说明
2011/07/03 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
Python中的hypot()方法使用简介
2015/05/18 Python
python简单分割文件的方法
2015/07/30 Python
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
Python装饰器知识点补充
2018/05/28 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
详解Python字符串切片
2019/05/20 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
茶叶生产计划书
2014/01/10 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
《风筝》教学反思
2014/04/10 职场文书
促销活动总结范文
2014/04/30 职场文书
满月酒邀请函
2015/01/30 职场文书
一年级下册数学教学反思
2016/02/16 职场文书