JavaScript遍歷陣列詳解

本章節詳細介紹一下如何遍歷一個array陣列。

說道遍歷陣列，絕大多數人第一個想到就是適用for迴圈語句。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var arr = ["螞蟻部落", "青島市南區", 4, "www.softwhy.com"];
for (var index = 0; index < arr.length; index++) {
  console.log(arr[index]);
}

上面的程式碼可以實現陣列的遍歷功能。

不要用for in語句來遍歷陣列，程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var arr = ["螞蟻部落", "青島市南區", 4, "www.softwhy.com"];
for (var elem in arr) {
  console.log(elem);
}

此迴圈是用來遍歷物件屬性的，我們可以認為陣列的索引就是陣列物件的屬性。

for in迴圈可以參閱javascript for in一章節。

除了使用for迴圈之外，其實還有其他原生javascript方法可以實現遍歷功能。

一.forEach()方法:

此方法可以遍歷陣列中的每一個元素，程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var arr = ["螞蟻部落", "青島市南區", 4, "www.softwhy.com"];
arr.forEach(function (item, index) {
  console.log(index,item);
})

程式碼可以實現遍歷陣列每一個元素的功能。

此方法不能使用break命令或return命令中斷迴圈。

forEach()更多內容可以參閱forEach()方法一章節。

二.map()方法實現遍歷:

此方法可以便利陣列中的每一個元素，可以在原有陣列元素基礎上返回一個新陣列。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var arr = [1, 2, 3, 4];
var newArr=arr.map(function (item, index) {
  return newArr* 2;
})
console.log(arr);

上面的程式碼可以生成一個新的陣列，陣列的元素值是原來陣列元素值的兩倍。

map()更多內容可以參閱Array map()一章節。

三.filter()方法:

此方法可以過濾陣列中的元素，滿足條件的元素可以組成一個新的陣列。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var arr = [1, 2, 3, 4];
var newArr=arr.filter(function (item, index) {
  if (item > 1) {
    return item
  }
})
console.log(newArr);

大於1的陣列元素組成一個新的陣列。

更多關於filter()內容可以參閱Array filter()方法一章節。

四.其他方法:

還有幾個方法也能夠實現遍歷，這裡就不介紹了，參閱本站相關文章即可。

（1）.reduce()方法參閱Array reduce()一章節。

（2）.every()方法參閱Array every()一章節。

（3）.some()方法參閱Array some()一章節。