JavaScript 的 forEach() 方法指南

簡介

forEach() 方法是可用於循環遍歷數組內容並連續顯示每個元素的眾多方法之一。它具有與其他迭代數組的技術不同的獨特品質，這意味著您可以根據自己的工作選擇採用哪種方法。

語法和參數

forEach() 方法的語法非常簡單：

forEach(callback(currentElement, index, arr), thisValue);

作為參數，它接受 callback 函數並為數組中的每個條目運行它。這個callback 函數接受三個參數 - currentElement （必需），它的 index （index currentElement ) 和數組 (arr ) 元素所屬的。最後，thisValue （可選）參數將用作 this 的值 在 callback .

注意： 唯一需要的參數是 currentElement ，它表示數組元素的值。 index 和 currentElement 參數將是您使用最多的參數。

如何使用 JavaScript forEach() 方法

我們來看看forEach() 方法在行動。正如我們之前所說，您可以使用它來迭代數組並將回調函數應用於該數組的每個元素。在本節中，我們將解釋如何聲明一個適當的回調函數以及如何利用它的每個參數。

在 JavaScript 的早期版本中，在 ES6 之前 ，你應該聲明一個回調函數如下：

const ages = [20, 28, 19, 56];
const newAges = [];

ages.forEach(function (age) {
	newAges.push(age + 5);
});

console.log(newAges); 
// Output: [25, 33, 24, 61]

或者，您可以在 forEach() 之外的某處定義回調函數 方法並使用以下語法調用它：

const ages = [20, 28, 19, 56];
const newAges = [];

ages.forEach(increaseAgeBy5);

function increaseAgeBy5(age) {
	newAges.push(age + 5);
}

console.log(newAges); 
// Output: [25, 33, 24, 61]

這兩種方式都是非常易讀且簡潔的方式來使用 forEach() 方法，但我們可以進一步簡化語法。從 ES6 開始，我們可以將回調函數定義為 箭頭函數 ：

const ages = [20, 28, 19, 56];
const newAges = [];

ages.forEach((age) => {
	newAges.push(age + 5);
});

console.log(newAges); 
// Output: [25, 33, 24, 61]

或者，您可以將函數折疊為：

const ages = [20, 28, 19, 56];
const newAges = [];

ages.forEach((age) => newAges.push(age + 5));

console.log(newAges); 
// Output: [25, 33, 24, 61]

索引 參數

index 是一個可選參數，可用於評估元素在原始數組中的位置。例如，我們可以同時顯示元素的位置和值：

const courses = ['Biology', 'Mathematics', 'Chemistry', 'Physics'];

courses.forEach(function (course, index) {
	console.log(index + ': ' + course);
});

這導致：

0: Biology
1: Mathematics
2: Chemistry
3: Physics

數組 參數

array 參數引用原始數組本身。這是一個可選參數，您通常很少使用它，因為您已經可以訪問每個單獨的元素並且可以對它們運行操作。如果我們將它作為 console.log() 的參數傳遞 , 整個數組將為數組中的每個元素打印一次：

const courses = ['Biology', 'Mathematics', 'Chemistry', 'Physics'];

courses.forEach(function (course, index, array) {
	console.log(array);
});

這導致：

[ 'Biology', 'Mathematics', 'Chemistry', 'Physics' ]
[ 'Biology', 'Mathematics', 'Chemistry', 'Physics' ]
[ 'Biology', 'Mathematics', 'Chemistry', 'Physics' ]
[ 'Biology', 'Mathematics', 'Chemistry', 'Physics' ]

通用 JavaScript forEach() 示例

隨著介紹的結束 - 讓我們深入了解 forEach() 的幾個常見用例 方法。在本節中，我們將展示如何遍歷對像數組以及如何計算數組中所有元素的總和——不過，您可以定義任意回調函數。

如何按值循環遍歷對像數組

放下手 - forEach() 最常見的用例 方法是打印出數組的每個元素（或它們的某些字段）：

const students = [
	{ firstName: 'John', lastName: 'Doe' },
	{ firstName: 'Stephen', lastName: 'Matt' },
	{ firstName: 'Abigail', lastName: 'Susu' },
];

