Phương thức map

Phương thức map cho phép áp dụng một hàm cho trước cho từng phần tử của mảng. Phương thức này không thay đổi mảng ban đầu, mà trả về một mảng mới đã được thay đổi.

Phương thức nhận một hàm làm tham số, hàm này sẽ được thực thi cho mỗi phần tử của mảng. Giá trị mà hàm này trả về thông qua return cho phần tử mảng sẽ trở thành giá trị mới của phần tử đó (xem các ví dụ).

Có thể truyền 3 tham số vào hàm. Nếu các tham số này tồn tại (chúng không bắt buộc), thì tham số đầu tiên sẽ tự động là phần tử mảng, tham số thứ hai là số thứ tự của nó trong mảng (chỉ mục), và tham số thứ ba là chính mảng đó.

Cú pháp

javascriptlet mảng mới = mảng.map(function(phần tử, chỉ mục, mảng) {
  mã
  return phần tử đã thay đổi;
});

Ví dụ

Tạo một mảng, mỗi phần tử của mảng mới gấp đôi phần tử tương ứng của mảng ban đầu:

javascriptlet arr = [1, 2, 3, 4, 5];

let res = arr.map(function(elem) {
  return elem * 2;
});

console.log(res);

Kết quả thực thi mã:

javascript[2, 4, 6, 8, 10]

Ví dụ

Tạo một mảng, mỗi phần tử của nó được tính bằng cách: giá trị phần tử nhân với số thứ tự của nó trong mảng:

javascriptlet arr = [1, 2, 3, 4, 5];

let res = arr.map(function(elem, index) {
  return elem * index;
});

console.log(res);

Kết quả thực thi mã:

javascript[0, 2, 6, 12, 20]

Ví dụ

Nếu cần, có thể truyền chính mảng vào tham số thứ ba:

javascriptlet arr = [1, 2, 3, 4, 5];

let res = arr.map(function(elem, index, arr) {
  // tại đây mảng arr sẽ có thể truy cập được
});

Ví dụ

Phương thức map cũng có thể được sử dụng để duyệt qua các mảng đa chiều. Ví dụ, cho một mảng như sau:

javascriptlet arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

Hãy duyệt qua mảng này bằng map và in các phần tử của nó ra console:

javascriptlet arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

let result = arr.map(function(elem) {
  console.log(elem);
});

Kết quả console.log sẽ in ra [1, 2, 3], sau đó [4, 5, 6], sau đó [7, 8, 9].

Như bạn thấy, biến elem nhận các mảng con. Bây giờ hãy áp dụng phương thức map cho từng mảng con và bình phương mỗi phần tử của nó:

javascriptlet arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

let result = arr.map(function(elem) {
  return elem.map(function(num) {
    return num * num;
  });
});

console.log(result);

Xem thêm