js中forEach，for in，for of循環的用法

from:http://www.javashuo.com/article/p-zzgfgems-br.html

1、通常的遍歷數組的方法:

    var array = [1,2,3,4,5,6,7];  
    for (var i = 0; i < array.length; i) {  
        console.log(i,array[i]);  
    }  

2、用for in的方遍歷數組

    for(let index in array) {  
        console.log(index,array[index]);  
    };  

3、forEach

array.forEach(v=>{  
    console.log(v);  
});

array.forEach（function(v){  
    console.log(v);  
});

4、用for in不只能夠對數組,也能夠對enumerable對象操做

var A = {a:1,b:2,c:3,d:"hello world"};  
for(let k in A) {  
    console.log(k,A[k]);  
} 

5、在ES6中,增長了一個for of循環,使用起來很簡單

    for(let v of array) {  
        console.log(v);  
    };  

      let s = "helloabc"; 

      for(let c of s) {  

      console.log(c); 

     }

 總結來講:for in老是獲得對像的key或數組,字符串的下標,而for of和forEach同樣,是直接獲得值
結果for of不能對象用
對於新出來的Map,Set上面

    var set = new Set();  
    set.add("a").add("b").add("d").add("c");  
    var map = new Map();  
    map.set("a",1).set("b",2).set(999,3);  
    for (let v of set) {  
        console.log(v);  
    }  
    console.log("--------------------");  
    for(let [k,v] of map) {  
        console.log(k,v);  
    }  

javascript遍歷對象詳細總結

1.原生javascript遍歷

（1）for循環遍歷

let array1 = ['a','b','c'];
for (let i = 0;i < array1.length;i++){
  console.log(array1[i]);  // a  b  c 
}

（2）JavaScript 提供了 foreach()  map() 兩個可遍歷 Array對象 的方　　　　

    forEach和map用法相似，均可以遍歷到數組的每一個元素，並且參數一致； 

Array.forEach(function(value , index , array){ //value爲遍歷的當前元素，index爲當前索引，array爲正在操做的數組
  //do something
},thisArg)      //thisArg爲執行回調時的this值

不一樣點：

  forEach() 方法對數組的每一個元素執行一次提供的函數。老是返回undefined；

  map() 方法建立一個新數組，其結果是該數組中的每一個元素都調用一個提供的函數後返回的結果。返回值是一個新的數組；

  例子以下：

var array1 = [1,2,3,4,5];
 
var x = array1.forEach(function(value,index){
 
    console.log(value);   //可遍歷到全部數組元素
 
    return value + 10
});
console.log(x);   //undefined    不管怎樣，總返回undefined
 
var y = array1.map(function(value,index){
 
    console.log(value);   //可遍歷到全部數組元素
 
    return value + 10
});
console.log(y);   //[11, 12, 13, 14, 15]   返回一個新的數組

對於相似數組的結構，可先轉換爲數組，再進行遍歷

let divList = document.querySelectorAll('div');   //divList不是數組，而是nodeList
 
//進行轉換後再遍歷
[].slice.call(divList).forEach(function(element,index){
  element.classList.add('test')
})
 
 
Array.prototype.slice.call(divList).forEach(function(element,index){
  element.classList.remove('test')
})
 
[...divList].forEach(function(element,index){   //<strong>ES6寫法</strong>
  //do something
})

（3）for ··· in ···     /      for ··· of ···

for...in 語句以任意順序遍歷一個對象的可枚舉屬性。對於每一個不一樣的屬性，語句都會被執行。每次迭代時，分配的是屬性名　　

補充 : 由於迭代的順序是依賴於執行環境的，因此數組遍歷不必定按次序訪問元素。 所以當迭代那些訪問次序重要的 arrays 時用整數索引去進行 for 循環 (或者使用 Array.prototype.forEach() 或 for...of 循環) 。

let array2 = ['a','b','c']
let obj1 = {
  name : 'lei',
  age : '16'
}
 
for(variable  in array2){   //variable  爲 index
  console.log(variable )   //0 1 2
}
 
for(variable  in obj1){   //variable 爲屬性名
  console.log(variable)   //name age
}

 ES6新增了 遍歷器(Iterator)機制，爲不一樣的數據結構提供統一的訪問機制。只要部署了Iterator的數據結構均可以使用 for ··· of ··· 完成遍歷操做  ( Iterator詳解 ：  http://es6.ruanyifeng.com/#docs/iterator )，每次迭代分配的是 屬性值

 原生具有 Iterator 接口的數據結構以下：

 Array   Map Set String TypedArray 函數的arguments對象 NodeList對象

let array2 = ['a','b','c']
let obj1 = {
  name : 'lei',
  age : '16'
}
 
for(variable  of array2){   //<strong>variable  爲 value</strong>
  console.log(variable )   //'a','b','c'
}
 
for(variable  of obj1){  //<strong>普通對象不能這樣用</strong>
  console.log(variable)   // 報錯 ： main.js:11Uncaught TypeError: obj1[Symbol.iterator] is not a function
}<br><br>let divList = document.querySelectorAll('div');<br><br>for(element of divlist){  //可遍歷全部的div節點<br>　　//do something <br>}

如何讓普通對象能夠用for of 進行遍歷呢？  http://es6.ruanyifeng.com/#docs/iterator  一書中有詳細說明了！

 

　　除了迭代時分配的一個是屬性名、一個是屬性值外，for in 和 for of 還有其餘不一樣    (MDN文檔： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of)

　　　　for...in循環會遍歷一個object全部的可枚舉屬性。

　　　   for...of會遍歷具備iterator接口的數據結構

　　　   for...in 遍歷（當前對象及其原型上的）每個屬性名稱,而 for...of遍歷（當前對象上的）每個屬性值

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};
 
let iterable = [3, 5, 7];
iterable.foo = "hello";
 
for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
 
for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}