Map JavaScript:Hướng dẫn về phương thức .map ()

Các lập trình viên muốn giảm bớt sự lặp lại trong mã của họ. Bạn càng lặp lại mã của mình, thì mã đó càng kém khả năng bảo trì và các chương trình của bạn sẽ chạy càng chậm. Đó là lý do tại sao có nhiều phương pháp khác nhau trong JavaScript để lặp qua các tập dữ liệu.

Một trong những phương thức này được gọi là map() phương pháp. Phương thức này lặp qua một mảng hiện có và thực hiện một chức năng cụ thể trên tất cả các mục trong mảng đó.

Trong hướng dẫn này, chúng ta sẽ nói về cách sử dụng JavaScript map() chức năng. Chúng ta sẽ xem xét ba ví dụ phổ biến của map() hoạt động để giúp bạn bắt đầu.

Chức năng của bản đồ là gì?

JavaScript map() phương thức gọi một hàm cụ thể trên mỗi mục trong một mảng. Kết quả của hàm này sau đó được chuyển vào mảng của chính nó.

Ví dụ:giả sử bạn muốn nhân mọi mục trong một mảng với hai. Bạn có thể làm như vậy bằng cách tạo một hàm nhân mỗi mục của mảng với hai và chuyển hàm đó vào một map() phương pháp.

Cú pháp của map() chức năng là:

const newArray = oldArray.map(function, thisValue);

function là hàm gọi lại sẽ được chạy trên từng phần tử trong mảng. Để tìm hiểu thêm về các hàm, bạn có thể đọc hướng dẫn cuối cùng của chúng tôi về các hàm JavaScript. thisValue là giá trị mặc định sẽ được lưu trữ trong this biến trong hàm. Theo mặc định, điều này là không xác định.

Phương thức bản đồ tạo một mảng mới dựa trên kết quả của hàm gọi lại.

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

map() phương pháp có một số cách sử dụng. Phổ biến nhất là gọi một hàm trên danh sách các phần tử của mảng. Ví dụ về điều này sẽ là nhân mọi số trong danh sách các số hoặc tìm độ dài của mỗi chuỗi trong danh sách các chuỗi.

Bạn cũng sẽ tìm thấy hàm được sử dụng để hiển thị danh sách trong các thư viện JavaScript như React hoặc Vue.js.

Gọi một hàm với bản đồ

map() cho phép bạn thực hiện một tác vụ lặp đi lặp lại trên mọi mục trong danh sách, điều này làm cho nó hữu ích trong một số trường hợp.

Giả sử bạn sở hữu một cửa hàng bánh quy và bạn sẽ tăng giá của mỗi chiếc bánh quy lên 5%. Thay vì tính toán tất cả các mức giá mới riêng lẻ, bạn có thể sử dụng map() phương pháp.

Đây là mã bạn sẽ sử dụng:

const cookiePrices = [1.50, 1.75, 1.60, 2.00, 2.05, 1.45];
const newCookiePrices = cookiePrices.map(cookie => {
	var price = cookie * 1.05;
	return price.toFixed(2);
});

console.log(newCookiePrices);

Mã của chúng tôi trả về:

["1.58", "1.84", "1.68", "2.10", "2.15", "1.52"]

Trong ví dụ này, chúng tôi đã tăng giá của mỗi cookie lên 5%. Đầu tiên, chúng tôi đã khai báo danh sách giá cookie trong biến “cookiePrices”. Sau đó, chúng tôi sử dụng map() có chức năng tính toán mức tăng giá 5% cho mỗi cookie.

“Cookie * 1.05” đã tính toán mức tăng phần trăm, sau đó chúng tôi trả lại mức tăng đó, làm tròn đến hai chữ số thập phân gần nhất. Cuối cùng, chúng tôi in mảng mới vào bảng điều khiển bằng cách sử dụng console.log() phương pháp.

Chúng tôi cũng có thể chuyển chức năng của mình thành chức năng riêng của nó để làm cho mã của chúng tôi dễ đọc hơn:

