Lập trình viên thích giảm thiểu lặp lại trong mã. Càng lặp lại mã nhiều, mã càng khó bảo trì và chương trình chạy càng chậm. Đó là lý do có nhiều phương thức trong JavaScript để lặp qua tập dữ liệu.
Một trong những phương thức đó gọi là phương thức map(). Phương thức này lặp qua một mảng hiện có và thực hiện một hàm cụ thể trên tất cả các mục trong mảng đó.
Trong hướng dẫn này, chúng ta sẽ nói về cách sử dụng hàm map() JavaScript. Chúng ta sẽ đi qua ba ví dụ phổ biến của map() trong thực tế để giúp bạn bắt đầu.
Hàm map là gì?
Phương thức map() JavaScript gọi một hàm cụ thể trên mỗi mục trong một mảng. Kết quả của hàm này sau đó được chuyển vào một mảng mới riêng biệt.
Ví dụ, giả sử bạn muốn nhân mỗi mục trong mảng với hai. Bạn có thể làm bằng cách tạo một hàm nhân mỗi mục mảng với hai, và đưa hàm đó vào phương thức map().
Cú pháp của hàm map() là:
const newArray = oldArray.map(function, thisValue);
function là hàm callback sẽ chạy trên mỗi phần tử trong mảng. Để tìm hiểu thêm về hàm, bạn có thể đọc hướng dẫn cuối cùng về hàm JavaScript. thisValue là giá trị mặc định sẽ được lưu trong biến this trong hàm. Mặc định là undefined.
Phương thức map tạo một mảng mới dựa trên kết quả của hàm callback.
Phương thức map() có nhiều trường hợp sử dụng. Phổ biến nhất là gọi hàm trên danh sách các phần tử mảng. Ví dụ: nhân mọi số trong danh sách số, hoặc tìm độ dài mỗi chuỗi trong danh sách chuỗi.
Bạn cũng sẽ thấy hàm này được dùng để render danh sách trong các thư viện JavaScript như React hoặc Vue.js.
Gọi hàm với Map
Phương thức map() cho phép bạn thực hiện tác vụ lặp lại trên mỗi mục trong danh sách, làm cho nó hữu ích trong nhiều trường hợp.
Giả sử bạn sở hữu tiệm bánh quy và định tăng giá mỗi loại bánh quy 5%. Thay vì tính toán tất cả giá mới riêng lẻ, bạn có thể dùng phương thức map().
Đây là mã bạn sẽ dùng:
const cookiePrices = [1.50, 1.75, 1.60, 2.00, 2.05, 1.45]; const newCookiePrices = cookiePrices.map(cookie => { var price = cookie * 1.05; return price.toFixed(2); }); console.log(newCookiePrices);
Mã trả về:
["1.58", "1.84", "1.68", "2.10", "2.15", "1.52"]
Trong ví dụ này, chúng ta tăng giá mỗi bánh quy 5%. Đầu tiên, khai báo danh sách giá bánh quy trong biến "cookiePrices". Sau đó, dùng phương thức map() với hàm tính tăng giá 5% cho mỗi bánh quy.
"cookie * 1.05" tính phần tăng giá, sau đó trả về giá trị tăng, làm tròn đến hai chữ số thập phân. Cuối cùng, in mảng mới ra console bằng phương thức console.log().
Chúng ta cũng có thể chuyển hàm vào hàm riêng để mã dễ đọc hơn:
function calculateIncrease(cookie) { var price = cookie * 1.05; return price.toFixed(2); } const cookiePrices = [1.50, 1.75, 1.60, 2.00, 2.05, 1.45]; const newCookiePrices = cookiePrices.map(calculateIncrease); console.log(newCookiePrices);
Mã trả về cùng giá trị như trước, nhưng dễ đọc hơn:
["1.58", "1.84", "1.68", "2.10", "2.15", "1.52"]
Thay đổi mục trong mảng
Phương thức map() thường dùng để thay đổi các mục trong mảng. Giả sử tiệm bánh quy của chúng ta xây dựng chương trình khách hàng thân thiết. Mỗi bánh quy mua được 10 điểm, và nếu đạt 100 điểm, bạn sẽ được một bánh quy miễn phí.
Chương trình sau cho phép thực hiện nhiệm vụ này:
var customers = [ { name: "Hannah Geoffrey", cookiesPurchased: 2 }, { name: "Peter Clarkson", cookiesPurchased: 3 }, { name: "Steven Hanson", cookiesPurchased: 7 } ] function calculateLoyaltyPoints(customer) { var newCustomer = { name: customer.name, cookiesPurchased: customer.cookiesPurchased, points: customer.cookiesPurchased * 10 } return newCustomer; } var customersWithPoints = customers.map(calculateLoyaltyPoints); console.log(customersWithPoints);
Mã trả về:
[{ cookiesPurchased: 2, name: "Hannah Geoffrey", points: 20 }, { cookiesPurchased: 3, name: "Peter Clarkson", points: 30 }, { cookiesPurchased: 7, name: "Steven Hanson", points: 70 }]
Trong ví dụ này, chúng ta tính tổng điểm mỗi khách hàng nên được trao dựa trên số bánh quy họ đã mua.
Đầu tiên, khai báo mảng đối tượng gọi là "customers". Danh sách này lưu tên khách hàng và số bánh quy họ mua bằng cặp key:value.
Sau đó, khai báo hàm calculateLoyaltyPoints(). Hàm này thêm mục mới vào mỗi khách hàng gọi là "points" được tính bằng nhân số bánh quy mỗi khách hàng mua với 10.
Chúng ta dùng map() để lặp qua danh sách khách hàng và áp dụng hàm calculateLoyaltyPoints(). Cuối cùng, in danh sách khách hàng đã sửa đổi. Danh sách này hiện phản ánh giá trị "points" chúng ta thêm vào mục của mỗi khách hàng.
Render danh sách sử dụng thư viện
Phương thức map() thường dùng trong các thư viện JavaScript như React. Mục đích của phương thức này là render các mục trong danh sách. Hãy xem ví dụ map() trong React.
Giả sử chúng ta muốn hiển thị danh sách các loại bánh quy tiệm bán trên trang web. Chúng ta có thể làm với mã này:
import React from "react"; import ReactDOM from "react-dom"; var cookies = ["Raspberry Chocolate Chip", "White Chocolate Chip", "Oat", "Milk Chocolate Chip"]; const CookieList = () => ( <div> <ul>{cookies.map((cookie, i) => <li key={i}>{cookie}</li> )} </ul> </div> ); const root = document.getElementById("root"); ReactDOM.render(<CookieList />, root);
Mã này tạo một component trong React render một danh sách. Mỗi mục danh sách nằm trong thẻ <li> được render bằng map(). map() tạo một thẻ <li> riêng cho mỗi mục trong danh sách, và biến "i" gán cho mỗi mục danh sách một key duy nhất.
Map so với các phương thức lặp khác
Map là ví dụ của phương thức lặp (iterator method) trong JavaScript. Các phương thức này cho phép bạn lặp qua tất cả các mục trong danh sách và thực hiện hành động gì đó.
Khi quyết định dùng hàm map(), tốt nhất trước tiên hãy hỏi xem phương thức lặp khác có tốt hơn không. Điều này đảm bảo bạn chọn đúng công cụ cho công việc.
Dưới đây là các phương thức lặp khác tồn tại trong JavaScript:
- reduce(): Phương thức reduce cho phép rút gọn mảng thành một giá trị đơn lẻ. Phương pháp này tốt nhất nếu bạn muốn làm gì đó như cộng tất cả các mục trong mảng.
- filter(): Filter cho phép loại bỏ các mục khỏi danh sách không đáp ứng tiêu chí cụ thể.
- forEach(): forEach() chạy một hàm trên mỗi mục trong danh sách. forEach() tương tự như vòng lặp for vì nó cho phép lặp qua mảng và thực hiện tác vụ trên mỗi mục.
Bạn có thể nghĩ, "map nghe rất giống phương thức forEach(). Chúng có giống nhau không?" Đó là câu hỏi tốt. Có sự khác biệt tinh tế giữa hai phương thức này.
Hàm map() lặp qua danh sách, thay đổi mỗi mục trong danh sách và trả về danh sách mới. Hàm forEach(), mặt khác, lặp qua danh sách và, như một tác dụng phụ, áp dụng một số phép toán cho danh sách.
Hàm map() tốt nhất dùng khi bạn cần gọi hàm trên mỗi mục trong danh sách, khai báo component danh sách trong framework như React, hoặc thay đổi nội dung danh sách.
Kết luận
Phương thức map() hữu ích cho việc thực hiện tác vụ lặp lại nhiều lần. Nó cũng hữu ích để khai báo component trong React như danh sách.
Trong hướng dẫn này, chúng ta phân tích ba trường hợp sử dụng chính của phương thức map(). Bây giờ bạn đã sẵn sàng sử dụng phương thức map() JavaScript như một nhà phát triển chuyên gia!