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 function、指针及内置对象
Feb 19 Javascript
基于Jquery实现的一个图片滚动切换
Jun 21 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 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
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
让你彻底掌握es6 Promise的八段代码
2017/07/26 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
JavaScript实现图片切换效果
2017/08/12 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
socket + select 完成伪并发操作的实例
2017/08/15 Python
在django中自定义字段Field详解
2019/12/03 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
python烟花效果的代码实例
2020/02/25 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
2014年度个人工作总结
2014/11/07 职场文书
2014年会计工作总结
2014/11/27 职场文书
旅游投诉信范文
2015/07/02 职场文书
应收账款管理制度
2015/08/06 职场文书