for..of和for..in和map、filter等循環區別

1、for in遍歷的是數組的索引（即鍵名），而for of遍歷的是數組元素值。

for in遍歷比較適合遍歷對象，不太適合數組，有可能遍歷出來的不按照順序

遍歷數組

var myArray=[1,2,4,5,6,7]
for (var i in myArray) {  //i是數組的index
  console.log(myArray[i]);  //1,2,4,5,6,7
}

遍歷對象

var myObj={'name:'lanlan','sex':'male'}
for (var key in myObj) {  //key是對象的key值
  console.log(key,myObj[key]);  //name,lanlan,sex,male
}

for of遍歷

var myArray=[1,2,4,5,6,7]for (var value of myArray) { //value是數組的元素值
  console.log(value);  //
}

 forEach(value,index,arr)遍歷數組 (value是當前遍歷的值，index是當前遍歷的索引，arr是當前遍歷所在的數組)

    //forEach循環
    [1,2,3,4,5,6].forEach(function (value,index,arr) {
         console.log(value); //1,2,3,4,5,6
         console.log(index);//0,1,2,3,4,5
    });

 filter遍歷

filter也是一個常用的操作，它用於把Array的某些元素過濾掉，然后返回剩下的元素。

和map()類似，Array的filter()也接收一個函數。和map()不同的是，filter()把傳入的函數依次作用於每個元素，然后根據返回值是true還是false決定保留還是丟棄該元素。

例如，在一個Array中，刪掉偶數，只保留奇數，可以這么寫：

 var arr = [1, 2, 4, 5, 6, 9, 10, 15];
 var r = arr.filter(function (x) {
        return x % 2 !== 0;
 });
r; // [1, 5, 9, 15]

把一個Array中的空字符串刪掉，可以這么寫：

var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (s) {
     return s && s.trim(); // 注意：IE9以下的版本沒有trim()方法
});
r; // ['A', 'B', 'C']

可見用filter()這個高階函數，關鍵在於正確實現一個“篩選”函數。

回調函數

filter()接收的回調函數，其實可以有多個參數。通常我們僅使用第一個參數，表示Array的某個元素。回調函數還可以接收另外兩個參數，表示元素的位置和數組本身：

var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
     console.log(element); // 依次打印'A', 'B', 'C'
     console.log(index); // 依次打印0, 1, 2
     console.log(self); // self就是變量arr
     return true;
});

利用filter，可以巧妙地去除Array的重復元素：

 var r,
     arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
 r = arr.filter(function (element, index, self) {
     return self.indexOf(element) === index;
});
console.log(r.toString());

運行結果：

apple,strawberry,banana,pear,orange

去除重復元素依靠的是indexOf總是返回第一個元素的位置，后續的重復元素位置與indexOf返回的位置不相等，因此被filter濾掉了。