for循環(huán)

for循環(huán)是最基本也是最常用的數(shù)組遍歷方法之一。它使用一個計數(shù)器變量來迭代數(shù)組元素，通常形式如下：

Copy Code
for (initialExpression; condition; incrementExpression) {
  statement;
}

其中，initialExpression是在循環(huán)開始前執(zhí)行的表達(dá)式，通常用于初始化計數(shù)器變量；condition是在每次循環(huán)迭代前進行的測試，只有當(dāng)條件為真時才會繼續(xù)循環(huán)；incrementExpression是在每次循環(huán)迭代后執(zhí)行的表達(dá)式，通常用于更新計數(shù)器變量。

對于數(shù)組遍歷而言，我們可以利用for循環(huán)的計數(shù)器變量來訪問數(shù)組中的每個元素，例如：

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

這里的i就是計數(shù)器變量，初始值為0，每次循環(huán)后加1，直到i等于數(shù)組長度為止。在循環(huán)體內(nèi)，我們可以通過數(shù)組索引array[i]來訪問每個元素。

forEach方法

forEach是JavaScript中數(shù)組的一個函數(shù)方法，可以對數(shù)組中的每個元素執(zhí)行一個指定的函數(shù)。forEach循環(huán)會自動迭代數(shù)組，對每個元素執(zhí)行回調(diào)函數(shù)，并跳過數(shù)組中未定義的元素。

forEach方法的語法如下：

javascriptCopy Code
array.forEach(function(currentValue, index, array) {
  // 執(zhí)行內(nèi)容
}, thisValue);

其中，第一個參數(shù)是回調(diào)函數(shù)，它可以接受三個參數(shù)：當(dāng)前處理的元素值currentValue、當(dāng)前處理的元素索引index、當(dāng)前正在操作的數(shù)組對象array。第二個參數(shù)thisValue可選，表示在執(zhí)行回調(diào)函數(shù)時，將其作為函數(shù)體內(nèi)this關(guān)鍵字的值。

例如，我們可以使用forEach方法遍歷數(shù)組并輸出每個元素：

javascriptCopy Code
var array = [1, 2, 3, 4, 5];
array.forEach(function(element) {
  console.log(element);
});

for...of循環(huán)

for...of循環(huán)是ES6新增的一種循環(huán)語法，它可以用于遍歷數(shù)組、字符串、Map、Set等可迭代對象。與傳統(tǒng)的for循環(huán)不同，for...of循環(huán)語句本身不包含初始化變量、循環(huán)條件和迭代器，而是直接遍歷迭代對象中的每個元素。

for...of循環(huán)的語法如下：

javascriptCopy Code
for (variable of iterable) {
  // 循環(huán)體
}

其中，variable表示在每次迭代中，將要被賦值為迭代對象中下一個元素的變量，iterable參數(shù)是一個可迭代對象，例如數(shù)組或字符串。在循環(huán)體內(nèi)，我們可以使用variable變量來訪問當(dāng)前遍歷到的元素。

例如，我們可以使用for...of循環(huán)遍歷數(shù)組并輸出每個元素:

javascriptCopy Code
var array = [1, 2, 3, 4, 5];
for (var element of array) {
  console.log(element);
}

這里的element變量會被依次賦值為數(shù)組中的每個元素，然后在循環(huán)體內(nèi)輸出到控制臺上。

需要注意的是，for...of循環(huán)只能用于遍歷可迭代對象，不能用于普通對象。如果需要遍歷對象的屬性，可以使用for...in循環(huán)。

這里的回調(diào)函數(shù)只有一個參數(shù)element，表示當(dāng)前處理的元素值，它會被依次傳入數(shù)組中的每個元素。循環(huán)結(jié)束后，數(shù)組中的每個元素都會被遍歷一遍，輸出到控制臺上。

需要注意的是，forEach方法會自動跳過數(shù)組中未定義的元素，因此在使用時不必?fù)?dān)心數(shù)組中的空洞問題。

map方法

map() 是 JavaScript 數(shù)組的一個內(nèi)置函數(shù)方法，用于對數(shù)組中的每個元素執(zhí)行一個指定的函數(shù)，并返回一個新的數(shù)組。它不會修改原始數(shù)組，而是返回一個新的數(shù)組，新數(shù)組的元素是回調(diào)函數(shù)的返回值。

map() 方法語法如下：

javascriptCopy Code
array.map(function(currentValue, index, array) {
  // 執(zhí)行內(nèi)容
}, thisValue);

第一個參數(shù)是回調(diào)函數(shù)，它可以接受三個參數(shù)：當(dāng)前處理的元素值currentValue、當(dāng)前處理的元素索引index、當(dāng)前正在操作的數(shù)組對象array。第二個參數(shù)thisValue可選，表示在執(zhí)行回調(diào)函數(shù)時，將其作為函數(shù)體內(nèi)this關(guān)鍵字的值。

例如，我們可以使用 map() 方法遍歷數(shù)組并將每個元素乘以2:

