Hướng dẫn javascript anonymous function in loop - hàm ẩn danh javascript trong vòng lặp

Cập nhật lần cuối vào ngày 3 tháng 5 năm 2022

JavaScript cho mỗi vòng lặp là một cách nhanh chóng và dễ dàng để lặp lại trên một mảng. Được sử dụng như một giải pháp thay thế cho vòng lặp For, nó có thể làm cho mã khai báo hơn và dễ đọc hơn.

Đối với nhiều nhà phát triển, JavaScript hoạt động như giới thiệu về mô hình lập trình chức năng. Và nếu bạn chưa bao giờ gặp phải các chức năng gọi lại trước đây, JavaScript cho mỗi chức năng có thể trông hơi buồn cười.

Trong bài viết nhanh này, chúng ta sẽ xem cách lặp lại một mảng dữ liệu bằng cách sử dụng chức năng foreach của JavaScript. Chúng tôi sẽ xem xét các cách khác nhau để gọi nó và thảo luận khi nào nên sử dụng so với truyền thống cho vòng lặp.

Sử dụng JavaScript cho mỗi hàm

Trong JavaScript, đối tượng mảng chứa phương thức

var i, colors = ['green', 'blue', 'red'];

for (i = 0; i < colors.length; i++) {
    var color = colors[i];
    setTimeout(function() {
        alert(color);
    }, i * 1000);
}

// red
// red
// red

var i, colors = ['green', 'blue', 'red'];

for (i = 0; i < colors.length; i++) {
    var color = colors[i];
    setTimeout(function() {
        alert(color);
    }, i * 1000);
}

// red
// red
// red

let fruits = ['apples', 'oranges', 'bananas'];

fruits.forEach(function (item, index) {
  console.log(item, index)
})

Điều này nên in ra như sau.

apples 0
oranges 1
bananas 2

Hãy giải thích cách thức hoạt động của nó.

1. Chúng tôi chuyển một hàm ẩn danh cho phương pháp

   var i, colors = ['green', 'blue', 'red'];
   
   for (i = 0; i < colors.length; i++) {
       var color = colors[i];
       setTimeout(function() {
           alert(color);
       }, i * 1000);
   }
   
   // red
   // red
   // red
   

   5.
2. Trong hàm ẩn danh đó, chúng tôi bao gồm các tham số để có quyền truy cập vào

   var i, colors = ['green', 'blue', 'red'];
   
   for (i = 0; i < colors.length; i++) {
       var color = colors[i];
       setTimeout(function() {
           alert(color);
       }, i * 1000);
   }
   
   // red
   // red
   // red
   

   8 hiện tại và số

   var i, colors = ['green', 'blue', 'red'];
   
   for (i = 0; i < colors.length; i++) {
       var color = colors[i];
       setTimeout(function() {
           alert(color);
       }, i * 1000);
   }
   
   // red
   // red
   // red
   

   9 trong mảng mà mục này đại diện.

Hàm chúng tôi cung cấp cho hàm

var i, colors = ['green', 'blue', 'red'];

for (i = 0; i < colors.length; i++) {
    var color = colors[i];
    setTimeout(function() {
        alert(color);
    }, i * 1000);
}

// red
// red
// red

• (Yêu cầu) Phần tử hiện tại - biểu thị phần tử hiện tại
• (Tùy chọn) Chỉ mục - Trả về chỉ mục hiện tại
• (Tùy chọn) Mảng - Trả về toàn bộ mảng cho mỗi vòng lặp

Cách thay thế để gọi nó

Tùy chọn 1: Chức năng ẩn danh

Cách đầu tiên của cách thay thế để gọi chức năng này là sử dụng hàm ẩn danh. Đây là những gì chúng ta vừa thấy.

arr.forEach(function (item) { // Anonymous function
  // Write what you'd like to happen here
})

Tùy chọn 2: Sử dụng các hàm mũi tên

Tùy chọn thứ hai là sử dụng chức năng mũi tên.

arr.forEach((item, index) => console.log(item, index))

Thử thứ này đi. Nó cho phép bạn viết vòng lặp trên một dòng.

Tùy chọn 3: Hàm gọi lại

Tùy chọn cuối cùng là sử dụng chức năng gọi lại, thực sự chỉ là một hàm được xác định riêng biệt mà chúng ta chuyển làm đối số cho hàm

var i, colors = ['green', 'blue', 'red'];

for (i = 0; i < colors.length; i++) {
    var color = colors[i];
    setTimeout(function() {
        alert(color);
    }, i * 1000);
}

// red
// red
// red

let fruits = ['apples', 'oranges', 'bananas'];

function printPretty (item, index) {
  console.log(`${index} - ${item}`)
}

fruits.forEach(printPretty);

Điều này sẽ in ra như sau:

0 - apples
1 - oranges
2 - bananas

Khi nào nên sử dụng FOR LOOP so với A FOR LOOP

Hầu hết chúng ta trước tiên tìm hiểu về các vòng lặp theo cách truyền thống - bạn biết đấy, các vòng lặp với các quầy được tăng lên? Như thế này:

let fruits = ['apples', 'oranges', 'bananas'];

for (let index = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Sự thật là, bạn có thể sử dụng các vòng lặp truyền thống hoặc

var i, colors = ['green', 'blue', 'red'];

for (i = 0; i < colors.length; i++) {
    var color = colors[i];
    setTimeout(function() {
        alert(color);
    }, i * 1000);
}

// red
// red
// red

Tuy nhiên, sử dụng các vòng lặp

var i, colors = ['green', 'blue', 'red'];

for (i = 0; i < colors.length; i++) {
    var color = colors[i];
    setTimeout(function() {
        alert(color);
    }, i * 1000);
}

// red
// red
// red

Thảo luận

Thích cái này? Hát lớn và tự hào.

Giữ liên lạc!

Tận hưởng cho đến nay? Tham gia hơn 15000 phần mềm cần thiết nhận được bài đăng của tôi được gửi thẳng vào hộp thư đến của bạn mỗi tuần. Tôi sẽ không spam ya. 🖖

Thông tin về các Tác giả

Khalil Stemmler, phần mềm Essentialist ⚡
Software Essentialist ⚡

Khalil là một nhà phát triển phần mềm, nhà văn và nhạc sĩ. Ông thường xuyên xuất bản các bài viết về thiết kế dựa trên tên miền, thiết kế phần mềm và TypeScript & Node.js thực tiễn tốt nhất cho các ứng dụng quy mô lớn.

Xem thêm trong phát triển web

Bạn cũng có thể thích ...

Một vài bài viết liên quan

Hơn 85 tỷ đô la chi cho việc sửa mã xấu [BootCamp, Junior Devs, JavaScript và Nguyên tắc thiết kế phần mềm] Phát triển web

Ngày càng có nhiều tiền được chi tiêu bởi các công ty để duy trì mã JavaScript xấu. Đây là nơi tôi nghĩ rằng ngành công nghiệp của chúng tôi cần phải cha ...

TypeScript so với JavaScript [Ưu / Cons] Phát triển web

TypeScript được cho là một trong những điều tốt nhất để đến thế giới JavaScript giúp các nhà phát triển thoải mái tạo ra Enterp phức tạp ...

Cách xây dựng một thành phần bài viết liên quan với Gatsby.jsweb Development

Đây là cách xây dựng thành phần "bài đăng liên quan" cho trang web gatsby.js của bạn.

Mã sạch hơn với Async / Await TutorialWeb Development

Lập trình không đồng bộ trong JavaScript từng khó viết mã sạch với. Hôm nay chúng tôi có các lựa chọn. Bạn có thể viết không đồng bộ ...