HomeLập trìnhJavaScriptHướng dẫn JavaScript...

Hướng dẫn JavaScript Array.forEach() – Cách lặp qua các phần tử trong một mảng


Trong JavaScript, bạn thường cần lặp qua một tập hợp mảng và thực thi một phương thức gọi lại cho mỗi lần lặp. Và có một phương pháp hữu ích mà các nhà phát triển JS thường sử dụng để thực hiện việc này: forEach() phương pháp.

Các forEach() phương thức gọi một hàm gọi lại được chỉ định một lần cho mọi phần tử mà nó lặp lại bên trong một mảng. Cũng giống như các trình lặp mảng khác, chẳng hạn như mapfilterhàm gọi lại có thể nhận ba tham số:

  • Phần tử hiện tại: Đây là phần tử trong mảng hiện đang được lặp lại.
  • Chỉ mục của nó: Đây là vị trí chỉ mục của mục đó trong mảng
  • Mảng mục tiêu: Đây là mảng đang được lặp lại

Các forEach phương thức không trả về một mảng mới như các trình vòng lặp khác, chẳng hạn như filter, mapsort. Thay vào đó, phương thức trả về undefined chính nó. Vì vậy, nó không thể xâu chuỗi như các phương pháp khác.

một điều khác về forEach là bạn không thể kết thúc vòng lặp (với câu lệnh break) hoặc làm cho nó bỏ qua một lần lặp (với câu lệnh tiếp tục). Nói cách khác, bạn không thể kiểm soát nó.

Cách duy nhất để chấm dứt một forEach vòng lặp là bằng cách ném một ngoại lệ bên trong chức năng gọi lại. Đừng lo lắng, chúng ta sẽ sớm thấy tất cả những điều này trong thực tế.

Làm thế nào để sử dụng forEach() Phương thức trong JavaScript

Hãy tưởng tượng rằng một nhóm sinh viên đang xếp hàng để điểm danh theo thông lệ. Điều phối viên lớp di chuyển qua hàng và gọi tên của từng học sinh trong khi đánh dấu xem họ có mặt hay vắng mặt.

Điều quan trọng cần lưu ý là điều phối viên không thay đổi thứ tự của học sinh trong hàng. Anh ấy cũng giữ họ trong cùng một hàng sau khi điểm danh xong. Tất cả những gì anh ta làm là thực hiện một hành động (kiểm tra của anh ta) đối với từng người trong số họ.

Đọc thêm  Các hàm toán học JavaScript được giải thích

Trong các ví dụ sau, hãy ghi nhớ kịch bản này, chúng ta sẽ xem cách bạn có thể sử dụng forEach phương pháp trong JavaScript để giải quyết các vấn đề trong thế giới thực.

forEach() Các ví dụ về phương thức trong JavaScript

Cách xóa số lẻ đầu tiên trong một mảng bằng forEach()

Trong ví dụ này, chúng ta có một mảng có một số lẻ ở vị trí đầu tiên và một số số chẵn theo sau nó. Nhưng chúng tôi chỉ muốn các số trong mảng này là số chẵn. Vì vậy, chúng tôi sẽ xóa số lẻ khỏi mảng bằng cách sử dụng forEach() vòng:

let numbers = [3, 6, 8, 10, 12]
let odd = 3;

numbers.forEach(function(number) {
    if (number === odd) {
        numbers.shift() // 3 will be deleted from array
    }
})

console.log(numbers);

[6, 8, 10, 12] // All even!

Cách truy cập thuộc tính chỉ mục với forEach()

Trong ví dụ này, chúng ta sẽ thực hiện một rollCall hàm cho mỗi sinh viên được lặp bên trong mảng. Các rollcall chỉ cần ghi một chuỗi liên quan đến từng học sinh vào bảng điều khiển.

names = ["anna", "beth", "chris", "daniel", "ethan"]

function rollCall(name, index) {
    console.log(`Is the number ${index + 1} student - ${name} present? Yes!`)
    ;}

