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 相关文章推荐
extjs两个tbar问题探讨
Aug 08 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
javascript如何定义对象数组
Jun 07 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 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
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
python3.3实现乘法表示例
2014/02/07 Python
Python中的exec、eval使用实例
2014/09/23 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
python实现人民币大写转换
2018/06/20 Python
python读取LMDB中图像的方法
2018/07/02 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
大学生党员自我批评
2014/02/14 职场文书
党校学习自我鉴定
2014/02/24 职场文书
购房意向书
2014/04/01 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
教师岗位说明书
2015/09/30 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers