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 相关文章推荐
extjs之去除s.gif的影响
Dec 25 Javascript
javascript面向对象之二 命名空间
Feb 08 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
微信小程序选择图片控件
Jan 19 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
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
PDO::prepare讲解
2019/01/29 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
python如何将图片转换为字符图片
2020/08/19 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
什么是方法的重载
2013/06/24 面试题
质量承诺书怎么写
2014/05/24 职场文书
团队口号大全
2014/06/06 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript