JavaScript中的各种迭代

最近的迭代方式甚多，老夫好累。

语句迭代

下述都是语句，所以可以在其中使用break，continue。

for

不说了，最基本的。

while

迭代次数不定时常用,略过。

for...in...

常用于迭代一个对象的可枚举属性（包含原型链上的）
也可以用来迭代数组，但是并不推荐这么做。
主要是有以下情况

1.数组原型或是数组本身有其他自定义的属性，会一并输出。

Array.prototype.foo = 1;
var a = [1, 2, 3,];
for (var x in a){
   console.log(x)
}  // 0,1,2,foo

2.数组是分散赋值的，输出情况有误

var a = []; 
a[2] = 2;  

for (var i = 0; i < a.length; i++) {
    console.log(i,a[i])
} 
// 0 undefined
// 1 undefined
// 2 2
for (var x in a){ 
  console.log(x,a[x])
}
// 2 2

for...of...

for...of...是ES6的迭代语句，提供了一个统一的接口。可用于迭代Object, Array，Map，Set, 类数组对象string,arguments,DOM NodeList以及 Generator。
在ES6中，这些可迭代对象都有X.keys(), X.values(), X.entries(),返回的是一个Iterator对象，可用[...Result]的形式转为数组。
TIP 迭代的是自身的，不含继承的，可枚举键名键值和键值对

Object目前还没有这个接口，可用ES5的 Object.keys(obj)，Object.values(obj)，和Object.entries(obj)代替，(其中values和entries是正在实验中的属性)返回一个数组。已提上ES7法案。
建议目前还是使用for...in或for..of Object.keys()进行迭代(区别在于是否迭代原型链上的属性)

在for...of 迭代时，除了Map默认取entries(i是一个数组)Object，Array，Set都是默认取values(i是对应的值),

方法迭代

自带了一些迭代方法。
注意的是这些是函数，不能调用continue或break来跳出循环。
如果想实现continue效果，应该对函数内部return。
如果想实现break效果，可以利用throw错误提前结束循环，但不如使用some，any方法或是直接使用for...of...循环

forEach

X.forEach(callback(value,key,X),this)。
遍历每一项执行一次callback值。
最常用的方法，需要注意的是：

var s = ['a',undefined,'b','c',null];
for(var i of s){
    if(i == 'a') {
      delete s[3];
      s.push('d');  
      s[2] = 'bchange'
    }
    console.log(i) 
}
var  a= ['a',undefined,'b','c',null];
a.forEach((value,key)=>{
    if(key== 0){
        delete a[3];
        a.push('d');
        a[2] = 'bchange'
    };
    console.log(value,key)}
)
console.log(s,a)

输出：
a undefined bchange undefined null  d
a 0   undefined 1   bchange 2   null 4 
["a", undefined, "bchange", 4: null, 5: "d"] ["a", undefined, "bchange", 4: null, 5: "d"]

var m = [];
m[2] = 'value2';
for(var i of m){
    console.log(i)
}
m.forEach((value,key)=>{console.log(value,key)})

输出
undefined undefined value2
value 2

var s = new Set(['a',undefined,'b','c',null]);
for(var i of s){
    if(i == 'a') {
      s.delete('c');
      s.add('d');  
    }
    console.log(i) 
}
var  a= new Set(['a',undefined,'b','c',null]);
a.forEach((value,key)=>{
    if(key== 'a'){
        a.delete('c');
        a.add('d');
    };
    console.log(value)}
)
console.log([...s],[...a])

输出
a undefined b null  d
a undefined b null  d
["a", undefined, "b", null, "d"] ["a", undefined, "b", null, "d"] 

• 对于数组来说
  • forEach遍历的元素范围在第一次调用 callback之前就已确定了。在调用都之后添加到数组中的元素不会被 callback访问到。如果数组中存在的元素被更改，则他们传入 callback的值是访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。
  • for...of则是会在调用中确定，对于已删除或未赋值的元素，都会进行遍历，对于添加或是后来进行修改的元素，会在迭代到该元素的那一刻前进行判断生效。
• 对于Map，Set来说
  • 对于那些已经被删除的元素，forEach和for..of都不会执行的（因为不像数组那样还可以置为undefined），但是，对于元素是undefined的情况会执行。
  • 其余的都正常执行（包括后添加的元素）。

every & some & filter & map

这两个都是针对Array的。

• every
  • 测试数组的所有元素是否都通过了指定函数的测试。
  • 为数组中的每一个元素执行一次 callback函数，直到找到一个使得 callback 返回一个false的元素，如果发现了一个这样的元素，every方法将会立即返回 false。否则返回true。
  • 即callback中如果通过测试应返回true，没有返回false。
• some
  • 测试数组中的某些元素是否通过了指定函数的测试。
  • some为数组中的每一个元素执行一次 callback函数，直到找到一个使得 callback 返回一个“真值”。如果找到了这样一个值，some将会立即返回 true。否则，some返回false。
  • 即callback中如果通过测试应返回true，没有返回false。
• filter
  • 使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素（callback返回true）的新数组。
• map
  • 返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
• 都不会改变原数组。
• 都遍历的元素范围在第一次调用 callback之前就已确定了。在调用都之后添加到数组中的元素不会被 callback访问到。如果数组中存在的元素被更改，则他们传入 callback的值是访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。