Bản đồ JavaScript – Cách sử dụng Hàm JS .map() (Phương thức mảng)

Đôi khi bạn có thể cần lấy một mảng và áp dụng một số thủ tục cho các phần tử của nó để bạn có được một mảng mới với các phần tử đã sửa đổi.

Thay vì lặp lại mảng theo cách thủ công bằng vòng lặp, bạn chỉ cần sử dụng công cụ tích hợp sẵn Array.map() phương pháp.

Các Array.map() phương thức cho phép bạn lặp qua một mảng và sửa đổi các phần tử của nó bằng hàm gọi lại. Hàm gọi lại sau đó sẽ được thực thi trên từng phần tử của mảng.

Ví dụ: giả sử bạn có phần tử mảng sau:

let arr = [3, 4, 5, 6];

Bây giờ hãy tưởng tượng bạn được yêu cầu nhân từng phần tử của mảng với 3. Bạn có thể cân nhắc sử dụng một for vòng lặp như sau:

let arr = [3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]

Nhưng bạn thực sự có thể sử dụng Array.map() phương pháp để đạt được kết quả tương tự. Đây là một ví dụ:

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

Các Array.map() thường được sử dụng để áp dụng một số thay đổi cho các phần tử, cho dù là nhân với một số cụ thể như trong mã ở trên hay thực hiện bất kỳ thao tác nào khác mà bạn có thể yêu cầu cho ứng dụng của mình.

Cách sử dụng map() trên một mảng đối tượng

Ví dụ, bạn có thể có một mảng đối tượng lưu trữ firstName và lastName giá trị của bạn bè của bạn như sau:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

Bạn có thể dùng map() phương thức để lặp qua mảng và nối các giá trị của firstName và lastName như sau:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]

Các map() phương thức vượt qua nhiều hơn chỉ một phần tử. Hãy xem tất cả các đối số được thông qua map() đến chức năng gọi lại.

Cú pháp hoàn chỉnh của phương thức map()

Cú pháp cho map() phương pháp như sau:

arr.map(function(element, index, array){  }, this);

cuộc gọi lại function() được gọi trên mỗi phần tử mảng và map() phương pháp luôn vượt qua hiện tại elementcác index của phần tử hiện tại và toàn bộ array phản đối nó.

Các this đối số sẽ được sử dụng bên trong hàm gọi lại. Theo mặc định, giá trị của nó là undefined . Ví dụ: đây là cách thay đổi this giá trị cho số 80:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
	console.log(this) // 80
}, 80);

Bạn cũng có thể kiểm tra các đối số khác bằng cách sử dụng console.log() nếu bạn quan tâm:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    return element;
}, 80);

Và đó là tất cả những gì bạn cần biết về Array.map() phương pháp. Thông thường, bạn sẽ chỉ sử dụng element đối số bên trong hàm gọi lại trong khi bỏ qua phần còn lại. Đó là những gì tôi thường làm trong các dự án hàng ngày của mình 🙂

Cảm ơn đã đọc hướng dẫn này

Bạn cũng có thể quan tâm đến các hướng dẫn JavaScript khác mà tôi đã viết, bao gồm cách tính tổng một mảng các đối tượng và các phương thức để tìm một chuỗi palindrome. Chúng là một số vấn đề JavaScript thường được yêu cầu giải quyết nhất.

Tôi cũng có một bản tin miễn phí về hướng dẫn phát triển web (chủ yếu liên quan đến JavaScript).