for...in和for...of循環以及forEach方法

一、循環

1、for...in循環：可以把一個對象的所有屬性依次循環出來。

var o ={
     name:"jack",
     age:20,
     city:"beijing"
};
for (var key in o){
      alert(key)  //"name","age","city"
} 

由於Array也是對象，而它的每個元素的索引被視為對象的屬性，因此，forj...in循環可以直接循環出Array的索引。

var a =["A","B","C"];
for (var i in a){
    alert(i);       //"0","1","2"
    alert(a[i]);   //"A","B","C"
}

總結：for...in循環的是對象的屬性；所以便利數組得到的是索引而不是值；所以要遍歷數組，可以采用下標循環。

        for...in對Array的循環得到的是String而不是Number。

2、for...of循環：ES6標准引入了新的iterable類型，Array、Map和Set都屬於iterable類型；

                      具有iterable類型的集合可以通過for...of循環來遍歷;

                      只循環集合本身的元素。

用for...of循環遍歷集合，用法如下：

var a = ["A","B","C"];
var s = new Set(["A","B","C"]);
var m = new Map([[1,"x"],[2,"y"],[3,"z"]]);
for (var x of a){
     alert(x);
}
for (var x of s){
     alert(x);
}
for (var x of m){
     alert(x[0]+"="+x[1]);
}

更好的方式是使用iterable內置的forEach方法。它接收一個函數，每次迭代就自動回調該函數。

以Array為例

var a =["A","B","C"];
a.forEach(function(element,index,array)){
       //element:指向當前元素的值
       //index:指向當前元素索引
       //array:指向Aaary對象本身
       alert(element);
} 

Set與Array類似，但Set沒有索引，因此回調函數的前兩個參數都是元素本身；

Map的回調函數參數依次是value、key和map本身。

二、rest參數

ES6引入了rest參數。看下面函數：

function foo(a,b,...rest){
     console.log("a="+a);
     console.log("b="+b);
     console.log(rest);
}

foo(1,2,3,4,5);
//結果
//a=1
//b=2
//Array[3,4,5]

foo(1)
//結果
//a=1
//b=undefined
//Array[]

rest參數只能寫在最后，前面用...標識。從運行結果可知，傳入的參數先綁定a、b，多余的參數以數組形式交給變量rest。

如果傳入的參數連正常定義的參數都沒有填滿，rest參數會接收一個空數組（注意不是undefined）。

三、求和sum()函數

1、用rest參數和for...of循環   　

function sum(...rest){
     var result=0;
     if (rest.length==0){
            return 0;
     }
     for (var i of rest){
           result+=i;
     }
     return result;
} 

2、for 循環

function sum(...rest){
      var result=0;
      if (rest.length==0){
          result=0;
      }
      for (var i=0;i<rest.length;i++){
              result+=rest[i];
      }
      return result;
}

3、用iterable類型的forEach方法

function sum(...rest){
     var result = 0;
     if(rest.length==0){
           result=0;
     }
     rest.forEach(function(element){
           result+=element;
     })
     return result;
}