网页设计学习笔记

HTML,CSS,JavaScript

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: :: 管理 ::

在 ECMAScript 5 中,对 Array 增加了几个原型方法,包括 indexOf 和 lastIndexOf 这两个定位方法,以及 every,some,forEach,filter,map,reduce 和 reduceRight 这几个迭代方法。

Array.prototype.indexOfArray.prototype.lastIndexOf 这两个方法用于在数组中查找一个元素,如果找到则返回该元素所在位置,否则返回 -1。两者的区别在于前者从最前面开始查找,而后者从最后面开始查找。例如:

var arr = ['red', 'green', 'blue', 'red', 'green', 'blue'];
console.log(arr.indexOf('green'));  // 1
console.log(arr.lastIndexOf('green')); // 4

在 jQuery 中,$.inArray() 这个简单的函数模拟了 Array.prototype.indexOf 函数,对于旧的不支持 indexOf 的浏览器(例如 IE6-IE8),就需要补上这个功能。实现的代码模拟如下:

$.inArray = function(value, array) {
  if (Array.prototype.indexOf) {
    return array.indexOf(value);
  } else {
    for (var i = 0; i < array.length; i++) {
      if (array[i] === value) return i;
    }
    return -1;
  }
};

Array.prototype.every 这个方法调用某个函数对数组的每个元素进行检查,如果每个元素都返回 true,则该方法返回 true,否则返回 false。特别地,如果数组为空,则总是返回 true。例子如下:

var arr = ['red', 'green', 'blue', 'red', 'green', 'blue'];
console.log(arr.every(function(value, index, array){return value.length > 2}));  // true
console.log(arr.every(function(value, index, array){return value.length > 4}));  // false

Array.prototype.some 这个方法调用某个函数对数组的每个元素进行检查,如果某个元素返回 true,则该方法返回 true,否则返回 false。特别地,如果数组为空,则总是返回 false。例子如下:

var arr = ['red', 'green', 'blue', 'red', 'green', 'blue'];
console.log(arr.some(function(value, index, array){return value.length > 2}));  // true
console.log(arr.some(function(value, index, array){return value.length > 4}));  // true

Array.prototype.forEach 这个方法调用某个函数对数组的每个元素进行某种操作。例子如下:

var arr = [1, 3, 5, 0, -4, -7];
arr.forEach(function(value, index, array){array[index] = - array[index]})
console.log(arr) // [-1, -3, -5, 0, 4, 7]

Array.prototype.filter 这个方法调用过滤函数对数组的所有元素进行筛选。只留下过滤函数返回 true 的所有元素。例子如下:

var arr = [1, 3, 5, 0, -4, -7];
arr = arr.filter(function(value, index, array){return value < 2})
console.log(arr) // [1, 0, -4, -7]

后面几个 Array 方法的介绍下次再补上。

参考资料:
[1] ECMAScript 5 compatibility table
[2] ECMAScript 5 Arrays - Test Drive
[3] ECMAScript 5: Array methods | Jimmy Cuadra
[4] ECMAScript5 Array 新方法小结 - Andy Zhang
[5] Array - JavaScript | MDN
[6] jQuery.inArray() | jQuery API Documentation

posted on 2013-01-24 13:53  zoho  阅读(273)  评论(0编辑  收藏  举报