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 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 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通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
php车辆违章查询数据示例
2016/10/14 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
Python基于pillow判断图片完整性的方法
2016/09/18 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
基于pandas中expand的作用详解
2019/12/17 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
西班牙在线药店:DosFarma
2020/03/28 全球购物
有模特经验的简历自我评价
2013/09/19 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
厂长岗位职责
2014/02/19 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
运动会入场词
2015/07/18 职场文书
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL