HomeLập trìnhJavaScriptHàm gọi lại...

Hàm gọi lại trong JavaScript là gì? Hướng dẫn ví dụ về cuộc gọi lại JS


Trong JavaScript có các phương thức và hàm bậc cao hơn chấp nhận một hàm làm đối số. Các hàm này được sử dụng làm đối số cho các hàm khác được gọi là hàm gọi lại.

Gọi lại trong JavaScript là gì?

Gọi lại là một hàm được truyền dưới dạng đối số của một hàm khác.

Điều này có nghĩa là hàm cha thường được xây dựng để sử dụng bất kỳ loại hàm nào. Nhưng hàm gọi lại, mặt khác, có nghĩa là được sử dụng trong một trường hợp cụ thể (hoặc một số trường hợp hạn chế) trong đó hàm cha được sử dụng.

Làm cách nào để bạn tạo hàm gọi lại trong JavaScript?

Bạn tạo một hàm gọi lại giống như bất kỳ hàm nào khác trong JavaScript:

function callbackFunction () {
    
}

Sự khác biệt giữa chức năng gọi lại và bất kỳ chức năng nào khác là cách nó được sử dụng.

Hàm gọi lại được xây dựng riêng để sử dụng làm đối số của hàm khác.

function anyFunction(fun) {
    // ...
    fun(a, b, c);
    //...
}

anyFunction(callbackFunction);

Vì vậy, để tạo một callbackFunction bạn cần biết cách hàm cha sử dụng hàm gọi lại, nó truyền vào những đối số nào và thứ tự nó truyền chúng vào.

Ví dụ về chức năng gọi lại là gì?

Bây giờ chúng ta sẽ viết chức năng gọi lại của riêng mình, vì đó là điều bạn sẽ phải thực hiện nhiều lần. Vì vậy, chúng ta hãy bắt đầu!

Hàm bậc cao hơn đã được tích hợp trong ngôn ngữ JavaScript là every phương pháp.

Các every method là một phương thức mảng và sử dụng hàm gọi lại để kiểm tra xem tất cả các phần tử trong mảng có vượt qua một bài kiểm tra nhất định hay không.

Nhìn vào các tài liệu về every bạn có thể thấy rằng hàm gọi lại được truyền ba đối số: một phần tử của mảng, chỉ mục của phần tử đó và toàn bộ mảng.

Vì vậy, chữ ký chức năng gọi lại sẽ giống như thế này:

function callbackFunction(element, index, array) {
    // do something
}

Các hàm gọi lại có thể đơn giản hoặc phức tạp tùy theo nhu cầu của bạn. Để tạo một ví dụ, chúng ta cần một số ngữ cảnh.

Cách viết hàm gọi lại trong JavaScript

Vì vậy, giả sử bạn đang làm việc với các mảng chuỗi. Bạn cần kiểm tra xem mảng chỉ chứa các chuỗi dài đúng ba ký tự, có phải là chữ hoa, chứa tất cả các chữ cái khác nhau và chúng không lặp lại bên trong mảng hay không.

Đây là một trường hợp khá phức tạp, nhưng có thể cuối cùng bạn sẽ cần phải làm điều gì đó như thế này hoặc có độ phức tạp tương đương, vì vậy đây là một cách thực hành tốt.

Bạn có thể giải quyết một điều kiện tại một thời điểm khi bạn xây dựng một hàm với rất nhiều thứ cần kiểm tra.

Đọc thêm  Bản đồ JavaScript - JS.map() 함수 사용 방법 (배열 메소드)

Điều kiện đầu tiên là phần tử là một chuỗi, vì vậy, hãy thêm nó:

function callbackFunction(element, index, array) {
    
    // check that element is a string
	const isNotString = typeof element !== "string";
    // if it's not, end function
    if (isNotString) {return;}
    
}

Tiếp theo, các chuỗi phải là chữ hoa, chỉ chứa các chữ cái và dài 3 ký tự.

Bạn có thể kiểm tra ba điều kiện này một cách riêng biệt hoặc bạn có thể kiểm tra chúng cùng với một biểu thức chính quy để kiểm tra chính xác ba điều kiện đó.

Một biểu thức chính quy như vậy sẽ trông như thế này: /^[A-Z]{3}$/.

Hãy xem các phần của biểu thức chính quy này là gì:

  • Các nhân vật ^ lúc đầu và $ ở cuối là neo. Những điều này nói rằng chuỗi phải bắt đầu và kết thúc chính xác theo cách đó. Và nếu bạn sử dụng cả hai, chúng sẽ hạn chế một chuỗi chỉ chứa và chính xác mẫu trong biểu thức chính quy.
  • [A-Z] là một lớp ký tự khớp với bất kỳ ký tự nào từ A đến Zvì vậy tất cả các chữ hoa.
  • {3} là một bộ đếm. Điều này nói rằng điều trước đó phải được khớp chính xác ba lần liên tiếp.

Biểu thức chính quy được giải thích ở trên tương đương với biểu thức chính quy này: /^[A-Z][A-Z][A-Z]$/.

