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 相关文章推荐
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
checkbox使用示例
Aug 23 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
jquery dataTable 获取某行数据
May 05 jQuery
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
javascript实现京东快递单号的查询效果
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性能测试工具xhprof的详解
2013/06/03 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
经典公益广告词
2014/03/13 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
师德师风事迹材料
2014/12/20 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
vue实现移动端div拖动效果
2022/03/03 Vue.js
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
Golang 对es的操作实例
2022/04/20 Golang