HomeLập trìnhJavaScriptBản đồ JavaScript...

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];
Một mảng JavaScript đơn giản

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]
Lặp lại một mảng bằng vòng lặp for

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]
Lặp lại một mảng bằng phương thức map()

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 thêm  Hướng dẫn về khóa đối tượng JavaScript – Cách sử dụng cặp khóa-giá trị JS

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ữ firstNamelastName 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"}
];

Một mảng các đối tượng

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 firstNamelastName 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"]
Sử dụng phương thức map() để lặp qua một mảng các đối tượng

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);
Gán giá trị số cho phương thức map() đối số này

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);
Ghi nhật ký các đối số để xem các giá trị

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 thêm  Cách tạo con trỏ chuột tùy chỉnh bằng CSS và JavaScript

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).



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status