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 相关文章推荐
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
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各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
在Python的Django框架中包装视图函数
2015/07/20 Python
Python编程之string相关操作实例详解
2017/07/22 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
django url到views参数传递的实例
2019/07/19 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
个人求职信格式范文
2015/03/20 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
信用卡收入证明范本
2015/06/12 职场文书
五年级作文之成长
2019/09/16 职场文书