Tìm hiểu về Javascript Map Function

Rate this post

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 Javascript Map Function
Sử dụng giá trị index trong Javascript Map Function

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ị valueindex.

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

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...