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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
原生js编写焦点图效果
Dec 08 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
JS前端可视化canvas动画原理及其推导实现
Aug 05 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/12/16 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
js验证密码强度解析
2020/03/18 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
python 字符串split的用法分享
2013/03/23 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
使用python实现接口的方法
2017/07/07 Python
人机交互程序 python实现人机对话
2017/11/14 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
Python小白垃圾回收机制入门
2020/06/09 Python
python打开文件的方式有哪些
2020/06/29 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
公司司机岗位职责范本
2014/03/03 职场文书
北京申奥口号
2014/06/19 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
详解Flask开发技巧之异常处理
2021/06/15 Python
MySQL分区以及建索引的方法总结
2022/04/13 MySQL