names.forEach((name, index) => rollCall(name, index));


/*
"Is the number 1 student - anna present? Yes!"
"Is the number 2 student - beth present? Yes!"
"Is the number 3 student - chris present? Yes!"
"Is the number 4 student - daniel present? Yes!"
"Is the number 5 student - ethan present? Yes!"
*/

Trong ví dụ này, thông tin duy nhất chúng tôi có về mỗi học sinh là tên của họ. Tuy nhiên, chúng tôi cũng muốn biết những đại từ mà mỗi học sinh sử dụng. Nói cách khác, chúng tôi muốn một thuộc tính đại từ được xác định cho mỗi học sinh.

Vì vậy, chúng tôi xác định mỗi sinh viên là một đối tượng có hai thuộc tính, tên và đại từ:

names = [
    {name:"anna",pronoun: "she"},
    {name: "beth",pronoun: "they"},
    {name: "chris",pronoun: "he"},
    {name: "daniel",pronoun: "he"},
    {name: "ethan",pronoun: "he"}
]

function rollCall(student, index) {
    console.log(`The number ${index + 1} student is ${student.name}. Is ${student.pronoun} present? Yes!`);
}

names.forEach((name, index) => rollCall(name, index));

/*
"The number 1 student is anna. Is she present? Yes!"
"The number 2 student is beth. Is they present? Yes!"
"The number 3 student is chris. Is he present? Yes!"
"The number 4 student is daniel. Is he present? Yes!"
"The number 5 student is ethan. Is he present? Yes!"
*/

Chúng tôi đang ghi thông báo điểm danh của từng học sinh vào bảng điều khiển, sau đó chúng tôi thực hiện kiểm tra xem học sinh đó sử dụng đại từ nào và cuối cùng chúng tôi tự động chuyển đại từ chính xác như một phần của chuỗi.

Đọc thêm  Dưới đây là những cách phổ biến nhất để thực hiện một yêu cầu HTTP trong JavaScript

Cách sao chép một mảng vào một mảng mới với forEach() trong JavaScript

Sau ba năm học tập, giờ là lúc mỗi học sinh ra trường. Trong JavaScript của chúng tôi, chúng tôi xác định hai mảng: stillStudentnowGraduated. Như bạn có thể đoán, stillStudent giữ học sinh ngay trước khi họ tốt nghiệp.

Sau đó forEach vòng lặp nhận vào từng học sinh và gọi graduateStudent chức năng trên nó.

Trong chức năng này, chúng tôi xây dựng một đối tượng với hai thuộc tính: tên của sinh viên cũng như vị trí mà họ đã tốt nghiệp. Sau đó, chúng tôi chuyển đối tượng mới cho nowGraduated mảng. Tại thời điểm đó, sinh viên đã trở thành một sinh viên tốt nghiệp.

Ví dụ này cũng minh họa cách bạn có thể sử dụng forEach() phương pháp để sao chép một mảng vào một mảng mới.

let stillStudent = ["anna", "beth", "chris", "daniel", "ethan"]
let nowGraduated = []

function graduateStudent(student, index) {
    let object = { name: student, position: index + 1}
    nowGraduated[index] = object
}

stillStudent.forEach((name, index) => graduateStudent(name, index));

console.log(nowGraduated);

/*
[
    { name: "anna", position: 1}, 
    { name: "beth", position: 2}, 
    { name: "chris", position: 3}, 
    { name: "daniel", position: 4}, 
    { name: "ethan", position: 5}]
]
*/

Cách kiểm tra mục tiếp theo trong một mảng bằng array Tham số

Tại một số thời điểm, giáo viên sẽ cần kiểm tra xem danh sách có mục cụ thể nào tiếp theo trong danh sách hay không. Trong trường hợp như vậy, giáo viên sẽ cần phải có một cái nhìn bao quát về toàn bộ danh sách. Bằng cách đó, anh ta có thể biết nếu có một sinh viên tiếp theo để gọi.