Trong trường hợp này thay vì bộ đếm {3} chúng tôi đã viết lớp [A-Z] ba lần.

Hãy thêm mã này vào mã.

function callbackFunction(element, index, array) {
    
    // check that element is a string
    const isNotString = typeof element !== "string";
    // if it's not, end function
    if (isNotString) {
        return;
    }
    
    // check that string is 3 characters long and only uppercase letters
    const isItThreeUpperCaseLetters = /^[A-Z]{3}$/.test(element);
    // otherwise, end function
    if (!isItThreeUpperCaseLetters) {
        return;
    }
    
}

Nếu bạn không thích biểu thức chính quy, bạn có thể đọc bên dưới cách thực hiện kiểm tra tương tự mà không sử dụng biểu thức chính quy.

Sau đó, tiếp theo, chúng ta cần kiểm tra xem các ký tự có khác nhau không.

Có ba ký tự bạn có thể sử dụng: element[0] !== element[1] && element[0] !== element[2] && element[1] !== element[2].

Tuy nhiên, bạn cũng có thể làm điều này với một vòng lặp – thực ra là một vòng lặp kép.

// with the outer loop, you get j, the first index to compare
for (let j = 0; j++; j < element.length) {
    // with the inner loop you get k, the second index to compare
    for (let k = j+1; k++; k < element.length) {
        // you compare the element at index j with the element at index k
        if (element[j] === element[k]) {
            // if they are equal return to stop the function
            return;
        }
    }
}

Vòng lặp sẽ hoạt động với bất kỳ độ dài nào và bạn không cần phải viết lại nó cho các tình huống khác nhau.

Có chính xác giống như viết ba so sánh? Hãy theo dõi vòng lặp để kiểm tra.

Ở lần lặp đầu tiên, chúng ta có điều đó j=0k=1vì vậy so sánh đầu tiên là element[0] === element[1]. sau đó k tăng lên, vì vậy nó là j=0k=2vậy đó là element[0] === element[2].

Tại thời điểm này, vòng lặp bên trong dừng lại và vòng lặp bên ngoài (vòng lặp có j) chuyển sang bước lặp tiếp theo. Thời gian này j=1và vòng lặp bên trong bắt đầu từ k=j+1 vì vậy tại k=2 – so sánh ở đây là element[1] === element[2].

Vòng trong lặp xong, vòng ngoài đi từ j=1 đến j=2vòng lặp bên trong không bắt đầu như k = j+1 = 3 không vượt qua k < element.length điều kiện của vòng lặp.

function callbackFunction(element, index, array) {
    
    
    // check that element is a string
    const isNotString = typeof element !== "string";
    // if it's not, end function
    if (isNotString) {
        return;
    }
    
    
    // check that string is 3 characters long and only uppercase letters
    const isItThreeUpperCaseLetters = /^[A-Z]{3}$/.test(element);
    // otherwise, end function
    if (!isItThreeUpperCaseLetters) {
        return;
    }
    
    
    // check if all characters are different
    const allDifferentCharacters = element[0] !== element[1] && element[0] !== element[2] && element[1] !== element[2];
    // if not, return to stop the function
    if (!allDifferentCharacters) {
        return;
    }
    
    
    
}

Sau đó, điều cuối cùng chúng ta cần kiểm tra là các chuỗi không được lặp lại bên trong mảng.

Đọc thêm  JavaScript viết hoa chữ cái đầu tiên – Cách viết hoa chữ cái đầu tiên trong một từ bằng JS

chúng ta có thể sử dụng indexOf để kiểm tra xem cái hiện tại có phải là lần xuất hiện đầu tiên của element bên trong mảng.

Chúng ta sẽ cần tham chiếu mảng cho việc này. Và chúng tôi có nó – đó là một trong những đối số được chuyển vào cuộc gọi lại, array tham số.

Nếu đây là lần xuất hiện đầu tiên của chuỗi trong mảng, đầu ra của indexOf sẽ giống như index.

Nếu array.indexOf(element) === indextrueđó có nghĩa là element có mặt trong mảng lần đầu tiên tại index. Nếu nó là falsemột chuỗi giống hệt xuất hiện sớm hơn trong mảng.

Hãy thêm kiểm tra này vào chức năng. Và nếu chuỗi vẫn tồn tại qua tất cả các lần kiểm tra, thì hàm có thể trả về true cuối cùng.

function callbackFunction(element, index, array) {
    
    
    // check that element is a string
    const isNotString = typeof element !== "string";
    // if it's not, end function
    if (isNotString) {
        return;
    }
    
    
    // check that string is 3 characters long and only uppercase letters
    const isItThreeUpperCaseLetters = /^[A-Z]{3}$/.test(element);
    // otherwise, end function
    if (!isItThreeUpperCaseLetters) {
        return;
    }
    
    
    // check if all characters are different
    const allDifferentCharacters = element[0] !== element[1] && element[0] !== element[2] && element[1] !== element[2];
    // if not, return to stop the function
    if (!allDifferentCharacters) {
        return;
    }
    
    
    // check if it's the first appearence of element inside the array
    const isItFirstAppearence = array.indexOf(element) === index;
    // if not, return to stop the function
    if (!isItFirstAppearence) {
        return;
    }
    
    
    return true;
}

