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 相关文章推荐
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
Vue.use源码分析
Apr 22 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
Vue-cli创建项目从单页面到多页面的方法
Sep 20 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
vue实现tab栏点击高亮效果
Aug 19 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数组中删除元素的实现代码
2012/06/22 PHP
PHP版 汉字转码的实现详解
2013/06/09 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
js的三种继承方式详解
2017/01/21 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
如何更好的编写js async函数
2018/05/13 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
Django自定义分页与bootstrap分页结合
2021/02/22 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
python用户管理系统
2018/03/13 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
一道SQL存储过程面试题
2016/10/07 面试题
会计系中文个人求职信
2013/12/24 职场文书
出国留学单位推荐信
2015/03/26 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
导游词之包公祠
2019/11/25 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python