js遍历

js遍历方法

var arrDemo =['aaa','bbb','ccc','ddd','eee'];var objDemo = {cn:'aaa',sex:'boy',type:'cute',age:'18'};  // for循环：循环数组  for(var i=0;i<arrDemo.length;i++){   //i为index      console.log(i+'---'+arrDemo[i]);  }  // 输出    0---aaa    1---bbb    2---ccc    3---ddd    4---eee  // forEach：用于调用数组的每个元素，并将元素传递给回调函数。你不能使用break语句中断循环，也不能使用return语句返回到外层函数。  arrDemo.forEach(function(value,index,thisArr){      //三个参数，分别为索引，值，当前array      console.log(value+'---'+index+'---'+thisArr[index]);  });  // 输出    aaa---0---aaa    bbb---1---bbb    ccc---2---ccc    ddd---3---ddd    eee---4---eee  // for...of:用于遍历所有可遍历（有Symbol.iterator属性）的collection的数值  for (var value of arrDemo) {      console.log(value);  }  // 输出    aaa    bbb    ccc    ddd    eee  // for...in：会遍历对象所有可枚举的属性，包括prototype的，可通过hasOwnProperty（）来过滤，使得只有私有属性被遍历  for(var key in objDemo){    console.log(key+'---'+objDemo[key]);  }  for(var key in objDemo){    console.log(key+'---'+objDemo[key]);  }  // 输出    cn---aaa    sex---boy    type---cute    age---18    // ES6中有四类数据结构默认具有遍历器接口: （1）数组 （2）某些类数组 （3）Map （4）Set    // for...of适合用来遍历数组，for…in也可用于遍历数组，但是如果通过Array.prototype.xxx为Array原生对象添加了属性，则会在该遍历中被读到。    // foreach，map,filter，reduce 用于数组遍历    // map和filter会返回一个新的数组    arrDemo.map(function(value,index,thisArr){      //三个参数，分别为索引，值，当前array      console.log(value+'---'+index+'---'+thisArr[index]);  });  // 输出    aaa---0---aaa    bbb---1---bbb    ccc---2---ccc    ddd---3---ddd    eee---4---eee    [undefined, undefined, undefined, undefined, undefined]  arrDemo.map(function(value,index,thisArr){    //三个参数，分别为索引，值，当前array    return thisArr;  });  // 输出    ["aaa", "bbb", "ccc", "ddd", "eee"]  arrDemo.map(function(value,index,thisArr){    //三个参数，分别为索引，值，当前array    return value+'tip';  });  // 输出    ["aaatip", "bbbtip", "ccctip", "dddtip", "eeetip"]  arrDemo.filter(function(value,index,thisArr){    //三个参数，分别为索引，值，当前array    console.log(value+'---'+index+'---'+thisArr[index]);  });  // 输出    aaa---0---aaa    bbb---1---bbb    ccc---2---ccc    ddd---3---ddd    eee---4---eee    []  arrDemo.filter(function(value,index,thisArr){    //三个参数，分别为索引，值，当前array    return thisArr;  });  // 输出    ["aaa", "bbb", "ccc", "ddd", "eee"]    arrDemo.filter(function(value,index,thisArr){    //三个参数，分别为索引，值，当前array    return index>2;  });  // 输出    ["ddd", "eee"]  // reduce：会返回一个累加值    arrDemo.reduce(function(previousValue, currentValue, currentIndex, thisArray) {            return previousValue + currentValue;  });  // 输出    "aaabbbcccdddeee"

总结

无论遍历树、链表、集合、哈希等等复数对象容器，通常目的只是为了遍历，而不在乎容器本身的数据结构、数量。
for、forEach本身就是对迭代器的语法糖封装
基础的for必须制定初始位置，手动查找到对象，比如：

for (var i = 0; i < array.Length; i++) {    item = array[i];    //Do sth. to item}

迭代器把这个过程封装了，所以可以写成：

foreach (item in array) {    //Do sth. to item}

for of / foreach实际上是调用了迭代接口
获取了iterator后，通过iterator不断地拿next()，直到拿不到为止。

foreach (item in array) {    item.Invoke();}

经过编译后类似于（伪代码）：

var iterator = array.Iterator;while (var next = iterator.next()) {    item.Invoke();}

array.Iterator就是源自于（遍历／枚举／迭代）接口，没有这个接口无法使用迭代器。