Và nếu chúng ta không sử dụng biểu thức chính quy?

Trong đoạn mã trên, để kiểm tra ba điều khác nhau, chúng tôi đã sử dụng một biểu thức chính quy: /^[A-Z]{3}$/.

Nhưng nếu bạn không muốn làm việc với regex, bạn có thể sử dụng length thuộc tính để kiểm tra xem một chuỗi có chính xác độ dài nhất định hay không. Trong trường hợp này element.length === 3 để kiểm tra xem chuỗi có chính xác dài ba ký tự không.

Tiếp theo, chuỗi phải toàn chữ hoa và chỉ chứa các chữ cái.

Bạn có thể dùng charCodeAt cho việc này. Phương thức này trả về mã ASCII của một ký tự và biết rằng các chữ hoa có mã ASCII từ 65 đến 90, bạn có thể kiểm tra xem chỉ có các chữ hoa không.

Có ba số để kiểm tra: element.charCodeAt(0), element.charCodeAt(1)element.charCodeAt(2). Tất cả chúng cần nằm trong khoảng từ 65 đến 90. Chỉ có ba ký tự, nhưng chúng ta vẫn có thể sử dụng một vòng lặp.

Vì vậy, đó sẽ là như sau:

for (let i = 0; i++; i < element.length) {
    // find the ASCII code of the character
    const code = element.charCodeAt(i);
    // check if it's outside of the range
    if (code < 65 || code > 90) {
        // if it is, return to stop the function
        return;
    }
}

Hãy thêm cái này vào chức năng:

function callbackFunction(element, index, array) {
    
    // check that element is a string
    const isNotString = typeof element !== "string";
    // if it's not, end function
    if (isNotString) {return;}
    
    // check that element has length string
    const hasLengthThree = element.length === 3;
    // if it has a different length, end function
    if (!hasLengthThree) {return;}
    
    // loop over the characters
	for (let i = 0; i++; i < element.length) {
        // find the ASCII code of the character
        const code = element.charCodeAt(i);
        // check if it's outside of the range
        if (code < 65 || code > 90) {
            // if it's outside the range, return and stop the function
            return;
        }
    } 
}

Nếu bạn đã đến đây từ liên kết trên, bạn có thể quay lại đó để tiếp tục đọc cách kết thúc chức năng, nếu không, hãy tiếp tục đến cuối.

Đọc thêm  Cách kiểm tra xem đầu vào có trống không bằng JavaScript

Cách sử dụng chức năng gọi lại ví dụ

Chúng tôi đã viết chức năng gọi lại. Vì vậy, làm thế nào để bạn sử dụng nó?

anArray.every(callbackFunction);

Bạn cũng có thể sử dụng every phương thức bên trong một cuộc gọi lại – có thể gọi lại một filter phương pháp.

Khi một chương trình trở nên phức tạp hơn, nó có thể sẽ sử dụng nhiều hàm gọi lại hơn theo tỷ lệ.

Tại sao chúng ta sử dụng hàm gọi lại trong JavaScript?

Hàm gọi lại là một tính năng gọn gàng của JavaScript. Nó có nghĩa là chúng ta có thể có một chức năng chung để thực hiện một việc gì đó (như every kiểm tra xem mọi phần tử trong một mảng có khớp với một điều kiện nhất định hay không, filterloại bỏ các phần tử không phù hợp với một điều kiện nhất định, replacemột phương thức chuỗi chấp nhận một hàm gọi lại để mô tả cách thay thế các phần của một chuỗi, v.v.) và một hàm gọi lại để thêm các chi tiết cụ thể của hành vi đó cho tình huống cụ thể.

  • filter trong tình huống đó sẽ xóa các phần tử được chỉ định bởi cuộc gọi lại.
  • every sẽ kiểm tra xem tất cả các phần tử trong tình huống đó có được chỉ định bởi hàm gọi lại hay không.
  • replace sẽ thay thế các phần của chuỗi trong tình huống mà nó được sử dụng như được chỉ định bởi lệnh gọi lại.

Các hàm bậc cao hơn thêm một mức độ trừu tượng vào mã. Chúng tôi không biết (và không cần biết), làm thế nào every kiểm tra mọi phần tử của mảng và xác minh rằng tất cả chúng đều vượt qua các bài kiểm tra được chỉ định bởi lệnh gọi lại. Chúng ta chỉ cần biết rằng phương thức chấp nhận chức năng gọi lại cho điều đó.

Phần kết luận

Gọi lại là các hàm được truyền dưới dạng đối số của các hàm khác. Bạn đã xem một ví dụ về cách tạo một ví dụ và một số cân nhắc về lý do tại sao chúng lại hữu ích.

Cảm ơn bạn đã đọc!



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