Trong hướng dẫn này, bạn sẽ học cách sử dụng phương thức map() trong JavaScript để chuyển đổi các phần tử trong một mảng qua các ví dụ minh họa.
Giới thiệu về phương thức map() trong JS
Đôi khi, bạn cần lấy một mảng, biến đổi các phần tử của nó và đưa các kết quả vào một mảng mới.
Thông thường, bạn sử dụng vòng lặp for để lặp qua các phần tử, chuyển đổi từng phần tử riêng lẻ và đẩy kết quả vào một mảng mới.
Hãy xem một ví dụ bên dưới.
Giả sử rằng bạn có một mảng số nguyên trong đó mỗi phần tử đại diện cho bán kính của một hình tròn như sau:
let mangBanKinh = [10, 30, 50];
Phần sau minh họa cách tính diện tích của mỗi hình tròn và đẩy kết quả vào một mảng mới.
let arrDienTich = []; // Để chứa diện tích
let dienTich = 0;
// Tính diện tích của các hình tròn
for (let i = 0; i < arrBanKinh.length; i++) {
// diện tích = PI * R * R
dienTich = Math.floor(Math.PI * arrBanKinh[i] * arrBanKinh[i]);
// Thêm diện tích vào mảng mới(cuối mảng)
arrDienTich.push(dienTich);
}
// In ra mảng diện tích
console.log(arrDienTich);
Kết quả:
[314, 2827, 7853]
Nói chung, chúng ta cần khá nhiều code để thực hiện tính diện tích các hình tròn ở trên.
Bắt đầu từ ES5, kiểu Array trong JavaScript cung cấp phương thức map() cho phép bạn chuyển đổi các phần tử của mảng theo cách rõ ràng hơn.
let arrBanKinh = [10, 30, 50];
// Tạo hàm tính diện tích
function tinhDienTich(banKinh) {
return Math.floor(Math.PI * banKinh * banKinh);
}
// Sử dụng map() tạo một mảng mới, và áp dụng
// hàm tính diện tích cho từng phần tử
// trong mảng arrBanKinh
let arrDienTich = arrBanKinh.map(tinhDienTich);
// In kết quả
console.log(arrDienTich);
Chúng ta cũng có được kết quả như trên.
Nó hoạt động như thế nào?
-
Đầu tiên, chúng ta định nghĩa một hàm tính diện tích của một hình tròn.
-
Sau đó, truyền hàm
tinhDienTich vào phương thức map(). Phương thức map() sẽ gọi hàm tinhDienTich trên mỗi phần tử của mảng arrBanKinh và trả về một mảng mới với các phần tử đã được biến đổi.
Để ngắn gọn hơn, bạn có thể chuyển vào phương thức map() một hàm ẩn danh như sau.
let arrBanKinh = [10, 30, 50];
// Sử dụng hàm ẩn danh
let arrDienTich = arrBanKinh.map(function(banKinh) {
return Math.floor(Math.PI * banKinh * banKinh);
});
console.log(arrDienTich);
Ngoài ra, bạn có thể sử arrow function trong ES6 để đạt được kết quả tương tự với code rõ ràng hơn:
// Sử dụng arrow function
let arrDienTich = arrBanKinh.map(
banKinh => Math.floor(Math.PI * banKinh * banKinh)
);
console.log(arrDienTich);
Ngoài ra, chúng ta có thể viết chương trình trên một cách "clean code" như thế này:
// Tạo hàm tính diện tích
let tinhDienTich = r => Math.floor(Math.PI * r * r);
// Mảng chứa các bán kính
const banKinh = [10, 30, 50];
// Tính diện tích theo từng bán kinh
const arrDienTich = banKinh.map(tinhDienTich);
// In ra kết quả
console.log(arrDienTich);
Chi tiết phương thức map() trong JavaScript
Cú pháp phương thức map().
arrayObject.map(callback[, contextObject]);
-
Phương thức map() gọi một hàm call back trên mọi phần tử của mảng và trả về một mảng mới chứa kết quả.
-
Phương thức map() nhận hai đối số được đặt tên, đối số đầu tiên là bắt buộc, trong khi đối số thứ hai là tùy chọn.
Tương tự như các phương thức lặp khác như every(), some(), filter(), forEach() và sort(), hàm callback() có dạng sau:
function callback(currentElement, index, array) {
// ...
}
Hàm callback() nhận ba đối số:
-
currentElement: (Bắt buộc) Là phần tử hiện tại của mảng đang được xử lý.
-
index: (Tùy chọn) Là chỉ mục của currentElement
-
array: (Tùy chọn) Là đối tượng mảng được duyệt qua.
Nếu bạn chuyển contextObject vào phương thức map (), bạn có thể tham chiếu contextObject bên trong hàm callback() bằng cách sử dụng từ khóa this.
Điều quan trọng cần lưu ý là phương thức map() không thay đổi mảng ban đầu, nó tạo ra một mảng mới gồm tất cả các phần tử đã được biến đổi bởi hàm callback().
Một số ví dụ về cách sử dụng map() trong JavaScript
Đây là một ví dụ tạo một mảng bình phương từ một mảng mới:
// Tạo một hàm lát nữa sử dụng
const binhPhuong = x => x * x;
// Chúng ta có 1 mảng
const mangBanDau = [2, 3, 4, 5, 6];
// Gọi hàm trên từng phần tử
const mangBinhPhuong = mangBanDau.map(binhPhuong);
// In ra kết quả
console.log(mangBinhPhuong);
Kết quả:
[4, 9, 16, 25, 36]
Ví dụ sau đây cho thấy cách biến đổi một mảng số bằng cách sử dụng một phương thức có sẵn của Math để làm hàm callback().
let mangSo = [16, 25, 36];
// Tính căn bậc 2 của từng phần tử trong mảng
let ketQua = mangSo.map(Math.sqrt);
// In ra kết quả
console.log(ketQua);
Kết quả:
[4, 5, 6]
Ví dụ: Ghép họ và tên bằng cách sử dụng map()
const sinhVien = [
{ ho: "Đặng", ten: "Ngọc Anh" },
{ ho: "Vi", ten: "Tiểu Bảo" },
{ ho: "Hàn", ten: "Lập" }
];
function layTenDayDu(sv) {
// Ghép họ và tên bằng hàm join()
let hoVaTen = [sv.ho, sv.ten].join(" ");
return hoVaTen;
}
let tenDayDu = sinhVien.map(layTenDayDu);
console.log(tenDayDu);
Kết quả:
["Đặng Ngọc Anh", "Vi Tiểu Bảo", "Hàn Lập"]
Ví dụ: Định dạng lại các Array Object
Chúng ta có một đối tượng sinhVien như thế này:
const SinhVien = [
{ msv: "SV1", ten: "Ngọc Anh" },
{ msv: "SV2", ten: "Tiểu Bảo" },
{ msv: "SV3", ten: "Hàn Lập" }
];
Bây giờ chúng ta muốn tạo một đối tượng mới trong đó có tên sinh viên và độ dài tên của từng sinh viên, ta làm như sau:
const doDaiTenSinhVien = SinhVien.map(sv => {
const obj = {};
obj[sv.msv] = sv.ten;
obj.doDaiTen = sv.ten.length;
return obj;
});
// In ra kết quả
console.log(doDaiTenSinhVien);
Tổng kết về map() trong JS
Trong bài hướng dẫn này, bạn đã học được cách sử dụng phương thức map() trong JavaScript để biến đổi các phần tử của mảng theo một hàm tùy biến.
Bạn sẽ sử dụng nhiều đến map() khi đi làm thực tế hoặc sử dụng Front end Framework (như React.js). Vì thế, luyện tập thêm để hiểu hơn bạn nhé.
Chúc bạn học tốt.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0968051561
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python