for循環(huán)

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

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

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

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

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

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

forEach方法

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

forEach方法的語(yǔ)法如下：

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

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

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

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)語(yǔ)法，它可以用于遍歷數(shù)組、字符串、Map、Set等可迭代對(duì)象。與傳統(tǒng)的for循環(huán)不同，for...of循環(huán)語(yǔ)句本身不包含初始化變量、循環(huán)條件和迭代器，而是直接遍歷迭代對(duì)象中的每個(gè)元素。

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

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

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

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

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

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

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

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

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

map方法

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

map() 方法語(yǔ)法如下：

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

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

例如，我們可以使用 map() 方法遍歷數(shù)組并將每個(gè)元素乘以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ù)只有一個(gè)參數(shù)num，表示當(dāng)前處理的元素值，它會(huì)被依次傳入數(shù)組中的每個(gè)元素。循環(huán)結(jié)束后，doubledNumbers數(shù)組就包含了原數(shù)組中的每個(gè)元素乘以2的結(jié)果。

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

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

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

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

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

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

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

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

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

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

filter方法

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

filter() 方法的語(yǔ)法如下：

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

第一個(gè)參數(shù)是回調(diào)函數(shù)，它可以接受三個(gè)參數(shù)：當(dāng)前處理的元素值currentValue、當(dāng)前處理的元素索引index、當(dāng)前正在操作的數(shù)組對(duì)象array。第二個(gè)參數(shù)thisValue可選，表示在執(zhí)行回調(diào)函數(shù)時(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ù)只有一個(gè)參數(shù)num，表示當(dāng)前處理的元素值，它會(huì)被依次傳入數(shù)組中的每個(gè)元素?；卣{(diào)函數(shù)中的判斷條件return num >= 5表示只有當(dāng)元素大于等于5時(shí)，返回true，才會(huì)保留在新數(shù)組中。

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

reduce方法

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

reduce() 方法的語(yǔ)法如下：

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

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

例如，我們可以使用 reduce() 方法對(duì)數(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ù)接受兩個(gè)參數(shù)total和num，total表示累積值，初始值為0，而num表示當(dāng)前處理的元素值。在每一次迭代中，回調(diào)函數(shù)會(huì)將total與當(dāng)前元素值num相加，然后返回新的累積值。最終，reduce() 方法返回的是最后一次迭代后的累積值。

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

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

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

最新評(píng)論