一.for迴圈

最常見的遍歷方法，用來遍歷陣列，學過程式語言的基本都知道怎麼用，如下：

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

上面這是最簡單的用法，我在有些書裡還經常看到這種用法，貼出來供參考：

var a = [1, 2, 3, 4, 5];
for (var i = 0, value; value = a[i++];) {
  console.log(value);
}

二.forEach，some和every

對於陣列來說，有時候經常有遍歷所有屬性值的需求，javascript有三種陣列的輔助迭代器，每種方法的引數都是一個回撥函式，回撥函式的引數便是陣列每一個屬性對應的值，下面一一說明：

• forEach(..)：會遍歷陣列中的所有值並忽略回撥函式的返回值

var a = [1, 2, 3, 4, 5];
a.forEach(function (i) {
  console.log(i);//1 2 3 4 5
  // return true ,return false 或者不寫返回值，結果都一樣
});

• some(..):一直執行直到回撥函式返回 true (或者“真”值).返回true時相當於在for迴圈裡break,會提前終止迴圈

var a = [1, 2, 3, 4, 5];
a.some(function (i) {
  if (i === 3) {
    return true
 
;
  }
  console.log(i); //1 2
  return false;//回撥函式預設返回false，這裡不寫也可以
});

• every(..):一直執行直到回撥函式返回 false (或者“假”值).返回false時相當於在for迴圈裡break,會提前終止迴圈

var a = [1, 2, 3, 4, 5];
a.every(function (i) {
  if (i === 3) {
    return false;
  }
  console.log(i);//1 2
  return true;//回撥函式預設返回false，這裡return true必須要寫，否則在遍歷第一個屬性值之後就會終止迴圈
 

});

三.for..in和for..of

• for..in迴圈會遍歷物件中的所有可列舉屬性

關於物件屬性是否可列舉可以參考我的上一篇部落格

var obj = {
  a: 1,
  b: "lian"
};
//給obj定義一個不可列舉的屬性c
Object.defineProperty(obj, "c", {
  value: 2,
  emumerable: false,
  writable: true,
  configurable: true
});
//雖然屬性c不可列舉，但是值依然存在
console.log(obj.c); //2
for (var i in obj) {
  //只會遍歷可列舉屬性
  console.log(obj[i]); //1 lian
}

for..in迴圈可遍歷物件的所有可列舉屬性，所以一般用來遍歷物件而不是陣列，否則如果陣列物件包含其他可列舉屬性，遍歷結果就會和期望結果不同：

var a = [1,2,3];
a.ex = "ex";
//注意這裡遍歷的只是屬性
for(var i in a){
  console.log(i); // 0 1 2 ex
}

• for..of :為了彌補for..in迴圈遍歷陣列的缺陷，ES6推出了for..of迴圈

var a = [1,2,3];
a.ex = "ex";
//而這裡遍歷的是屬性的值
for(var i of a){
  console.log(i); // 1 2 3
}

由上面的測試可以看出for..in迴圈預設遍歷的是可列舉屬性列表，所以更適合遍歷物件 
而for..of迴圈預設遍歷陣列每一項的值，所以更適合遍歷陣列， 
雖然陣列也算是物件，但這裡陣列指的只是Array物件（因為Array物件內建了@@iterator，這裡不討論）而不包括偽陣列物件（具有length屬性且可以通過下標訪問屬性值），如執行下面的程式碼就會報錯：

var a = {
  length:2,
  0:1,
  1:"lian"
}
for(var i of a){
  console.log(i); 
}

四.其他

我們在網頁開發時經常會用到map方法，map() 方法建立一個新陣列，其結果是該陣列中的每個元素都呼叫一個提供的函式後返回的結果。

var a = [1,2,3];
var result = a.map(function (i) {
  return i*3;
});
console.log(result); //[ 3, 6, 9 ]

上面的程式碼就是每次取出a的每一個屬性值，呼叫方法生成一個新的結果值，然後將結果值存入返回值的陣列中，所以result是一個數組，每一項的值是a每一項的值乘以3的結果 
map在網頁開發中通常用來根據data值批量生成DOM節點，也可以用來從新組裝新物件總之方法很多