JavaScript 基础数组循环和迭代的几种方法

JavaScript 数组循环和迭代

 

（之前一直没怎么注意数组循环，今天做一道题时，用到forEach循环发现它并没有按照我想象的样子执行，总结一下数组循环）

一.第一种方法就是for()循环

　　  for( var index = 0; index < array.length; i ++){} 

　　这种方法很常见，各个语言都有，这里就不再赘述

二.es5新增加的迭代方法（every,filter,forEach,map,some）

　　这些方法都接收两个参数，1）在每一项上可运行的函数（传入的函数接受三个参数：a. 数组项的值；b. 该项在数组中的位置； c. 数组本身）；2）（可选）运行该函数的作用域——影响this的值。

　　语法：以forEach为例，其他类似

array.forEach(callback [, thisArg])
/**
*callback为要执行的回调函数，thisArg为绑定的this若未传参，
*callback 的 this 值在非严格模式下将是全局对象，严格模式下为 undefined
*/

var  nums = [3, 2, 3, 4]
nums.forEach(function(value, index, array){
   //执行某些操作
})
/**
*其中匿名函数为每一项要执行的函数；thisArg省略
* 匿名函数中 value为每一项的值，如3,2,3,4
* index为每一项的位置即索引，如0，1，2，3
*array为数组本身，如nums
*
*thisArg省略
*/

1） every（）方法:

　　测试数组中所有元素是否都通过指定函数的测试，若有一项返回false即返回false；

　　every方法为元素的每个元素执行一次callback函数（不包括通过某些方法删除或者未定义的项，值定义为undefined的项除外），直到找到一个使callback返回false（可转化为false的值），跳出迭代并返回false。否则（所有元素均返回true）返回true。

　　every方法遍历到的元素为第一次调用callback那一个的值，之后添加的值不会被访问到。

function isBigEnough(elemen) {
  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

var a = [1, 2, 3,, 4].every (function(value){
console.log(value)
   return value       
})//1，2，3，4
console.log(a)//true
a = [1, 2, 3, undefined,4].every (function(value){
console.log(value)
   return value       
})//1，2，3，undefind
console.log(a)//false

2）filter（）方法：

　　使用指定的函数测试所有的元素，创建并返回一个包含所有通过测试的元素的新数组

　　filter为数组中的每个元素调用一次callback（不包括通过某些方法删除或者未定义的项，值定义为undefined的项除外），并利用所有callback返回true或等价于true的元素创建一个新数组，未通过callback测试的元素会被跳过，不会包含在新数组里。

var a = [1, 2, 3, 7,4].filter(function(value){
   return value > 4      
})
console.log(a)//[7]

3)forEach()方法：

　　forEach按升序为数组中含有相知的每一项执行一次callback函数（不包括通过某些方法删除或者未定义的项，值定义为undefined的项除外）

　　forEach遍历的范围在第一次调用 callback 前就会确定。调用forEach后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变，则传递给 callback  的值是 forEach遍历到他们那一刻的值。已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了(例如使用 shift()) ，之后的元素将被跳过 。总是返回undefined，不能链式调用。

　　没有办法中止或者跳出 forEach 循环，除了抛出一个异常。如果你需要这样，使用forEach()方法是错误的，你可以用一个简单的循环作为替代

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}

// 注意索引2被跳过了，因为在数组的这个位置没有项
[2, 5, ,9].forEach(logArrayElements);

// a[0] = 2
// a[1] = 5
// a[3] = 9

[2, 5,"" ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 
// a[3] = 9

[2, 5, undefined ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9


let xxx;
// undefined

[2, 5, xxx ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9

　　

　　如果数组在迭代时被修改了，则其他元素会被跳过。

下面的例子输出"one", "two", "four"。当到达包含值"two"的项时，整个数组的第一个项被移除了，这导致所有剩下的项上移一个位置。因为元素 "four"现在在数组更前的位置，"three"会被跳过。 forEach()不会在迭代之前创建数组的副本。

var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
  console.log(word);
  if (word === "two") {
    words.shift();
  }
});
// one
// two
// four

4) map()方法：

　　为数组每一项（不包括通过某些方法删除或者未定义的项，值定义为undefined的项除外）执行一个指定函数，返回一个新数组，每个元素都是回调函数的结果

　　使用 map 方法处理数组时，数组元素的范围是在 callback 方法第一次调用之前就已经确定了。在 map 方法执行的过程中：原数组中新增加的元素将不会被 callback 访问到；若已经存在的元素被改变或删除了，则它们的传递到 callback 的值是 map 方法遍历到它们的那一时刻的值；而被删除的元素将不会被访问到。

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
/* roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9] */

5）some（）方法：

　　测试数组中某些元素是否通过指定函数的测试，若有一项返回true即返回true

　　some为数组中的每一个元素执行一次 callback函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值），停止迭代并返回true；否则（所有元素均为false），返回false。

var a = [1, 2, 3, 7,4].some (function(value){
   return value > 8       
})
console.log(a)//false
a = [1, 2, 3, 9,4].some (function(value){
   return value > 8       
})
console.log(a)//true