students.forEach((student) => {
	console.log(`${student.firstName} ${student.lastName}`);
});

這導致：

John Doe
Stephen Matt
Abigail Susu

如何對數組元素或其字段求和

讓我們繼續解釋如何將所有項目添加到數組中並顯示 sum ：

const students = [
	{ firstName: 'John', lastName: 'Doe', tuition: 5000},
	{ firstName: 'Stephen', lastName: 'Matt', tuition: 7500 },
	{ firstName: 'Abigail', lastName: 'Susu', tuition: 6000 },
];

sum = 0;

students.forEach((student) => {
	sum += student.tuition;
});

console.log(sum); 
// Output: 18500

forEach() 方法 vs for 循環

JavaScript 為我們提供了幾種迭代數組元素的方法——最著名的是 for 循環和 forEach() 方法。它們兩者的工作方式相似，歸根結底，在性能方面非常相似。它們之間只有幾個區別，因此，為了幫助您選擇使用哪一個，我們將在本節中介紹這些區別。

變量名的範圍

forEach() 方法有一個函數範圍——它將所有變量名保存在其回調函數的範圍內。如果您在 forEach() 之外分配變量 方法並在循環中使用它，如果存在衝突（相同的變量名稱） - 使用回調函數中的那個。例如，假設我們創建一個 student 變量並賦值 Joy 給它。如果我們遍歷學生，每個學生都表示為 student ，我們就會有變量名衝突：

const student = 'Joy';
const students = ['Mark', 'Jane', 'John', 'Sarah'];

students.forEach((student) => {
	console.log(student); 
    // Output: "Mark" "Jane" "John" "Sarah"
});

console.log(student);
// Output: "Joy"

多次使用同一個變量名不是一個好習慣，只會增加混亂 - 但值得注意的是 forEach() 有一個函數作用域。

處理缺失元素

一個 for 循環和 forEach() 方法以不同的方式處理丟失的元素。假設我們有一個缺少某些元素的數組：

const students = ['Mark', , 'Jane', 'John', , 'Sarah'];

查看上面的數組，您會注意到缺少一些元素（在 students 大批）。首先，讓我們遍歷 students for 的數組 循環看看它是如何處理缺失值的：

免費電子書：Git Essentials

查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！

const students = ['Mark', , 'Jane', 'John', , 'Sarah'];
const studentsList = [];

for (let i = 0; i < students.length; i++) {
	studentsList.push(students[i]);
}

console.log(studentsList); 
// Output: ["Mark",undefined,"Jane","John",undefined,"Sarah"]

在上面的代碼片段中，您會注意到我們得到了一個 undefined 第一個和第四個索引的值 - students[1] 和 students[4] . for 循環將丟失的元素視為 undefined 價值觀。

現在，讓我們看看 forEach() 是如何實現的 方法處理 students 中的缺失值 數組：

const students = ['Mark', , 'Jane', 'John', , 'Sarah'];
const studentsList = [];

students.forEach(function (student) {
	studentsList.push(student);
});

console.log(studentsList); 
// Output: ["Mark","Jane","John","Sarah"]

forEach() 跳過缺失值槽並繼續前進！

乾淨可讀的代碼

完全由您來決定哪種循環數組的方式可以提供更清晰、更易讀的代碼。 forEach() 方法當然有更簡潔的語法，因此如果代碼可讀性在優先級列表中較高，通常認為更合適。

在本節中，我們將為您提供示例代碼片段，並讓您決定哪種循環數組的方法更易於閱讀和理解。

假設我們有一組學生。每個學生都有自己的名字和他們參加的一系列課程：

const students = [
	{ name: 'John', courses: ['Maths', 'English', 'Physics'] },
	{ name: 'Sarah', courses: ['Chemistry', 'Maths', 'Computer Science'] },
];

假設我們要顯示每個學生的姓名和每個學生參加的每門課程。

我們可以通過使用兩個 for 來實現 循環。第一個循環遍歷所有學生並記錄學生的姓名。第二個遍歷當前學生參加的所有課程並一一記錄：

