- วิธีสร้างฟังก์ชันแผนที่สำหรับออบเจ็กต์ใน JavaScript
- สร้างฟังก์ชันแผนที่และแสดงแอตทริบิวต์
- การสร้างฟังก์ชันแผนที่และกำหนดค่าผ่าน map.set() ใน JavaScript
- Object.entries() วิธีการใน JavaScript
จะสร้างฟังก์ชั่นแผนที่สำหรับวัตถุใน JavaScript ได้อย่างไร?
JavaScript มีเมธอด map() สำหรับออบเจ็กต์ที่ทำงานร่วมกับคู่คีย์-ค่า เป็นประโยชน์สำหรับการดำเนินการต่างๆ กับออบเจ็กต์โดยใช้ค่าคีย์ มันทำงานคล้ายกับเมธอด array.map() โดยการวนซ้ำองค์ประกอบของออบเจกต์ เมื่อพิจารณาถึงฟังก์ชันแผนที่สำหรับอ็อบเจ็กต์แล้ว ไวยากรณ์จะถูกเขียนดังนี้
ไวยากรณ์
แผนที่ ( การทำงาน ( องค์ประกอบดัชนี )
ในไวยากรณ์นี้ the การทำงาน วนซ้ำมากกว่า ธาตุ ผ่าน ดัชนี ค่า.
บันทึก : ดิ แผนที่() เมธอดไม่ได้สร้างอ็อบเจ็กต์ใหม่แต่ปรับเปลี่ยนอ็อบเจ็กต์ที่มีอยู่ผ่านค่าดัชนี
ตัวอย่างที่ 1: สร้างฟังก์ชันแผนที่และแสดงแอตทริบิวต์
ตัวอย่างถูกดัดแปลงเพื่อสร้างฟังก์ชันแผนที่และกำหนดค่าต่างๆ ให้กับแอตทริบิวต์ map() วิธีการวนซ้ำแอตทริบิวต์ทั้งหมดของวัตถุ สุดท้าย แสดงแอตทริบิวต์ทั้งหมดพร้อมกับค่าในหน้าต่างคอนโซล รหัสต่อไปนี้มีการปฏิบัติดังนี้:
รหัส
คอนโซล บันทึก ( 'สร้างฟังก์ชันแผนที่สำหรับวัตถุ' ) ;ให้ Stud_Obj = {
'คณิตศาสตร์_มาร์ค' : 80 ,
'English_Marks' : 77 ,
'ฟิสิกส์_มาร์ค' : 90 } ;
วัตถุ . กุญแจ ( Stud_Obj ) . แผนที่ ( การทำงาน ( คีย์ ค่า ) {
} ) ;
คอนโซล บันทึก ( Stud_Obj ) ;
ในรหัสนี้:
- วัตถุถูกสร้างขึ้นด้วยชื่อ “Stud_Obj” และมีคุณลักษณะที่แตกต่างกัน ได้แก่ “Math_Marks”, “English_Marks” และ “ฟิสิกส์_มาร์ค”.
- คุณลักษณะเหล่านี้ประกอบด้วย different “80, 77 และ 90” ค่าที่กำหนดโดยเครื่องหมายทวิภาค
- หลังจากนั้น, Object.keys ใช้เพื่อคืนค่าแอตทริบิวต์ของวัตถุ “Stud_Obj”.
- แผนที่() ฟังก์ชันเรียกแอตทริบิวต์ทั้งหมดที่มีอยู่ในวัตถุผ่านคู่คีย์-ค่า
- ในที่สุด console.log() ใช้วิธีการแสดงวัตถุ “Stud_Obj” ในหน้าต่างคอนโซล
เอาท์พุต
ผลลัพธ์ส่งคืนแอตทริบิวต์ทั้งหมด “Math_Marks”, “English_Marks” และ “ฟิสิกส์_มาร์ค” ด้วยค่าที่กำหนดในหน้าต่างคอนโซล
ตัวอย่างที่ 2: สร้างฟังก์ชันแผนที่และกำหนดค่า
ตัวอย่างถูกใช้เพื่อสร้างวัตถุแผนที่ใหม่โดยใช้ ใหม่ คำสำคัญ. หลังจากนั้น map.set() เมธอดใช้เพื่อกำหนดแอตทริบิวต์ในโค้ด JavaScript
รหัส
คอนโซล บันทึก ( 'สร้างฟังก์ชันแผนที่สำหรับวัตถุ' ) ;ให้แผนที่ = ใหม่ แผนที่ ( ) ;
แผนที่. ชุด ( 'แฮรี่_ไอดี' , 04 ) ;
แผนที่. ชุด ( 'ปีเตอร์_ไอดี' , 08 ) ;
แผนที่. ชุด ( 'จอห์น_id' , 07 ) ;
ให้ obj_ids = Array . จาก ( แผนที่ ) . ลด ( ( obj_id, [ คีย์ ค่า ] ) => (
วัตถุ . กำหนด ( obj_id, { [ กุญแจ ] : ค่า } )
) , { } ) ;
คอนโซล บันทึก ( obj_ids ) ;
คำอธิบายของรหัสมีดังนี้:
- อา แผนที่ วัตถุถูกสร้างขึ้นด้วย a ใหม่ คำหลักที่วนซ้ำแอตทริบิวต์ของวัตถุ
- หลังจากนั้น map.set() วิธีการถูกใช้โดยการกำหนดคุณสมบัติ “แฮรี่_ไอดี” , “ปีเตอร์_id” และ “จอห์น_id”.
- คุณลักษณะเหล่านี้มีค่าที่ไม่ซ้ำกันรวมทั้ง “04”, “08”, และ “07” ตามลำดับ
- นอกจากนี้ Array.from() วิธีการส่งคืนอาร์เรย์จาก แผนที่ วัตถุ.
- หลังจากนั้น ลด() วิธีการเรียกกลับ obj_ids และแยกคุณลักษณะทั้งหมดด้วย ค่า .
- ดิ Object.assign() วิธีตั้งค่าเฉพาะให้กับแต่ละแอตทริบิวต์ผ่าน กุญแจ .
- ในที่สุด console.log() วิธีการแสดงคุณลักษณะทั้งหมดของ วัตถุ โดยผ่าน “obj_ids” .
เอาท์พุต
ตัวอย่างที่ 3: เมธอด Object.entries() ใน JavaScript
JavaScript ให้ Object.entries() วิธีการและส่งคืนแอตทริบิวต์ทั้งหมดของวัตถุตาม คีย์-ค่า คู่ โดยพิจารณาจาก Object.entries() วิธีเขียนโค้ดดังนี้
รหัส
คอนโซล บันทึก ( 'สร้างฟังก์ชันแผนที่สำหรับวัตถุ' ) ;const sports_obj = {
แรก : 'คริกเก็ต' ,
ที่สอง : 'ฟุตบอล' ,
ที่สาม : 'ฮอกกี้' ,
}
const ม = แผนที่ใหม่ ( วัตถุ . รายการ ( sports_obj ) ) ;
คอนโซล บันทึก ( ม ) ;
คำอธิบายของรหัสมีดังนี้:
- ประการแรก วัตถุ “sports_obj” ถูกสร้างขึ้นด้วยคุณลักษณะต่างๆ “ครั้งแรก” “ที่สอง” และ 'ที่สาม'.
- คุณลักษณะเหล่านี้มีค่าต่างกันเช่น “คริกเก็ต”, “ฟุตบอล” และ 'ฮอกกี้'.
- หลังจากนั้น Object.entries() วิธีการรับวัตถุ “sports_obj” และส่งคืนแอตทริบิวต์ทั้งหมดและเก็บไว้ในตัวแปร “ม”.
- ในที่สุด console.log() มีการใช้เมธอดเพื่อแสดงรายการคุณสมบัติของอ็อบเจ็กต์ในหน้าต่างคอนโซล
เอาท์พุต
ผลลัพธ์แสดงจำนวนแอตทริบิวต์เป็น '3' และแสดงแอตทริบิวต์ทั้งหมดที่มีค่าในหน้าต่างคอนโซล
บทสรุป
JavaScript ให้ แผนที่() วิธีการสร้างฟังก์ชันแผนที่เพื่อโต้ตอบกับคุณสมบัติของวัตถุ มันวนซ้ำแอตทริบิวต์ทั้งหมดของวัตถุโดยใช้ค่าคีย์ นอกจากนี้ map.set() วิธีการใช้เพื่อกำหนดคุณสมบัติของวัตถุ นอกจากนี้ Object.entries() วิธีการส่งคืนแอตทริบิวต์ทั้งหมดของวัตถุหลังจากสร้างฟังก์ชันแผนที่ใน JavaScript บทความนี้สาธิตการสร้างฟังก์ชันแผนที่สำหรับออบเจ็กต์และแสดงแอตทริบิวต์ทั้งหมดของออบเจ็กต์ในหน้าต่างคอนโซล