数组遍历方法对比

forEach函数

函数说明： forEach(f [,o]): 此方法类似于for/in循环，其作用是遍历整个数组并执行函数的某些操作，但它不会遍历数组的属性。它接受一个函数参数，该函数可以有1、2与3个参数。完整的三个参数分别为:数组中的每一个值，数组的索引，数组本身。这个函数没有返回值。

获取数组方法:

function getArray(){
  var a = new Array(10);
  for(var i=0, j=a.length; j>i; i++)
    a[i] = i+1;
  return a;
}

测试方法：

function testForEach(){
  var a = getArray();
  var b = a.forEach(function(e, i){
    console.log(e, i);
    if(0 === e % 2) return false;
    else return true;
  });
  return [a, b];
}

testForEach()
// @return [ [1-10], undefined ]

总结：

• 参数第一个是elem，第二个才是index,这个和jQuery的$.fn.each方法不同；
• 返回默认是undefined；
• 对原数组没有影响。

map函数

函数说明：类似于forEach()方法，但它有返回值—一个新数组，它的参数函数必须有返回值，参数函数的返回值作为新数组的元素。其它用法与forEach()方法类似。

测试方法：

function testForEach(){
  var a = getArray();
  var b = a.map(function(e, i){
    console.log(e, i);
    if(0 === e % 2) return false;
    else return true;
  });
  return [a, b];
}

testForEach()
// @return [ [1-10], [true, false, true, false , ... ] ]

总结：

• 参数也分别是elem, index；
• 返回是一个数组，包含的元素是每个迭代的返回内容；
• 对原数组没有影响

filter函数

函数说明：对数组元素进行过滤，返回一个符合要求的新数组。

测试方法：

function testForEach(){
  var a = getArray();
  var b = a.filter(function(e, i){
    console.log(e, i);
    if(0 === e % 2) return false;
    else return true;
  });
  return [a, b];
}

testForEach()
// @return [ [1-10], [1,3,5,7,9] ]

总结：

• 参数也分别是elem, index；
• 返回是一个数组，在迭代里返回true才会被push在返回的数组里
• 对原数组没有影响

every函数

函数说明：有一个布尔类型的返回值，函数参数f用来检测数组元素是否满足要求。有且只有数组全部元素都满足f的要求时，才会返回true，否则返回false。

测试方法：

function testForEach(){
  var a = getArray();
  var b = a.every(function(e, i){
    console.log(e, i);
    if(0 === e % 2) return false;
    else return true;
  });
  return [a, b];
}

testForEach()
// @return [ [1-10], false ]

function testForEach(){
  var a = getArray();
  var b = a.every(function(e, i){
    console.log(e, i);
    return true; // 直接改返回true
  });
  return [a, b];
}

testForEach()
// @return [ [1-10], true ]

总结：

• 参数也分别是elem, index
• 不影响原数组
• 在迭代中，一旦返回false，那就会中断迭代，返回false; 如果顺利迭代完成，则返回true;

some函数

函数说明：与every()方法不同，只要有数组元素满足f的要求就返回true，否则返回false。

function testForEach(){
  var a = getArray();
  var b = a.some(function(e, i){
    console.log(e, i);
    if(0 === e % 2) return false;
    else return true;
  });
  return [a, b];
}

// @return [ [1-10], true ]

总结：

• 参数都也elem， index
• 不影响原数组
• 在迭代中，一旦返回false，那就会中断迭代，但如果之前有一个返回true的也会返回true，如果没就返回false;如果顺利迭代完成，则返回true;

reduce函数

函数说明： reduce(f [, initial, index, array]): 对数组元素值进行计算。返回最后一次计算的值。函数f(x,y)接受两个参数，如果有初始值，则把初始值作为x计算，然后把每一次的计算值作为下一次的x，把数组元素依次作为y。

a.reduce(function(x, y){console.log(x, y); return x + y;}, 0)
// 0 1 VM1124:2
// 1 2 VM1124:2
// 3 3 VM1124:2
// 6 4 VM1124:2
// 10 5 VM1124:2
// 15 6 VM1124:2
// 21 7 VM1124:2
// 28 8 VM1124:2
// 36 9 VM1124:2
// 45 10 VM1124:2
// 55

reduceRight(): 与reduce()函数作用相同，只是它从右向左依次取数组元素。

indexOf函数

indexOf(value [, start]): 根据值来找到相应在数组中的索引位置，取多个匹配索引用最小的那个或在没有匹配的情况下返回-1。

lastIndexOf(value [, start]): 与indexOf()函数相似，只是它是从后面向前面进行搜索。

数组遍历方法对比