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
Feb 25 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
Webpack的Loader和Plugin的区别
Nov 09 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
德生1994机评
2021/03/02 无线电
Yii框架分页实现方法详解
2017/05/20 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
javascript Prototype 对象扩展
2009/05/15 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
JS字符串去除连续或全部重复字符的实例
2018/03/08 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
Python采集腾讯新闻实例
2014/07/10 Python
python自动化测试之连接几组测试包实例
2014/09/28 Python
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
python实现红包裂变算法
2016/02/16 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
python实现求特征选择的信息增益
2018/12/18 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
实例详解Python装饰器与闭包
2019/07/29 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
商铺消防安全责任书
2014/07/29 职场文书
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers