Javascript Map Function được sử dụng để áp dụng một function vào trong mỗi element của array. Từ đó, một array mới sẽ được tạo ra.
Cú pháp của Javascript Map Function
Dưới đây là ví dụ về về cú pháp ta sẽ sử dụng:
let menuItems = document.querySelectorAll('.menu-item');
let subMenuItems = menuItems.map((menuItem) => { // Bạn có thể gọi menuItem ra });
Trong Map()
, bạn có thể truyền vào hơn một giá trị để sử dụng, như ví dụ dưới đây:
let activeButtons = buttons.map((val, index, arr) => { // val = giá trị hiện tại // index = số thứ tự trong array // array ban đầu khi chưa xử lý });
So sánh Map và For Loop
Bạn có thể thấy rằng về logic thì Map()
có vòng lặp tương tự như for()
, hãy xem ví dụ sau:
var arr = [1, 2, 3, 4]; var plus5 = []; for(var i = 0; i < arr.length; i++) { plus5[i] = arr[i] + 5; } // Kết quả là plus 5 = [6,7,8,9];
Kết quả từ vòng lặp ở trên là mỗi item từ array ban đầu sẽ được cộng thêm 5. Giờ ta sẽ thử làm ra kết quả trên với Map()
:
let arr = [1,2,3,4]; let plus5 = arr.map((val,i,arr) => { return val + 5; }); // plus5 = [6,7,8,9];
Bạn không cần phải chạy vòng lặp để gọi ra từng giá trị để cộng thêm. Mọi thứ trong Map()
chỉ đơn giản là bạn nêu ra thứ bạn cần và return
nó. Map()
sẽ lo phần còn lại.
Sử dụng giá trị index trong Map()
Ở ví dụ này, ta sẽ thử sử dụng cả giá trị và số thứ tự của item trong array trong Map()
. Lúc này ta sẽ thử trả lại không chỉ giá trị ban đầu, mà mỗi item trong array sẽ có cả giá trị value và index.
let arr = [1,2,3,4]; let newArr = arr.map((val, i, arr) => { return { value: val, index: i } });
Kết quả sẽ là:
newArr = [ {value: 1, index: 0}, {value: 2, index: 1}, {value: 3, index: 2}, {value: 4, index: 3} ];
Như vậy, Map()
có thể biến hình và xây dựng mẫu array mới phức tạp hơn và giúp hạn chế việc sử dụng For Loop.
Tương tác với một vài đối tượng của Array trong Map()
Trong các ví dụ ở trên, ta tương tác với tất cả các đối tượng của Array. Giờ hãy thử xem bạn chỉ tương tác với các đối tượng đáp ứng một điều kiện nào đó thì sao. Hãy cùng xem ví dụ:
let arr = [1,2,3,4]; let newArr = arr.map((value, index, arr) => { return value % 2 === 0 ? value * 2 : value; }); // Kết quả là new Arr = [1,4,3,8];
Bạn có hiển đoạn code trên nói gì không? Tức là với mỗi đối tượng, ta xét đến nó có phải số chẵn hay không trước khi x2 giá trị của nó. Các giá trị ban đầu trong Array không thoả mãn điều kiện là số chẵn sẽ không thay đổi giá trị.
Nếu bạn chưa hiểu rõ, cách viết như sau sẽ lý giải cụ thể hơn:
let newArr = arr.map((value, index, arr) => { if( value % 2 === 0 ) { return value * 2; } else { return value; } });
Tổng kết
Đây là một số điều cơ bản về function Map()
trong Javascript. Hãy vận dụng nó thành thạo vào các project của mình. Lưu ý function arrow được sử dụng mẫu ở trên dành cho ES6, nên bạn cần biết các cách cài đặt babel-js để hỗ trợ ES6 trước khi sử dụng nhé. Một lưu ý khác là bạn nên sử dụng codepen.io để test phần này để nắm chắc hơn.
Bài viết được lược dịch từ CodeBrust.io
Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.