Trong JavaScript của chúng tôi, chúng tôi có thể sao chép điều này vì chức năng gọi lại cũng có thể truy cập array (thứ ba) tham số. Tham số này đại diện cho mảng mục tiêu, đó là name.

Chúng tôi kiểm tra xem có mục tiếp theo (sinh viên) trên mảng không. Nếu có, chúng tôi chuyển chuỗi positive đến nextItem Biến đổi. Nếu không có, chúng tôi chuyển chuỗi negative đến biến. Sau đó, với mỗi lần lặp lại, chúng tôi kiểm tra xem điều đó sinh viên thực sự là cuối cùng.

names = ["anna", "beth", "chris", "daniel", "ethan"]

function rollCall(name, index, array) {
    let nextItem = index + 1 < array.length ? "postive" : "negative"
    console.log(`Is the number ${index + 1} student - ${name} present? Yes!. Is there a next student? ${nextItem}!`);
}

names.forEach((name, index, array) => rollCall(name, index, array))

/*
"Is the number 1 student - anna present? Yes!. Is there a next student? postive!"
"Is the number 2 student - beth present? Yes!. Is there a next student? postive!"
"Is the number 3 student - chris present? Yes!. Is there a next student? postive!"
"Is the number 4 student - daniel present? Yes!. Is there a next student? postive!"
"Is the number 5 student - ethan present? Yes!. Is there a next student? negative!"
*/

Bạn không thể thoát khỏi một forEach Vòng lặp, vì vậy hãy sử dụng every() Thay thế

Hãy nhớ rằng khi tôi đề cập rằng, về bản chất, bạn không thể thoát ra khỏi (hay còn gọi là thoát) một forEach vòng? Sau khi bắt đầu, nó sẽ chạy cho đến khi chạm đến mục cuối cùng trong mảng. Vì vậy, nếu bạn chèn một break câu lệnh, nó sẽ trả về một SyntaxError:

let numbers = [2, 4, 5, 8, 12]
let odd = 5;

numbers.forEach(function(number) {
    if (number === odd) {
        break; // oops, this isn't gonna work!
    }
})

không hợp lệ

Thông thường, bạn sẽ muốn thoát ra khỏi vòng lặp nếu cuối cùng bạn đạt được những gì bạn dự định trước khi đến mục cuối cùng. Trong ví dụ của chúng tôi ở trên, chúng tôi đã tìm thấy số lẻ (5), vì vậy sau đó không cần phải lặp lại các mục còn lại (8 và 12).

Đọc thêm  Thuật toán JavaScript và Cấu trúc dữ liệu cần giải thích rõ hơn - Cộng tác viên

Nếu bạn muốn thoát ra khỏi vòng lặp với một số điều kiện, thì bạn sẽ phải sử dụng bất kỳ phương pháp nào sau đây:

Đây là cách bạn có thể thoát ra khỏi vòng lặp với Array.every():

let numbers = [2, 4, 5, 8, 12]
let odd = 5;

numbers.every(number => {
  if (number == odd) {
    return false;
  }

  console.log(number);
  
  return true;
});

// 2 4

kết thúc

Trong hướng dẫn này, tôi đã giới thiệu forEach minh họa cách nó hoạt động bằng một phép loại suy đơn giản và tôi cũng đã cung cấp cho bạn một số ví dụ thực tế về việc sử dụng nó trong mã JavaScript.

Hy vọng rằng bạn đã có một cái gì đó hữu ích từ mảnh này.

Nếu bạn muốn tìm hiểu thêm về Phát triển Web, vui lòng truy cập trang web của tôi Blog.

Cảm ơn bạn đã đọc và hẹn gặp lại.

P/S: Nếu bạn đang học JavaScript, tôi đã tạo một Sách điện tử dạy 50 chủ đề về JavaScript bằng các ghi chú kỹ thuật số được vẽ bằng tay. Kiểm tra nó ra ở đây.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status