วิธี map

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

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

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

ไวยากรณ์

let อาร์เรย์ใหม่ = อาร์เรย์.map(function(องค์ประกอบ, ดัชนี, อาร์เรย์) {
	โค้ด
	return องค์ประกอบที่ถูกเปลี่ยน;
});

ตัวอย่าง

มาสร้างอาร์เรย์ โดยที่แต่ละองค์ประกอบ มีค่ามากเป็นสองเท่าขององค์ประกอบที่ตรงกัน ในอาร์เรย์เริ่มต้น:

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

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

console.log(res);

ผลลัพธ์จากการรันโค้ด:

[2, 4, 6, 8, 10]

ตัวอย่าง

มาสร้างอาร์เรย์ โดยที่แต่ละองค์ประกอบ ได้มาโดยการนำค่าขององค์ประกอบมาคูณ กับลำดับที่ในอาร์เรย์:

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

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

console.log(res);

ผลลัพธ์จากการรันโค้ด:

[0, 2, 6, 12, 20]

ตัวอย่าง

หากจำเป็น คุณสามารถส่งอาร์เรย์เอง เข้าไปในพารามิเตอร์ที่สามได้:

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

let res = arr.map(function(elem, index, arr) {
	// อาร์เรย์ arr จะสามารถเข้าถึงได้ที่นี่
});

ตัวอย่าง

วิธี map ยังสามารถใช้สำหรับ การวนลูปอาร์เรย์หลายมิติได้ สมมติเช่น มีอาร์เรย์ดังต่อไปนี้:

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

ลองวนลูปอาร์เรย์นี้ผ่าน map และแสดงองค์ประกอบของมันในคอนโซล:

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

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

ผลลัพธ์ console.log จะแสดง [1, 2, 3], ตามด้วย [4, 5, 6], แล้วก็ [7, 8, 9]

อย่างที่คุณเห็น ตัวแปร elem จะได้รับ อาร์เรย์ย่อย คราวนี้ลองใช้วิธี map กับแต่ละอาร์เรย์ย่อย และยกกำลังสอง แต่ละองค์ประกอบของมัน:

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

ดูเพิ่มเติม

วิธี forEach,
ซึ่งใช้ฟังก์ชันสำหรับแต่ละองค์ประกอบของอาร์เรย์
วิธี filter,
ซึ่งช่วยกรององค์ประกอบของอาร์เรย์
วิธี some และ every,
ทำการตรวจสอบอาร์เรย์
วิธี reduce และ reduceRight,
ย่ออาร์เรย์ให้เหลือค่าเดียว