Rate this post

Foreach là một hàm có sẵn trong JavaScript, cho phép duyệt qua các phần tử của một mảng (hoặc các đối tượng có thể duyệt được khác như Set, Map) và thực hiện một hành động nhất định trên từng phần tử.

Các bài viết liên quan:

Hàm forEach có thể sử dụng để thay thế việc duyệt mảng bằng vòng lặp for truyền thống, cả về cả cú pháp và hiệu quả.

Tại sao nên sử dụng forEach ?

Sử dụng forEach trong JavaScript có nhiều lợi ích sau đây:

  1. Cú pháp rõ ràng: Hàm forEach có cú pháp rõ ràng, đơn giản và dễ hiểu hơn vòng lặp for truyền thống. Có những chỗ như vòng lặp trong vòng lặp, cần phải tăng biến đếm, cần phải kiểm tra điều kiện và các thao tác khác mà sẽ làm cho vòng lặp trở nên phức tạp hơn.
  2. Hiệu quả cao: forEach được thực thi nhanh hơn vòng lặp for truyền thống, vì nó không cần phải kiểm tra điều kiện và tăng biến đếm.
  3. Tái sử dụng hàm: Có thể sử dụng hàm forEach cho nhiều mảng khác nhau, thay vì viết vòng lặp riêng cho mỗi mảng.
  4. Không thay đổi giá trị ban đầu của mảng: forEach không thay đổi giá trị của mảng gốc, nó chỉ duyệt qua mảng và thực hiện hành động trên từng phần tử, nếu cần thay đổi thì có thể sử dụng map.
  5. Tương thích với các đối tượng khác: foreach không chỉ hỗ trợ duyệt qua mảng mà còn hỗ trợ đối tượng Set, Map.Điều này cho phép bạn sử dụng cùng một hàm duyệt để thực hiện hành động trên nhiều kiểu dữ liệu khác nhau.

Ví dụ:

const set = new Set([1, 2, 3]);

set.forEach(value => console.log(value));

const map = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);

map.forEach((value, key) => console.log(key, value));

Foreach là một công cụ rất hữu ích trong javascript và được sử dụng rộng rãi, sử dụng nó sẽ giúp bạn duyệt qua mảng và thực hiện hành động trên mỗi phần tử một cách dễ dàng, nhanh chóng và tiện lợi.

Sử dụng forEach trong JavaScript như thế nào ?

Sử dụng hàm forEach trong JavaScript rất đơn giản, bạn chỉ cần gọi hàm forEach trên mảng và truyền vào một hàm callback. Hàm callback sẽ được thực thi trên từng phần tử của mảng.

Cú pháp:

arr.forEach(callback(currentValue, index, array))

  • arr: là mảng cần duyệt
  • callback: hàm xử lý mỗi phần tử của mảng, nó nhận vào 3 tham số:
    • currentValue: giá trị của phần tử hiện tại
    • index: chỉ số của phần tử hiện tại
    • array: mảng gốc

Ví dụ:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(value, index, array) {

  console.log('Value:', value);

  console.log('Index:', index);

  console.log('Array:', array);

});

hoặc

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(value => console.log(value));

Trong ví dụ trên, hàm forEach sẽ duyệt qua từng phần tử của mảng numbers và in ra giá trị của mỗi phần tử.

Bạn cũng có thể dùng forEach để thay đổi giá trị của mảng, tuy nhiên nếu bạn muốn thay đổi giá trị mảng và lặp lại cùng một mảng thì nên sử dụng map.

Còn nếu bạn muốn duyệt qua mảng và tìm giá trị phù hợp thì bạn nên sử dụng find hoặc findIndex. Nếu muốn tìm kiếm và thực hiện hành động trên các giá trị phù hợp thì bạn nên sử dụng filter.

Khi nào nên sử dụng forEach ?

Bạn nên sử dụng forEach trong JavaScript khi cần duyệt qua từng phần tử của mảng và thực hiện một hành động nào đó trên từng phần tử.

Ví dụ như:

  • Bạn muốn in ra từng phần tử trong mảng
  • Bạn muốn tính tổng của các phần tử trong mảng
  • Bạn muốn tìm phần tử trong mảng
  • Bạn muốn thay đổi giá trị của từng phần tử
  • Bạn muốn thêm thuộc tính mới cho từng phần tử

Ví dụ về các trường hợp sử dụng forEach trong JavaScript

Ví dụ 1: Thêm thuộc tính mới cho từng phần tử trong mảng:

const students = [

    { name: "John", age: 20 },

    { name: "Mary", age: 22 },

    { name: "Mike", age: 24 }

];

students.forEach(function(student) {

  student.major = "IT";

});

console.log(students);

Ví dụ 2: Tính tổng của các phần tử trong mảng:

const numbers = [1, 2, 3, 4, 5];

let sum = 0;

numbers.forEach(function(value) {

  sum += value;

});

console.log(sum);

Ví dụ 3: Tìm phần tử trong mảng:

const numbers = [1, 2, 3, 4, 5];

const target = 3;

let found = false;

numbers.forEach(function(value) {

  if (value === target) {

    found = true;

  }

});

console.log(found);

Ví dụ 4: Thay đổi giá trị của từng phần tử trong mảng:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(value, index) {

  numbers[index] = value * 2;

});

console.log(numbers);

Trong các ví dụ trên, forEach được sử dụng để duyệt qua từng phần tử trong mảng và thực hiện một hành động nào đó trên từng phần tử, ví dụ như in ra, tính tổng, tìm phần tử, thay đổi giá trị hoặc thêm thuộc tính. Các bạn có thể sử dụng forEach cho các tác vụ tương tự trong ứng dụng của mình.

Ví dụ 5: Duyệt qua một đối tượng và in ra các thuộc tính của nó:

const person = {

  name: "John",

  age: 30,

  job: "Developer"

};

Object.keys(person).forEach(function(key) {

    console.log(key + ": " + person[key]);

});

Ví dụ 6: Sử dụng arrow function trong forEach

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(value => console.log(value));

Ví dụ 7: Sử dụng forEach trong Set

const fruits = new Set(["Apple", "Banana", "Mango"]);

fruits.forEach(fruit => console.log(fruit));

Ví dụ 8: Sử dụng forEach trong Map

const ages = new Map([["John", 30], ["Mike", 35], ["Mary", 25]]);

ages.forEach((value, key) => console.log(key + ": " + value));

Ví dụ 9: Sử dụng forEach trong async/await

const fetchData = async () => {

    const response = await fetch('https://jsonplaceholder.typicode.com/todos');

    const data = await response.json();

    data.forEach(async (item) => {

        console.log(item);

    });

}

fetchData();

Trong các ví dụ nâng cao hơn, chúng ta có thể sử dụng forEach trên đối tượng và arrow function, sử dụng forEach trên Set và Map, và sử dụng forEach trong async/await.

Kết luận

Tổng quan là hàm forEach trong JavaScript là một công cụ rất hữu ích và tiện lợi để duyệt qua các phần tử của một mảng và thực hiện một hành động trên từng phần tử. Nó có cú pháp đơn giản và dễ hiểu hơn vòng lặp for truyền thống, tái sử dụng được hàm, không thay đổi giá trị của mảng ban đầu và có thể sử dụng với các đối tượng khác nhau như set hoặc map. Vì thế, nó là một lựa chọn tuyệt vời khi duyệt qua một mảng trong JavaScript.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now