-----
1.4.5 Làm quen với Callback
Callback dịch ra tiếng Việt là gọi ngược, gọi lại, sẽ làm việc
gì sau đó.
Theo wiki,
“Trong lập trình máy tính, callback là tình huống: một đoạn
mã nguồn (thường là một hàm A) được sử dụng như một tham số truyền vào cho hàm
B. Hàm A được gọi ngay lập tức hoặc trễ hơn một chút sau khi hàm B được gọi.”
Hiểu nôm na, callback là hiện tượng hàm gọi hàm thông qua
tham số. Hàm được gọi là hàm callback.
Ví dụ, gọi hàm kiểu thông thường:
function sing(song) {
console.log('Teo dang hat bai ' + song);
}
// sing('Lemon tree');
// định nghĩa hàm dance
function dance() {
// gọi hàm sing() kiểu thông thường
console.log(sing('Lemon tree') + 'và khiêu vũ');
}
dance();
// Teo dang hat bai Lemon tree
// undefinedvà khiêu vũ
Ví dụ, gọi hàm kiểu callback:
function sing(song) {
console.log('Teo dang hat bai ' + song);
}
// sing('Lemon tree');
// định nghĩa hàm dance, có truyền một hàm callback
function dance(tenHamBatKy) {
console.log(tenHamBatKy('Lemon tree') + 'và khiêu vũ');
}
dance(sing);
Nên thay tenHamBatKy bằng
callback để dễ nhận diện đó là một hàm, chứ không phải một tham số thông thường.
function sing(song) {
console.log('Teo dang hat bai ' + song);
}
// sing('Lemon tree');
// định nghĩa hàm dance, có truyền một hàm callback
function dance(callback) {
console.log(callback('Lemon tree') + 'và khiêu vũ');
}
dance(sing);
(1) Sắp xếp một mảng
có dùng callback
Ví dụ,
var arr = [1, 12, 18, 23, 3, 5, 7];
arr.sort();
console.log(arr);
// [ 1, 12, 18, 23, 3, 5, 7 ], kết quả có vẻ sai sai
Quan sát kết quả sẽ thấy hàm array.sort() của JavaScript đã
đổi giá trị mỗi phần tử của mảng thành kiểu chuỗi, rồi so sánh và sắp xếp theo
bảng chữ cái.
Giờ sẽ viết thêm hàm callback (tên là soSanhSo) để truyền vào cho hàm sort(), nhằm sắp xếp theo mong muốn
của bạn (sắp xếp theo giá trị số).
Hiểu nôm na, ý tưởng của hàm array.sort() là nó sẽ lấy hai
giá trị liên tiếp trong mảng để so sánh, gọi số đứng trước là a, số đứng sau là
b, rồi lấy a – b, sau đó dựa vào kết quả để quyết định có đổi chỗ giữa a và b
hay không?
Giả sử sắp xếp mảng theo chiều tăng:
– nếu a – b < 0, thì không đổi chỗ a và b
– nếu a – b >= 0, thì đổi chỗ a và b
Vậy sẽ viết hàm callback để thực hiện việc so sánh a, b và
trả về giá trị như sau:
function soSanhSo(a,b) {
return a - b;
}
var arr = [1, 12, 18, 23, 3, 5, 7];
arr.sort(soSanhSo);
console.log(arr);
// [ 1, 3, 5, 7, 12, 18, 23 ]
(2) Viết thêm hàm
callback cho phương thức array.forEach()
var colors = ['Red', 'Green', 'Blue'];
colors.forEach( (color, index) => console.log(`Mau tai vi tri ${ index } la ${ color }`));
(3) Viết thêm hàm
callback cho phương thức array.map()
Map nghĩa là ánh xạ, kiểu như một hàm số y = f(x) = 2x chẳng
hạn. Với x = 1, thì y = 2; x = 2 thì
y = 4 ; x = 3 thì y = 6…v.v.
Map sẽ tạo ra mảng
mới bằng cách thay đổi giá trị của từng phần tử trong mảng cũ.
Cú pháp :
var newArray = oldArray.map(function(moiGiaTriCuaMangCu){
// biến đổi mỗi giá trị của mảng cũ
return giá_trị_đã_được_biến_đổi
});
Đọc thêm về map ở
đây : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Ví dụ :
var numbers = [1, 4, 9]
var doubles = numbers.map(function(num) {
return num * 2
})
console.log(doubles);
// doubles is now [2, 8, 18]
// numbers is still [1, 4, 9]
(4) Viết thêm hàm
callback cho phương thức array.reduce()
Đọc thêm: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
Xem hình:
(nguồn ảnh: chụp từ clip của coderx[1])
reduce: thực hiện rút gọn mảng thành một giá trị duy nhất, bằng
cách thực hiện một “tính toán” trên mỗi phần tử của mảng.
Ví dụ 1:
var array1 = [1, 2, 3, 4];
var result = array1.reduce(function(accumulator, currentValue){
return accumulator + currentValue;
});
console.log(result); //10
Ví dụ 2:
var array1 = [1, 2, 3, 4];
// giá trị khởi tạo là 5
var result = array1.reduce(function(accumulator, currentValue){
return accumulator + currentValue;
}, 5);
console.log(result); // 15
Ví dụ 3:
// thông tin giỏ hàng
var orders = [
{ name: 'A', quantity: 2, unitPrice: 100 },
{ name: 'B', quantity: 1, unitPrice: 200 },
{ name: 'C', quantity: 3, unitPrice: 300 }
];
// dùng reduce để tính Tổng Tiền của đơn hàng
var total = orders.reduce(function(sum, temp){
return sum + temp.quantity * temp.unitPrice;
},0);
console.log(total);
(5) Viết thêm hàm
callback cho phương thức array.filter()
filter: lọc các phần tử dựa vào điều kiện lọc.
Ví dụ: cho mảng a = [1, 2, 3, 4, 5, 6], lọc ra các phần tử
chẵn của mảng a lưu vào mảng b, khi đó b = [2, 4, 6]
Đọc thêm ở đây:
Cú pháp:
var newArray = oldArray.filter(function(moiGiaTriCuaMangCu){
// hàm kiểm tra mỗi giá trị của mảng oldArray
return boolResult; //true hoặc false.
// true: giá trị được chuyển qua mảng mới
// false: giá trị không được chuyển qua mảng mới
});
Ví dụ:
var numbers = [1, 2, 3, 4, 5, 6];
var evenArray = numbers.filter(function(item){
return item % 2 === 0;
});
console.log(evenArray); //[2, 4, 6]
1.4.6 Đã biết gì về MERN rồi?
– Muốn làm việc được với MERN cần biết, hiểu và làm việc được
với MongoDB, Express, React và Nodejs
– Đã biết MongoDB là cơ sở dữ liệu kiểu no-SQL dùng trong hệ
thống MERN. Để làm việc với MongoDB, cần tạo database, sau đó tạo collection (bảng),
trong collection tạo các document (dòng dữ liệu trong bảng).
– Dữ liệu trong MongoDB được lưu dưới dạng Binary JSON viết
tắt là BSON
– Có thể tạo database server cho MongoDB trên trang MongoDB Atlas.
Trong MongoDB Atlas, máy server chứa cơ sở dữ liệu (database server) được gọi
là cluster.
– Đã cài đặt được nền tảng Nodejs, có thể xem Nodejs như một
hệ điều hành mini, nó có thể dịch và chạy mã JavaScript
– Đã biết lập trình JavaScript căn bản, dùng Nodejs để dịch
và chạy đoạn mã JavaScript
– Hiểu căn bản về hàm và callback trong JavaScript
-----
Cập nhật: [11/04/2020]
-----
Xem thêm: MERN (4) - NPM và Module
Xem thêm: Danh sách bài học
Xem thêm: Danh sách bài học