1. 程式人生 > >for-in和for-of,forEach和Map

for-in和for-of,forEach和Map

循環對象 共同點 school 遍歷 fine 不能 name pre 包括

for-in和for-of

  1.  for-in循環實際是為循環”enumerable“對象而設計的,是用來循環帶有字符串key的對象的。
    使用for in會遍歷數組所有的可枚舉屬性,包括原型。所以for in更適合遍歷對象,不要使用for in遍歷數組。

  var obj = {a:1, b:2, c:3};
  for (var prop in obj) {
      console.log("obj." + prop + " = " + obj[prop]);
  }

  2.  for-of可用於循環數組value值,或者可叠代對象,如Map, Set, String。
    如果循環普通的對象,需要通過和Object.keys()搭配使用。

  var student={
      name:‘wujunchuan‘,
      age:22,
      locate:{
        country:‘china‘,
        city:‘xiamen‘,
        school:‘XMUT‘
      }
  }
  for(var key of Object.keys(student)){
      //使用Object.keys()方法獲取對象key的數組
      console.log(key+": "+student[key]);
  }    

  3. 總結: 

  1. 推薦在循環對象屬性的時候,使用for...in,在遍歷數組的時候的時候使用for...of。
  2. for...in循環出的是key,for...of循環出的是value
  3. 註意,for...of是ES6新引入的特性。修復了ES5引入的for...in的不足
  4. for...of不能循環普通的對象,需要通過和Object.keys()搭配使用

forEach和Map

  共同點:
    1. 都是循環遍歷數組中的每一項。
    2. forEach() 和 map() 裏面每一次執行匿名函數都支持3個參數:數組中的當前項value,當前項的索引index,原始數組array。
    3. 匿名函數中的this都是指Window。
    4. 只能遍歷數組。

  1. forEach
    沒有返回值,不能中斷循環(使用break語句或使用return語句),只是針對每個元素調用func。

  var ary = [12,23,24,42,1];
  var res = ary.forEach(function
(value,index,array) {   console.log(value*10);   })   console.log(res);//-->undefined;   console.log(ary);//-->[12,23,24,42,1] 原來的數組不變;


  2. Map
    返回一個新的Array,新數組元素為原來的數組的每個元素調用func的結果,對原來數組不影響。

    var ary = [12,23,24,42,1];
    var res = ary.map(function (value,index,array) {
        return value*10;
    })
    console.log(res);//-->[120,230,240,420,10];
    console.log(ary);//-->[12,23,24,42,1];    

for-in和for-of,forEach和Map