JS 數組遍歷和對象遍歷的方法

JS數組遍歷：

一、普通 for 循環遍歷

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

二、優化版 for 循環：使用變量，將長度緩存起來，避免重複獲取長度，數組很大時優化效果明顯

var arr = [1,2,3,4,5];
for(var j = 0, len = arr.length; j < len; j++){
  console.log(arr[j])
}
// 1
// 2
// 3
// 4
// 5

三、forEach，數組自帶的循環，主要功能是遍歷數組，實際性能比for還弱

var arr = [1,2,3,4,5];
arr.forEach(function(value, i){
  console.log(i + ':' + value)
})
// 0:1
// 1:2
// 2:3
// 3:4
// 4:5

forEach這種方法也有一個小缺陷：你不能使用break語句中斷循環，也不能使用return語句返回到外層函數。

四、map遍歷，map此時不是‘地圖’而是‘映射’,顧名思義就是將此數組映射到一個新數組。用法與 forEach 相同

var arr = [1,2,3,4,5];
arr.map(function(value,index){
  console.log(index + ':' + value)
})

一樣，map語法不能使用break語句中斷循環，可是map支持使用return語句，支持return返回值。是返回一個新數組，而不會改變數組。

var arr = [1,2,3,4,5]
var arrNew = arr.map(function(val, index){
  return val*2
})
console.log(arrNew) // [2, 4, 6, 8, 10]

map方法接受一個函數做爲參數。該函數調用時，map方法向它傳入三個參數：當前成員、當前位置和數組自己。

['aaa', 'bbb', 'ccc'].map(function(elem, index, arr) { 
	console.log(index);
    console.log(elem);
	console.log(arr)
}); 
// 0
// aaa
// ["aaa", "bbb", "ccc"]
// 1
// bbb
// ["aaa", "bbb", "ccc"]
// 2
// ccc
// ["aaa", "bbb", "ccc"]

此外，map()循環還能夠接受第二個參數，用來綁定回調函數內部的this變量，將回調函數內部的this對象，指向第二個參數，間接操做這個參數（通常是數組）。

var arr = ['a', 'b', 'c'];
 
[1, 2].map(function (e) {
    return this[e];
}, arr)
 
// ["b", "c"]

五、for-of 遍歷，是ES6新增功能

var arr = [1,2,3,4,5]
for(let item of arr){
  console.log(item)
}
// 1
// 2
// 3
// 4
// 5

for-of 性能更優；

與forEach 不一樣的是，它能夠正常相應break、continue、return語句；

for-of 不只支持數組，還支持大多數類數組對象；

for-of 還支持字符串遍歷

六、for-in 遍歷

for-in 是爲了遍歷對象而設計的，不適用於遍歷數組。

遍歷數組的缺點，數組的下標 index 是 number類型，for-in 遍歷的index的值是 string 類型

var arr = {number:1, age:18, sex: '女'}
for(var key in arr){
  console.log(key + ':' + arr[key])
}

// number:1
// age:18
// sex:女

任何對象都繼承了Object對象，或者其它對象，繼承的類的屬性是默認不可遍歷的，for... in循環遍歷的時候會跳過，可是這個屬性是能夠更改成能夠遍歷的，那麼就會形成遍歷到不屬於自身的屬性。

// 舉例說明遍歷不到繼承屬性
var obj = {};
for(var p in obj){
  console.log(p)
}
// 無任何輸出內容

若是隻想遍歷自身的屬性，不會產生遍歷失真的狀況，應該結合hasOwnPropertty方法，在循環內部判斷一下。

var person = { name: '老張' };
for (var key in person) {  
    if (person.hasOwnProperty(key)) {   
         console.log(key);
      }
}

七、while循環

while循環語句包括一個循環條件和一段代碼塊，只要條件爲真，就不斷循環執行代碼塊。

var i = 0;
while(i < 10){
  console.log('當前i爲：' + i)
  i++
}

八、do...while循環

do...while循環與while循環相似，惟一的區別就是先運行一次循環體，而後判斷循環條件。

var x = 5;
var y = 0;

do {
  console.log(y);
  y++;
} while(y < x)

九、forEach 循環

 forEach方法與map方法很類似，也是對數組的全部成員依次執行參數函數。可是，forEach方法不返回值，只用來操做數據。也就是說，若是數組遍歷的目的是爲了獲得返回值，那麼使用map方法，不然使用forEach方法。forEach的用法與map方法一致，參數是一個函數，該函數一樣接受三個參數：當前值、當前位置、整個數組。
 

function log(element, index, array) {
     console.log('[' + index + '] = ' + element); 
} ；
 
[2, 5, 9].forEach(log);

十、filter過濾循環

filter 方法用戶過濾數組中的成員，知足條件的成員組成一個新的數組返回。他的參數是一個函數，全部數組成員一次執行該函數，返回結果爲true的成員組成一個新的數組返回。改方法不會改變原來的數組。

var arr = [1,5,3,2,4];
arr.filter(function(elem){
	return elem > 3
})
// [5, 4]

filter方法的參數函數也能夠接受三個參數：當前成員，當前位置和整個數 組。

[1, 2, 3, 4, 5].filter(function (elem, index, arr) { 
    return index % 2 === 0; 
}); 
// [1, 3, 5]

此外，filter方法也能夠接受第二個參數，用來綁定參數函數內部的this變量。

var obj = { MAX: 3 }; var myFilter = function (item) {
     if (item > this.MAX) return true; 
}; 
var arr = [2, 8, 3, 4, 1, 3, 2, 9]; 
arr.filter(myFilter, obj) 
// [8, 4, 9]