วิธีการวนซ้ำวัตถุ JavaScript ธรรมดา

Withi Kar Wn Sa Watthu Javascript Thrrmda



ในภาษา JavaScript วัตถุคือการรวบรวมข้อมูลเฉพาะ การรวบรวมข้อมูลเหล่านี้มีลักษณะตั้งแต่หนึ่งอย่างขึ้นไปที่กำหนด เช่นเดียวกับวิธีการดำเนินการงานทั่วไป อย่างไรก็ตาม การวนซ้ำชุดข้อมูลที่นับได้นั้นเป็นปัญหาทั่วไปสำหรับโปรแกรมเมอร์ เมื่อได้ยินคำว่า “ ห่วง ” ใน JavaScript โดยทั่วไปโปรแกรมเมอร์จะนึกถึงการวนซ้ำหลายๆ รอบ เช่น for loop, forEach(), map() และอื่นๆ น่าเสียดายที่เมธอดเหล่านี้ใช้ไม่ได้กับออบเจกต์เนื่องจากออบเจ็กต์ไม่สามารถทำซ้ำได้

บทช่วยสอนนี้จะสาธิตวิธีวนซ้ำ/วนซ้ำผ่านออบเจกต์ JavaScript อย่างง่าย

จะวนซ้ำวัตถุ JavaScript ธรรมดา / ธรรมดาได้อย่างไร

หากต้องการวนซ้ำ/วนซ้ำผ่านวัตถุ JavaScript อย่างง่าย ให้ใช้วิธีการต่อไปนี้:







วิธีที่ 1: วนซ้ำผ่านวัตถุ JavaScript ธรรมดา/ธรรมดาโดยใช้ for-in Loop

ในการวนซ้ำวัตถุ ให้ใช้ลูป 'for-in' มันวนซ้ำแอตทริบิวต์สตริงที่นับได้ทั้งหมดของวัตถุที่เกี่ยวข้องกับวัตถุ



ไวยากรณ์
ใช้ไวยากรณ์ที่ให้ไว้เพื่อใช้ for-in loop สำหรับการวนซ้ำผ่านอ็อบเจกต์:



สำหรับ ( ตัวแปร ใน วัตถุ )

ตัวอย่าง
สร้างวัตถุที่มีคุณสมบัติในคู่ของคีย์-ค่า:





เคยเป็น วัตถุ = {
'จาวาสคริปต์' : หนึ่ง ,
'ชวา' : 5 ,
'งูหลาม' : ยี่สิบ ,
'เอชทีเอ็มแอล' : 2 ,
'ซีเอสเอส' : สิบเอ็ด
}

วนซ้ำวัตถุตามคีย์ของวัตถุ:

สำหรับ ( คอสต์ กุญแจ ใน วัตถุ ) {
คอนโซล บันทึก ( `$ { กุญแจ } : $ { วัตถุ [ กุญแจ ] } ` ) ;
}

เอาต์พุตแสดงคุณลักษณะทั้งหมดของวัตถุในคู่คีย์-ค่า:



วิธีที่ 2: วนซ้ำผ่านวัตถุ JavaScript แบบธรรมดา/แบบธรรมดาโดยใช้วิธี Object.keys()

แต่ละคุณสมบัติในวัตถุมีค่าที่สอดคล้องกัน หมายความว่าแต่ละคุณสมบัติประกอบด้วยคู่ของคีย์-ค่า คุณสามารถแยกคีย์ ค่า หรือทั้งคีย์และค่าเป็นรายการในอาร์เรย์โดยใช้วิธีการแบบคงที่ของวัตถุ หากคุณต้องการดึงคีย์ของวัตถุ ให้ใช้ปุ่ม “ Object.keys() ' กระบวนการ.

ไวยากรณ์
ทำตามไวยากรณ์ที่กำหนดเพื่อวนซ้ำวัตถุเพื่อดึงคุณสมบัติ/คีย์ของวัตถุ:

วัตถุ . กุญแจ ( วัตถุ )

ตัวอย่าง
เรียกใช้เมธอด Object.keys() และเก็บอาร์เรย์ผลลัพธ์ของคีย์ของวัตถุในตัวแปร “ objKeys ”:

คอสต์ objKeys = วัตถุ . กุญแจ ( วัตถุ ) ;

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

วิธีที่ 3: วนซ้ำผ่านวัตถุ JavaScript แบบธรรมดา/แบบง่ายโดยใช้เมธอด Object.values()

ในการรับค่าของวัตถุเทียบกับคุณสมบัติของมัน ให้ใช้ปุ่ม ' Object.values() ' กระบวนการ. มันคืนอาร์เรย์ของค่าสำหรับคุณสมบัติ/คีย์ของวัตถุ

ไวยากรณ์
ไวยากรณ์ที่กำหนดใช้เพื่อรับค่าของวัตถุโดยการวนซ้ำผ่านวัตถุ:

วัตถุ . ค่า ( วัตถุ )

ตัวอย่าง
เรียกใช้เมธอด Object.values() เพื่อรับค่าของวัตถุเทียบกับคุณสมบัติของมัน:

คอสต์ objค่า = วัตถุ . ค่า ( วัตถุ ) ;

ผลลัพธ์แสดงอาร์เรย์ของค่าเทียบกับคุณสมบัติของวัตถุ:

วิธีที่ 4: วนซ้ำผ่านวัตถุ JavaScript แบบธรรมดา/แบบธรรมดาโดยใช้เมธอด Object.entries()

คุณยังสามารถวนซ้ำผ่านวัตถุ JavaScript แบบธรรมดา/แบบธรรมดาได้โดยใช้ ' Object.entries() ' กระบวนการ. มันสร้างอาร์เรย์ของอาร์เรย์ย่อยที่มีคู่คีย์-ค่าของวัตถุที่กำหนด

ไวยากรณ์
ไวยากรณ์ต่อไปนี้ใช้เพื่อรับรายการของวัตถุโดยการวนซ้ำวัตถุ:

วัตถุ . รายการ ( วัตถุ )

ตัวอย่าง
เรียกใช้เมธอด Object.entries() บนวัตถุเพื่อดึงรายการทั้งหมดของวัตถุ:

คอสต์ objรายการ = วัตถุ . รายการ ( วัตถุ ) ;

เอาต์พุต

เราได้รวบรวมข้อมูลที่จำเป็นทั้งหมดที่เกี่ยวข้องกับการวนซ้ำออบเจกต์ JavaScript ธรรมดาที่มีออบเจ็กต์เป็นสมาชิก

บทสรุป

หากต้องการวนซ้ำวัตถุ JavaScript ธรรมดา/ธรรมดา ให้ใช้ปุ่ม “ สำหรับใน ” ห่วง “ Object.keys() ' กระบวนการ, ' Object.values() ” วิธีการ หรือ “ Object.entries() ' กระบวนการ. มีการใช้เมธอด for-in และ Object.entries() เพื่อรับคู่คีย์-ค่าทั้งหมดในวัตถุ ในขณะที่ Object.keys() ใช้สำหรับรับคีย์และ Object.values() สำหรับค่าของ วัตถุ บทช่วยสอนนี้แสดงวิธีต่างๆ ในการวนซ้ำออบเจกต์ JavaScript อย่างง่าย