javascriptCopy Code
var numbers = [1, 2, 3, 4, 5];
var doubledNumbers = numbers.map(function(num) {
  return num * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

這里的回調(diào)函數(shù)只有一個參數(shù)num，表示當(dāng)前處理的元素值，它會被依次傳入數(shù)組中的每個元素。循環(huán)結(jié)束后，doubledNumbers數(shù)組就包含了原數(shù)組中的每個元素乘以2的結(jié)果。

需要注意的是，map() 方法會返回一個新數(shù)組，而不是修改原有數(shù)組。它也不會修改原有數(shù)組中的元素。

for...in循環(huán)

for...in循環(huán)是JavaScript中用于遍歷對象屬性的一種循環(huán)語句。與傳統(tǒng)的for循環(huán)語句類似，for...in循環(huán)也需要指定一個迭代變量和一個可枚舉對象。在每次迭代中，迭代變量會被賦值為可枚舉對象的下一個屬性名，然后我們就可以使用該屬性名來訪問對應(yīng)的屬性值。

for...in循環(huán)的語法如下：

javascriptCopy Code
for (variable in object) {
  // 循環(huán)體
}

其中，variable表示在每次迭代中，將要被賦值為對象中下一個可枚舉屬性的名稱，object參數(shù)是一個普通對象。在循環(huán)體內(nèi)，我們可以使用variable變量來訪問當(dāng)前遍歷到的屬性值。

例如，我們可以使用for...in循環(huán)遍歷對象并輸出每個屬性的名稱和值：

javascriptCopy Code
var obj = {
  name: 'Tom',
  age: 18,
  gender: 'Male'
};
for (var prop in obj) {
  console.log(prop + ': ' + obj[prop]);
}

這里的prop變量會被依次賦值為對象obj中的每個屬性名，然后在循環(huán)體內(nèi)使用obj[prop]來訪問對應(yīng)的屬性值。循環(huán)結(jié)束后，所有屬性名和屬性值都會輸出到控制臺上。

需要注意的是，for...in循環(huán)不僅會遍歷對象自身的屬性，還會遍歷對象原型鏈上的屬性。因此，在使用for...in循環(huán)時，需要使用hasOwnProperty()方法來判斷對象是否擁有該屬性，以避免不必要的屬性訪問。

filter方法

filter() 是 JavaScript 數(shù)組的一個內(nèi)置函數(shù)方法，用于篩選數(shù)組中滿足指定條件的元素，并返回一個新的數(shù)組。它不會修改原始數(shù)組，而是返回一個新的數(shù)組，新數(shù)組中包含滿足篩選條件的元素。

filter() 方法的語法如下：

javascriptCopy Code
array.filter(function(currentValue, index, array) {
  // 指定條件判斷
}, thisValue);

第一個參數(shù)是回調(diào)函數(shù)，它可以接受三個參數(shù)：當(dāng)前處理的元素值currentValue、當(dāng)前處理的元素索引index、當(dāng)前正在操作的數(shù)組對象array。第二個參數(shù)thisValue可選，表示在執(zhí)行回調(diào)函數(shù)時，將其作為函數(shù)體內(nèi)this關(guān)鍵字的值。

例如，我們可以使用 filter() 方法篩選出數(shù)組中大于等于5的元素:

javascriptCopy Code
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var filteredNumbers = numbers.filter(function(num) {
  return num >= 5;
});
console.log(filteredNumbers); // [5, 6, 7, 8, 9, 10]

這里的回調(diào)函數(shù)只有一個參數(shù)num，表示當(dāng)前處理的元素值，它會被依次傳入數(shù)組中的每個元素?；卣{(diào)函數(shù)中的判斷條件return num >= 5表示只有當(dāng)元素大于等于5時，返回true，才會保留在新數(shù)組中。

需要注意的是，filter() 方法會返回一個新數(shù)組，而不是修改原有數(shù)組。它也不會修改原有數(shù)組中的元素。如果沒有滿足條件的元素，返回的新數(shù)組將為空數(shù)組。

reduce方法

reduce() 是 JavaScript 數(shù)組的一個內(nèi)置函數(shù)方法，用于對數(shù)組中的元素進行累積操作，將數(shù)組縮減為一個值。它通過提供的回調(diào)函數(shù)來實現(xiàn)累積操作，并返回最終結(jié)果。

reduce() 方法的語法如下：

javascriptCopy Code
array.reduce(function(accumulator, currentValue, index, array) {
  // 累積操作
}, initialValue);

第一個參數(shù)是回調(diào)函數(shù)，它可以接受四個參數(shù)：累積器(accumulator)、當(dāng)前處理的元素值(currentValue)、當(dāng)前處理元素的索引(index)和當(dāng)前正在操作的數(shù)組對象(array)。第二個參數(shù)initialValue可選，表示初始的累積值。

例如，我們可以使用 reduce() 方法對數(shù)組中的元素求和：

javascriptCopy Code
var numbers = [1, 2, 3, 4, 5];
var sum = numbers.reduce(function(total, num) {
  return total + num;
}, 0);
console.log(sum); // 15

這里的回調(diào)函數(shù)接受兩個參數(shù)total和num，total表示累積值，初始值為0，而num表示當(dāng)前處理的元素值。在每一次迭代中，回調(diào)函數(shù)會將total與當(dāng)前元素值num相加，然后返回新的累積值。最終，reduce() 方法返回的是最后一次迭代后的累積值。

需要注意的是，如果沒有提供初始值(initialValue)，那么數(shù)組的第一個元素將作為初始的累積值，并從數(shù)組的第二個元素開始進行迭代。如果數(shù)組為空且沒有提供初始值，那么將拋出 TypeError 異常。

另外，reduce() 方法還有一些高級用法，例如可以用它來實現(xiàn)數(shù)組的最大值、最小值、求平均值等操作。通過在回調(diào)函數(shù)中編寫相應(yīng)的邏輯，可以靈活地對數(shù)組進行累積運算。

以上就是JavaScript中數(shù)組遍歷的7種方法小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript數(shù)組遍歷的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論