for (let i = 0; i < students.length; i++) {
	let student = students[i];
	console.log(student);

	for (let k = 0; k < student.courses.length; k++) {
		let subject = student.courses[k];
		console.log(subject);
	}
}

for 循環要求您使用臨時 i 訪問數組 和 k 變量，然後使用方括號符號訪問每個元素 .這可能看起來很混亂，並且會給您的代碼增加很多混亂，因為與 forEach() 相比，它不容易掌握 方法：

students.forEach((student) => {
	console.log(student);
	student.courses.forEach((subject) => {
		console.log(subject);
	});
});

forEach() 方法幫助我們擺脫臨時計數器變量，使代碼更容易閱讀和理解。此方法使用 callback 函數並將其應用於數組中的每個元素，這意味著我們不需要使用括號表示法來獲取每個元素。

跳出循環

到目前為止，我們基本上只強調了支持 forEach() 的示例 方法。但是 for 的一個明顯優勢 循環是它提前退出循環的能力 如有必要。

例如，假設您只想返回一個名為 Sarah 的學生 來自 students 大批。您需要遍歷數組中的每個學生，檢查其名稱是否為 Sarah ，如果找到學生則跳出循環。

你可能認為你可以同時使用 for 循環和 forEach() 迭代 students 的方法 大批。但是，事實上，如果你嘗試使用 break forEach() 內部 方法，它會拋出一個 SyntaxError .

因此，如果您需要跳出循環，您可能應該使用 for 循環：

const students = ['Mark', 'Jane', 'Sarah', 'John', 'Sarah'];

for (let i = 0; i < students.length; i++) {
	if (students[i].name === 'Sarah') {
		console.log(`>> ${students[i].name} is the most brilliant lady in the class`);
		break;
	}
    console.log(`> Name of the current student is ${students[i]}`);
}

這導致：

> Name of the current student is Mark
> Name of the current student is Jane
>> Sarah is the most brilliant lady in the class

注意： 這同樣適用於 return 和 continue .在 forEach() 中沒有辦法擺脫循環 方法 - 即使使用 return 或 continue .

異步/等待

forEach() 方法與 async 不兼容 功能。即使你聲明了一個 async forEach() 內的函數 塊，它不會按預期運行。沒有辦法製作async/await 使用 forEach() 方法。因此，如果您需要使您的代碼 async 兼容，使用 for 而是循環！

使用 forEach() 使用其他數據結構

主要是 forEach() 方法用於循環遍曆元素數組。或者，您可以遍歷其他數據結構 - 集合和映射。在本節中，我們將看到幾個簡單的示例來說明如何循環遍歷集合和映射。

如何循環遍歷一個Set 使用 forEach()

您可以使用 forEach() 遍歷 JavaScript 集合的元素 方法。例如：

const nums = new Set([11, 25, 35, 47, 25, 47]);

nums.forEach(myFunction);

function myFunction(num) {
	console.log(num);
}

這導致：

11
25
35
47

注意： 一個 Set 是唯一的項目的集合，即沒有元素可以重複。

如何在地圖中循環 使用 forEach()

您可以使用 forEach() 遍歷地圖的元素 方法，訪問 key 和 value 每個條目，而不是條目本身：

// Declaring map
const map = new Map();

// Inserting key/value pairs
map.set('greeting', 'Hello');
map.set('firstName', 'John');
map.set('lastName', 'Doe');

// Loop through with forEach
map.forEach((value, key) => {
	console.log(`${key} - ${value}`);
});

這導致：

greeting - Hello
firstName - John
lastName - John

結論

在本指南中，我們了解了 JavaScript 的 forEach() 方法有效，以及我們如何使用它來遍歷數組的元素。我們已經查看了隨附的參數，例如 currentElement , index , 和 array 允許您從數組中獲取某些元素。

最後，我們看了幾個例子，涵蓋了forEach()之間的區別 方法和 for 循環，並說明如何使用 forEach() 循環其他數據結構（集合和映射） 方法。