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 13 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
jquery实现垂直手风琴导航栏
Feb 18 jQuery
ES6 async、await的基本使用方法示例
Jun 06 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
PHP JSON 数据解析代码
2010/05/26 PHP
php把数组值转换成键的方法
2015/07/13 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
编写Js代码要注意的几条规则
2010/09/10 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
深入解析Python中的变量和赋值运算符
2015/10/12 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
餐饮主管岗位职责
2013/12/10 职场文书
机电专业求职信
2014/06/14 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
红色电影观后感
2015/06/18 职场文书
护理培训心得体会
2016/01/22 职场文书
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android