Map JavaScript:คำแนะนำเกี่ยวกับเมธอด .map()

โปรแกรมเมอร์ต้องการลดการซ้ำซ้อนในโค้ดของตน ยิ่งคุณทำซ้ำรหัสของคุณมากเท่าไหร่ ก็ยิ่งบำรุงรักษาน้อยลงเท่านั้น และโปรแกรมของคุณก็จะทำงานช้าลง นั่นเป็นเหตุผลว่าทำไม JavaScript จึงมีเมธอดต่างๆ ในการวนซ้ำผ่านชุดข้อมูล

วิธีหนึ่งเหล่านี้เรียกว่า map() กระบวนการ. เมธอดนี้วนซ้ำผ่านอาร์เรย์ที่มีอยู่และดำเนินการฟังก์ชันเฉพาะกับรายการทั้งหมดในอาร์เรย์นั้น

ในคู่มือนี้ เราจะพูดถึงวิธีใช้ JavaScript map() การทำงาน. เราจะพูดถึงสามตัวอย่างทั่วไปของ map() ใช้งานได้จริงเพื่อช่วยให้คุณเริ่มต้นได้

หน้าที่ของแผนที่คืออะไร

JavaScript map() method เรียกฟังก์ชันเฉพาะของแต่ละรายการในอาร์เรย์ ผลลัพธ์ของฟังก์ชันนี้จะถูกย้ายไปยังอาร์เรย์ของตัวเอง

ตัวอย่างเช่น สมมติว่าคุณต้องการคูณทุกรายการในอาร์เรย์ด้วยสอง คุณสามารถทำได้โดยการสร้างฟังก์ชันที่คูณทุกรายการอาร์เรย์ด้วยสอง และย้ายฟังก์ชันนั้นไปที่ map() กระบวนการ.

ไวยากรณ์ของ map() ฟังก์ชันคือ:

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

function เป็นฟังก์ชันเรียกกลับที่จะทำงานบนแต่ละองค์ประกอบในอาร์เรย์ หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับฟังก์ชัน คุณสามารถอ่านคำแนะนำขั้นสูงสุดของเราเกี่ยวกับฟังก์ชัน JavaScript thisValue เป็นค่าเริ่มต้นที่จะเก็บไว้ใน this ตัวแปรในฟังก์ชัน โดยค่าเริ่มต้น สิ่งนี้ไม่ได้กำหนดไว้

เมธอดของแผนที่จะสร้างอาร์เรย์ใหม่ตามผลลัพธ์ของฟังก์ชันการโทรกลับ

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

map() วิธีการมีประโยชน์หลายอย่าง ที่พบบ่อยที่สุดคือการเรียกใช้ฟังก์ชันในรายการองค์ประกอบอาร์เรย์ ตัวอย่างนี้จะเป็นการคูณตัวเลขทุกตัวในรายการตัวเลข หรือการหาความยาวของแต่ละสตริงในรายการสตริง

คุณยังจะพบฟังก์ชันที่ใช้แสดงรายการในไลบรารี JavaScript เช่น React หรือ Vue.js

การเรียกใช้ฟังก์ชันด้วยแผนที่

map() วิธีช่วยให้คุณทำงานซ้ำ ๆ กับทุกรายการในรายการ ซึ่งทำให้มีประโยชน์ในหลายกรณี

สมมติว่าคุณเป็นเจ้าของร้านคุกกี้ และคุณจะขึ้นราคาคุกกี้แต่ละรายการขึ้น 5% แทนที่จะคำนวณราคาใหม่ทั้งหมดทีละรายการ คุณสามารถใช้ map() กระบวนการ.

นี่คือรหัสที่คุณจะใช้:

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

รหัสของเราส่งคืน:

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

ในตัวอย่างนี้ เราได้เพิ่มราคาของทุกคุกกี้ขึ้น 5% อันดับแรก เราประกาศรายการราคาคุกกี้ในตัวแปร “ราคาคุกกี้” จากนั้น เราใช้ map() เมธอดที่มีฟังก์ชันคำนวณราคาเพิ่มขึ้น 5% สำหรับแต่ละคุกกี้

“คุกกี้ * 1.05” คำนวณเปอร์เซ็นต์การเพิ่มขึ้น จากนั้นเราส่งคืนการเพิ่มขึ้นนั้น ปัดเศษเป็นทศนิยมสองตำแหน่งที่ใกล้ที่สุด สุดท้าย เราพิมพ์อาร์เรย์ใหม่ไปยังคอนโซลโดยใช้ console.log() กระบวนการ.

นอกจากนี้เรายังสามารถย้ายฟังก์ชันของเราไปเป็นฟังก์ชันของตัวเองเพื่อให้โค้ดของเราอ่านง่ายขึ้น:

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

รหัสของเราคืนค่าเดิมจากก่อนหน้านี้ แต่อ่านง่ายกว่า:

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

เปลี่ยนรายการในอาร์เรย์

map() วิธีมักใช้เพื่อเปลี่ยนรายการในอาร์เรย์ สมมติว่าร้านคุกกี้ของเรากำลังสร้างโปรแกรมความภักดีสำหรับลูกค้า ทุกคุกกี้ที่คุณซื้อจะได้รับ 10 คะแนน และหากคุณได้รับ 100 คะแนน คุณจะได้รับคุกกี้ฟรี

โปรแกรมต่อไปนี้จะช่วยให้เราทำงานนี้ได้สำเร็จ:

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

รหัสของเราส่งคืน:

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

ในตัวอย่างนี้ เราได้คำนวณจำนวนคะแนนทั้งหมดที่ลูกค้าแต่ละรายควรได้รับตามจำนวนคุกกี้ที่พวกเขาซื้อ

ขั้นแรก เราประกาศอาร์เรย์ของอ็อบเจ็กต์ที่เรียกว่า "ลูกค้า" รายการนี้เก็บชื่อลูกค้าของเราและจำนวนคุกกี้ที่พวกเขาซื้อโดยใช้คู่คีย์:ค่า

จากนั้น เราประกาศฟังก์ชันชื่อ calculateLoyaltyPoints() . ฟังก์ชันนี้จะเพิ่มรายการใหม่ให้กับสินค้าของลูกค้าแต่ละรายที่เรียกว่า "คะแนน" ซึ่งคำนวณโดยการคูณจำนวนคุกกี้ที่ลูกค้าแต่ละรายซื้อด้วย 10

เราใช้ map() วิธีการทำซ้ำผ่านรายชื่อลูกค้าของเราและใช้ calculateLoyaltyPoints() การทำงาน. สุดท้าย เราพิมพ์รายชื่อลูกค้าที่แก้ไขแล้ว รายการนี้สะท้อนมูลค่า "คะแนน" ที่เราเพิ่มเข้าไปในรายการของลูกค้าแต่ละราย

แสดงรายการโดยใช้ไลบรารี

map() เมธอดมักใช้ในไลบรารี JavaScript เช่น React จุดประสงค์ของวิธีนี้คือการแสดงรายการในรายการ มาดูตัวอย่าง map() . กัน ในปฏิกิริยา

สมมติว่าเราต้องการแสดงรายการคุกกี้ที่ร้านค้าของเราขายบนเว็บไซต์ของเรา เราสามารถทำได้โดยใช้รหัสนี้:

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

รหัสนี้สร้างส่วนประกอบใน React ซึ่งแสดงรายการ แต่ละรายการอยู่ภายในแท็ก