详解JavaScript中的Array扩展

本文介绍了 JavaScript 中 Array 对象的一些常用方法,包括 indexOf 和 lastIndexOf 的元素查找,forEach 的遍历操作,every 和 some 的条件判断,filter 的过滤操作,map 的映射转换,以及 reduce 的归约操作。
摘要由CSDN通过智能技术生成
Java script中的Array扩展,一般都是从对象本身入手。这里我们将介绍一些Array对象中的一些东西,比如indexOf是返回元素在数组的索引,没有则返回-1等等。

最近看了一下developer.mozilla.org里的东西,发现它为Array扩展添加了不少generic method,赶得上Prototype的热心程度。

indexOf

返回元素在数组的索引,没有则返回-1。与string的indexOf方法差不多。

如果其他浏览器没有实现此方法,可以用以下代码实现兼容:
  1. Array.prototype.indexOf = function(el, start) {  
  2.   var startstart = start || 0;   
  3.   for ( var i=0; i < this.length; ++i ) {   
  4.       if ( this[i] === el ) {   
  5.           return i;   
  6.      }   
  7.   }   
  8.   return -1;   
  9. }; 
  10. var array = [2, 5, 9];  
  11. var index = array.indexOf(2);  
  12. // index is 0  
  13. index = array.indexOf(7);  
  14. // index is -1
复制代码
lastIndexOf

与string的lastIndexOf方法差不多。

如果其他浏览器没有实现此方法,可以用以下代码实现兼容:
  1. Array.prototype.lastIndexOf = function(el, start) {  
  2.   var startstart = start || this.length;   
  3.   if ( start >= this.length ) {   
  4.       start = this.length;   
  5.   }   
  6.  if ( start < 0 ) {   
  7.        start = this.length + start;   
  8.   }   
  9.  for ( var i=start; i >= 0; --i ) {   
  10.       if ( this[i] === el ) {   
  11.         return i;   
  12.     }   
  13.  }   
  14.   return -1;   
  15. };

forEach

各类库中都实现相似的each方法。

如果其他浏览器没有实现此方法,可以用以下代码实现兼容:
  1. Array.prototype.forEach = function(fn, thisObj) {  
  2.   var scope = thisObj || window;   
  3.   for ( var i=0, j=this.length; i < j; ++i ) {   
  4.       fn.call(scope, this[i], i, this);   
  5.  }   
  6. }; 
  7. function printElt(element, index, array) {  
  8.   print("[" + index + "] is " + element); // assumes print is already defined   
  9. }  
  10. [2, 5, 9].forEach(printElt);  
  11. // Prints:  
  12. // [0] is 2  
  13. // [1] is 5  
  14. // [2] is 9

every

如果数组中的每个元素都能通过给定的函数的测试,则返回true,反之false。换言之给定的函数也一定要返回true与false

如果其他浏览器没有实现此方法,可以用以下代码实现兼容:
  1. Array.prototype.every = function(fn, thisObj) {  
  2.  var scope = thisObj || window;   
  3.   for ( var i=0, j=this.length; i < j; ++i ) {   
  4.       if ( !fn.call(scope, this[i], i, this) ) {   
  5.           return false;   
  6.       }   
  7.   }   
  8.   return true;   
  9. }; 
  10. function isBigEnough(element, index, array) {  
  11.  return (element >= 10);   
  12. }  
  13. var passed = [12, 5, 8, 130, 44].every(isBigEnough);  
  14. console.log(passed)  
  15. // passed is false  
  16. passed = [12, 54, 18, 130, 44].every(isBigEnough);  
  17. // passed is true  
  18. console.log(passed)

some

类似every函数,但只要有一个通过给定函数的测试就返回true。

如果其他浏览器没有实现此方法,可以用以下代码实现兼容:
  1. Array.prototype.some = function(fn, thisObj) {  
  2.   var scope = thisObj || window;   
  3.   for ( var i=0, j=this.length; i < j; ++i ) {   
  4.       if ( fn.call(scope, this[i], i, this) ) {   
  5.           return true;   
  6.      }   
  7.   }   
  8.   return false;   
  9. }; 
  10. function isBigEnough(element, index, array) {  
  11.  return (element >= 10);   
  12. }  
  13. var passed = [2, 5, 8, 1, 4].some(isBigEnough);  
  14. // passed is false  
  15. passed = [12, 5, 8, 1, 4].some(isBigEnough);  
  16. // passed is true

filter

把符合条件的元素放到一个新数组中返回。

如果其他浏览器没有实现此方法,可以用以下代码实现兼容:
  1. Array.prototype.filter = function(fn, thisObj) {  
  2.   var scope = thisObj || window;   
  3.  var a = [];   
  4.   for ( var i=0, j=this.length; i < j; ++i ) {   
  5.      if ( !fn.call(scope, this[i], i, this) ) {   
  6.           continue;   
  7.      }   
  8.       a.push(this[i]);   
  9.   }   
  10.  return a;   
  11. }; 
  12. function isBigEnough(element, index, array) {  
  13.  return (element <= 10);   
  14. }  
  15. var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

map

让数组中的每一个元素调用给定的函数,然后把得到的结果放到新数组中返回。。

如果其他浏览器没有实现此方法,可以用以下代码实现兼容:
  1. Array.prototype.map = function(fn, thisObj) {  
  2.   var scope = thisObj || window;   
  3.   var a = [];   
  4.  for ( var i=0, j=this.length; i < j; ++i ) {   
  5.      a.push(fn.call(scope, this[i], i, this));   
  6.   }   
  7.   return a;   
  8. }; 
  9. var numbers = [1, 4, 9];  
  10. var roots = numbers.map(Math.sqrt);  
  11. // roots is now [1, 2, 3]  
  12. // numbers is still [1, 4, 9]

reduce

让数组元素依次调用给定函数,最后返回一个值,换言之给定函数一定要用返回值。

如果其他浏览器没有实现此方法,可以用以下代码实现兼容:
  1. Array.prototype.reduce = function(fun /*, initial*/)  
  2. {  
  3.  var len = this.length >>> 0;   
  4. if (typeof fun != "function")  
  5.   throw new TypeError();   
  6. if (len == 0 && arguments.length == 1)  
  7.  throw new TypeError();   
  8. var i = 0;  
  9.  if (arguments.length >= 2){   
  10.   var rv = arguments[1];   
  11.  } else{   
  12.  do{   
  13.    if (i in this){   
  14.      rv = this[i++];   
  15.       break;   
  16.    }   
  17.   if (++i >= len)   
  18.       throw new TypeError();   
  19.  }while (true);   
  20.  }   
  21.  for (; i < len; i++){   
  22.  if (i in this)   
  23.    rv = fun.call(null, rv, this[i], i, this);   
  24.  }   
  25.  return rv;   
  26. }; 
  27. var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; });  
  28. // total == 6
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值