function calculateIncrease(cookie) {
	var price = cookie * 1.05;
	return price.toFixed(2);
}

const cookiePrices = [1.50, 1.75, 1.60, 2.00, 2.05, 1.45];
const newCookiePrices = cookiePrices.map(calculateIncrease);

console.log(newCookiePrices);

Mã của chúng tôi trả về các giá trị giống như trước đó, nhưng dễ đọc hơn:

["1.58", "1.84", "1.68", "2.10", "2.15", "1.52"]

Thay đổi các mục trong một mảng

map() phương thức này thường được sử dụng để thay đổi các mục trong một mảng. Giả sử rằng cửa hàng bán bánh quy của chúng tôi đang xây dựng một chương trình khách hàng thân thiết cho khách hàng của mình. Mỗi cookie bạn mua sẽ giúp bạn kiếm được 10 điểm và nếu bạn kiếm được 100 điểm, bạn sẽ kiếm được một cookie miễn phí.

Chương trình sau sẽ cho phép chúng tôi thực hiện nhiệm vụ này:

var customers = [
	{ name: "Hannah Geoffrey", cookiesPurchased: 2 },
	{ name: "Peter Clarkson", cookiesPurchased: 3 },
	{ name: "Steven Hanson", cookiesPurchased: 7 }
]

function calculateLoyaltyPoints(customer) {
	var newCustomer = {
		name: customer.name,
		cookiesPurchased: customer.cookiesPurchased,
		points: customer.cookiesPurchased * 10
	}

	return newCustomer;
}

var customersWithPoints = customers.map(calculateLoyaltyPoints);

console.log(customersWithPoints);

Mã của chúng tôi trả về:

[{ cookiesPurchased: 2, name: "Hannah Geoffrey", points: 20 }, { cookiesPurchased: 3, name: "Peter Clarkson", points: 30 }, { cookiesPurchased: 7, name: "Steven Hanson", points: 70 }]

Trong ví dụ này, chúng tôi đã tính toán tổng số điểm mà mỗi khách hàng sẽ được thưởng dựa trên số lượng cookie họ đã mua.

Đầu tiên, chúng tôi khai báo một mảng các đối tượng được gọi là “khách hàng”. Danh sách này lưu trữ tên của các khách hàng của chúng tôi và số lượng cookie họ đã mua bằng cách sử dụng cặp khóa:giá trị.

Sau đó, chúng tôi đã khai báo một hàm có tên là calculateLoyaltyPoints() . Chức năng này thêm một mặt hàng mới vào mỗi mặt hàng của khách hàng được gọi là “điểm” được tính bằng cách nhân số lượng cookie mà mỗi khách hàng đã mua với 10.

Chúng tôi sử dụng map() để lặp lại danh sách khách hàng của chúng tôi và áp dụng calculateLoyaltyPoints() của chúng tôi chức năng. Cuối cùng, chúng tôi in ra danh sách khách hàng đã sửa đổi. Danh sách này hiện phản ánh giá trị “điểm” mà chúng tôi đã thêm vào mỗi mục nhập của khách hàng.

Hiển thị danh sách bằng thư viện

map() phương thức thường được sử dụng trong các thư viện JavaScript như React. Mục đích của phương pháp này là hiển thị các mục trong danh sách. Hãy xem qua một ví dụ về map() trong React.

Giả sử chúng tôi muốn hiển thị danh sách các cookie mà cửa hàng của chúng tôi bán trên trang web của chúng tôi. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:

import React from "react";
import ReactDOM from "react-dom";

var cookies = ["Raspberry Chocolate Chip", "White Chocolate Chip", "Oat", "Milk Chocolate Chip"];

const CookieList = () => (
	<div>
		<ul>{cookies.map((cookie, i) => 
			<li key={i}>{cookie}</li>
		       )}
		</ul>
	</div>
);

const root = document.getElementById("root");
ReactDOM.render(<CookieList />, root);

Đoạn mã này tạo ra một thành phần trong React để hiển thị một danh sách. Mỗi mục danh sách được chứa trong thẻ