Javascript Map Function – Khái niệm, ví dụ và hướng dẫn – Code Tốt

Posted on Updated on by adminChuyên mục:Kiến thức Internet
Điểm bài viết

[Tổng cộng: 2 Trung bình: 5]

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 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 những ví dụ ở trên, ta tương tác với tổng thể những đối tượng người dùng của Array. Giờ hãy thử xem bạn chỉ tương tác với những đối tượng người dùng phân phối một điều kiện kèm theo 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 người dù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ị bắt đầu trong Array không thoả mãn điều kiện kèm theo là số chẵn sẽ không biến hóa giá trị .
Nếu bạn chưa hiểu rõ, cách viết như sau sẽ lý giải đơn cử 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

4.5
4
nhìn nhận

Đánh giá bài viết

admin