JavaScript Array扩展实现代码


Posted in Javascript onOctober 14, 2009

indexOf
返回元素在数组的索引,没有则返回-1。与string的indexOf方法差不多。
如果其他浏览器没有实现此方法,可以用以下代码实现兼容:

Array.prototype.indexOf = function(el, start) { 
    var start = start || 0; 
    for ( var i=0; i < this.length; ++i ) { 
        if ( this[i] === el ) { 
            return i; 
        } 
    } 
    return -1; 
}; 
var array = [2, 5, 9]; 
var index = array.indexOf(2); 
// index is 0 
index = array.indexOf(7); 
// index is -1

lastIndexOf
与string的lastIndexOf方法差不多。
如果其他浏览器没有实现此方法,可以用以下代码实现兼容:
Array.prototype.indexOf = function(el, start) { 
    var start = start || 0; 
    for ( var i=0; i < this.length; ++i ) { 
        if ( this[i] === el ) { 
            return i; 
        } 
    } 
    return -1; 
};

forEach
各类库中都实现相似的each方法。
如果其他浏览器没有实现此方法,可以用以下代码实现兼容:
Array.prototype.forEach = function(fn, thisObj) { 
    var scope = thisObj || window; 
    for ( var i=0, j=this.length; i < j; ++i ) { 
        fn.call(scope, this[i], i, this); 
    } 
}; 
function printElt(element, index, array) { 
    print("[" + index + "] is " + element); // assumes print is already defined 
} 
[2, 5, 9].forEach(printElt); 
// Prints: 
// [0] is 2 
// [1] is 5 
// [2] is 9

every
如果数组中的每个元素都能通过给定的函数的测试,则返回true,反之false。换言之给定的函数也一定要返回true与false
如果其他浏览器没有实现此方法,可以用以下代码实现兼容:
Array.prototype.every = function(fn, thisObj) { 
    var scope = thisObj || window; 
    for ( var i=0, j=this.length; i < j; ++i ) { 
        if ( !fn.call(scope, this[i], i, this) ) { 
            return false; 
        } 
    } 
    return true; 
}; 
function isBigEnough(element, index, array) { 
  return (element <= 10); 
} 
var passed = [12, 5, 8, 130, 44].every(isBigEnough); 
// passed is false 
passed = [12, 54, 18, 130, 44].every(isBigEnough); 
// passed is true

some
类似every函数,但只要有一个通过给定函数的测试就返回true。
如果其他浏览器没有实现此方法,可以用以下代码实现兼容:
Array.prototype.some = function(fn, thisObj) { 
    var scope = thisObj || window; 
    for ( var i=0, j=this.length; i < j; ++i ) { 
        if ( fn.call(scope, this[i], i, this) ) { 
            return true; 
        } 
    } 
    return false; 
}; 
function isBigEnough(element, index, array) { 
  return (element >= 10); 
} 
var passed = [2, 5, 8, 1, 4].some(isBigEnough); 
// passed is false 
passed = [12, 5, 8, 1, 4].some(isBigEnough); 
// passed is true

filter
把符合条件的元素放到一个新数组中返回。
如果其他浏览器没有实现此方法,可以用以下代码实现兼容:
Array.prototype.filter = function(fn, thisObj) { 
    var scope = thisObj || window; 
    var a = []; 
    for ( var i=0, j=this.length; i < j; ++i ) { 
        if ( !fn.call(scope, this[i], i, this) ) { 
            continue; 
        } 
        a.push(this[i]); 
    } 
    return a; 
}; 
function isBigEnough(element, index, array) { 
  return (element <= 10); 
} 
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

map
让数组中的每一个元素调用给定的函数,然后把得到的结果放到新数组中返回。。
如果其他浏览器没有实现此方法,可以用以下代码实现兼容:
Array.prototype.map = function(fn, thisObj) { 
    var scope = thisObj || window; 
    var a = []; 
    for ( var i=0, j=this.length; i < j; ++i ) { 
        a.push(fn.call(scope, this[i], i, this)); 
    } 
    return a; 
}; 
<div id="highlighter_240589"> 
var numbers = [1, 4, 9]; 
var roots = numbers.map(Math.sqrt); 
// roots is now [1, 2, 3] 
// numbers is still [1, 4, 9]

reduce
让数组元素依次调用给定函数,最后返回一个值,换言之给定函数一定要用返回值。
如果其他浏览器没有实现此方法,可以用以下代码实现兼容:
Array.prototype.reduce = function(fun /*, initial*/) 
{ 
  var len = this.length >>> 0; 
  if (typeof fun != "function") 
    throw new TypeError(); 
  if (len == 0 && arguments.length == 1) 
    throw new TypeError(); 
  var i = 0; 
  if (arguments.length >= 2){ 
    var rv = arguments[1]; 
  } else{ 
    do{ 
      if (i in this){ 
        rv = this[i++]; 
        break; 
      } 
      if (++i >= len) 
        throw new TypeError(); 
    }while (true); 
  }   for (; i < len; i++){ 
    if (i in this) 
      rv = fun.call(null, rv, this[i], i, this); 
  } 
  return rv; 
};

var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; }); 
// total == 6
Javascript 相关文章推荐
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
JavaScript 动态创建VML的方法
Oct 14 #Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 #Javascript
jQuery 标题的自动翻转实现代码
Oct 14 #Javascript
JavaScript 替换Html标签实现代码
Oct 14 #Javascript
JavaScript null和undefined区别分析
Oct 14 #Javascript
JavaScript iframe的相互操作浅析
Oct 14 #Javascript
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 #Javascript
You might like
两种php去除二维数组的重复项方法
2015/11/04 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
Jquery iframe内部出滚动条
2010/02/11 Javascript
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
实例讲解React 组件
2020/07/07 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
python服务器端收发请求的实现代码
2014/09/29 Python
使用Python编写Linux系统守护进程实例
2015/02/03 Python
python安装以及IDE的配置教程
2015/04/29 Python
python3实现基于用户的协同过滤
2018/05/31 Python
python打开音乐文件的实例方法
2020/07/21 Python
Python中pass的作用与使用教程
2020/11/13 Python
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
电力培训心得体会
2014/09/02 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
婚庆主持词大全
2015/06/30 职场文书
小学总务工作总结
2015/08/13 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB