เรียนรู้การวนซ้ำใน JavaScript จากภายในสู่ภายนอก

สิ่งที่ซับซ้อนที่สุดอย่างหนึ่งที่คุณจะพบในขณะที่เรียนรู้จาวาสคริปต์คือการวนซ้ำ ตอนนี้ บางคนอาจบอกว่าการวนซ้ำเป็นเรื่องง่าย แต่ฉันมีปัญหามากมายในขณะที่เรียนรู้การวนซ้ำใน JavaScript และฉันรู้ว่าพวกคุณหลายคนอาจยังคงประสบปัญหาเหล่านั้นอยู่

ดังนั้นฉันจะสอนคุณเกี่ยวกับลูปใน JavaScript ด้วยความตั้งใจที่จะมอบสิ่งที่ดีที่สุดให้กับคุณ ฉันจะพยายามเขียนบทความนี้โดยมีข้อสันนิษฐานว่าคุณไม่รู้อะไรเกี่ยวกับลูป

สำหรับลูป

for loop เป็นหนึ่งในลูปพื้นฐานที่คุณจะพบ สิ่งที่คุณจะไม่รู้เป็นเวลานานก็คือ JavaScript มี for loops สามประเภท ฉันจะแสดงให้คุณเห็นทั้งหมดนั้น

const num = 5

for(let i = 0 ; i < num ; i++) {
    console.log(i)
}

// 0 1 2 3 4

นี่เป็นรูปแบบพื้นฐานสำหรับ for-loop ตอนนี้ให้ฉันให้วิธีที่ง่ายกว่านี้แก่คุณในการทำความเข้าใจสิ่งนี้:

for( initialization, condition, increment/decrement )

ฉันคิดว่าโค้ดด้านบนช่วยให้เข้าใจได้ง่ายขึ้น ก่อนอื่น เรามี 'let i = 0' ซึ่งเป็นส่วนเริ่มต้นของเรา หรือพูดง่ายๆ ก็คือจุดเริ่มต้นที่ลูป จากนั้นเราก็มี 'i ‹ num ' ซึ่งเป็นเงื่อนไขการยุติลูปของเรา ตราบใดที่เป็นไปตามเงื่อนไขนี้ ลูปก็จะดำเนินต่อไป จากนั้นเราก็จะได้ส่วนที่สามและสุดท้ายของลูปซึ่งก็คือการเพิ่มขึ้นหรือลดลง

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

const num = 4

for( let i = 1; i <= 10; i++) {
    console.log(`${num} x ${i} = ${num * i}`)
}

/**

4 x 1 = 4
4 x 2 = 8
4 x 3 = 12
4 x 4 = 16
4 x 5 = 20
4 x 6 = 24
4 x 7 = 28
4 x 8 = 32
4 x 9 = 36
4 x 10 = 40

**/

ในโค้ดชิ้นนี้ ฉันใช้ for loop แบบง่ายเพื่อพิมพ์ตารางที่ 4 สำหรับการเขียนตาราง คุณจะต้องทำงานเดิมทั้งหมด 10 ครั้งเท่านั้น สมมติว่าคุณเริ่มจาก 1 ไม่ใช่จาก 0 ดังนั้นเงื่อนไขการเริ่มต้นและการยกเลิกจึงเปลี่ยนไปจากโค้ดชิ้นก่อนหน้า

ตอนนี้วงนี้ก็ดีและทั้งหมด คุณสามารถใช้มันในอาร์เรย์และวัตถุและอะไรก็ตาม สมมติว่าคุณรู้ว่าฉันจะไปยังจุดถัดไปเพื่อวนซ้ำได้อย่างไร ซึ่งเป็นวง for-in

for-in วนซ้ำ

แม้ว่าการเขียนโปรแกรมคุณไม่จำเป็นต้องใช้การวนซ้ำจนถึงตัวเลข แต่ส่วนใหญ่แล้วคุณใช้มันเพื่อวนซ้ำอาร์เรย์หรือวัตถุทั้งหมด ใน JavaScript เรามีสิ่งที่เรียกว่า for-in วนซ้ำ เรามาดูกันว่ามันทำงานอย่างไร

const arr = [ 2, 3, 5, 7, 11, 13, 17, 19]

for(let index in arr) {
    console.log(index)
}

// 0 1 2 3 4 5 6 7 

ที่นี่เรามี for-in loop ที่ใช้กับอาร์เรย์ของจำนวนเฉพาะที่น้อยกว่า 20 คุณจะเห็นว่า for-in loop พิจารณาสิ่งที่คุณประกาศให้เป็นดัชนีในกรณีของอาร์เรย์ พวกคุณที่รู้จัก Python บ้างอาจจะเคยใช้ for-in loops ไปแล้ว ส่วนใหญ่จะใช้กับฟังก์ชันช่วง มาดูกันว่าเราจะได้อะไรในกรณีของ Objects บ้าง

let obj = {
    Name: 'Gaurav',
    Religion: 'Hindu',
    Nationality: 'Indian',
    Age: '24',
    proffession: 'Software engineer',
    Hobby: ['Blogging', 'Reading', 'Technology']
}

 for(let index in obj) {
    console.log(index)
}

/**

Name
Religion
Nationality
Age
proffession
Hobby

**/


/**
You can get values of an object by using obj[index] 
**/

ในกรณีของ Objects เราได้รับคีย์แทนดัชนี โดยทั่วไปกล่าวว่าหากคุณกำลังจัดการกับอ็อบเจ็กต์ ให้ใช้ for-in loop ในกรณีของอาร์เรย์ ให้ใช้ for-of loop ซึ่งเป็นลูปถัดไป

for-ของวง

เช่นเดียวกับ for-in loop เราก็มี for-of loop ใน JavaScript เช่นกัน แต่ต่างจาก for-in loop ตรงที่ไม่สามารถใช้ในกรณีของอ็อบเจ็กต์ได้ หากคุณพยายามใช้พวกมันกับวัตถุ พวกมันจะแจ้งข้อผิดพลาดว่า 'วัตถุไม่สามารถทำซ้ำได้' แต่มันทำงานได้ดีในกรณีของอาเรย์ มาดูกันว่ามันจะเป็นอย่างไร

const arr = [ 2, 3, 5, 7, 11, 13, 17, 19]

for(let element of arr) {
    console.log(element)
}

// 2 3 5 7 11 13 17 19

ดังที่คุณเห็นผลลัพธ์จากตัวอย่างก่อนหน้านี้เมื่อใช้แทนการเปลี่ยนแปลงทั้งหมด ในกรณีนี้ สิ่งที่เราได้รับจะเทียบเท่ากับ 'arr[index]' เราเรียกมันว่าองค์ประกอบของอาร์เรย์ หรือเราสามารถพูดได้ว่า:

ผลลัพธ์ของ for-of loop == array [ไม่ว่าผลลัพธ์ของ for-in loop จะเป็นอย่างไร]

แม้ว่านั่นจะซับซ้อนเล็กน้อย แต่ฉันหวังว่าจะทำให้คุณเข้าใจว่าทำไม for-in loop ถึงเป็นที่ต้องการในวัตถุ แม้ว่าหากคุณต้องการดัชนีของอาร์เรย์ ก็ควรใช้ for loop แบบง่ายจะดีกว่า หากคุณต้องการจัดการกับองค์ประกอบของอาร์เรย์ for-of อาจเป็นสิ่งที่คุณต้องทำ

หมายเหตุ: คุณสามารถประกาศ for-in และ for-of loops ด้วย const ได้ แต่คุณไม่สามารถประกาศ for-in และ for-of loops ได้ง่ายๆ

ในขณะที่วนซ้ำ

ในขณะที่ลูปเป็นสิ่งที่เรียกได้ว่าเป็นโปรแกรมเมอร์นรก แม้ว่าแนวคิดจะค่อนข้างเหมือนกับการวนซ้ำก็ตาม มันซับซ้อนนิดหน่อย เชื่อหรือไม่ว่าโปรแกรมเมอร์ทำผิดพลาดมากมายในขณะที่จัดการกับ while loop

//your initialization goes here
while ( you terminating condition goes here ) {
     // whatever you want to do goes here;
  
   //you increment or decrement goes here
}

ตอนนี้เรามาเขียนตาราง 18 ด้วย while loop กันดีกว่า

let i = 1, num = 18
while( i <= 10) {
   console.log(`${num} x ${i} = ${num * i}`)
    i++
}

/**
18 x 1 = 18
18 x 2 = 36
18 x 3 = 54
18 x 4 = 72
18 x 5 = 90
18 x 6 = 108
18 x 7 = 126
18 x 8 = 144
18 x 9 = 162
18 x 10 = 180
**/

ตอนนี้เรามาลองทำข้อผิดพลาดในขณะที่วนซ้ำแล้วดูว่าจะเกิดอะไรขึ้น มาย้ายส่วนที่เพิ่มขึ้นก่อนคอนโซลกัน

let i = 1, num = 18
while( i <= 10) {
    i++;
   console.log(`${num} x ${i} = ${num * i}`);
    
}

/**
18 x 2 = 36
18 x 3 = 54
18 x 4 = 72
18 x 5 = 90
18 x 6 = 108
18 x 7 = 126
18 x 8 = 144
18 x 9 = 162
18 x 10 = 180
18 x 11 = 198
**/

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

สิ่งนี้เกิดขึ้นเมื่อเงื่อนไขและการเพิ่มขึ้น/ลดลงของคุณไม่ได้ถูกนำมาใช้อย่างถูกต้อง

ลองพิจารณาสถานการณ์:

let num = 10;
while( num > 8 ) {
    console.log("Keep printing this to console")
    num++;
}

อย่างที่คุณเห็นตัวเลขจะมากกว่า 8 เสมอในเงื่อนไขนี้ และเราจะเพิ่มตัวเลขให้มากขึ้นเสมอ ดังนั้นโอกาสที่มันจะน้อยกว่า 8 จึงไม่มีอยู่จริง ดังนั้นลูปจะยังคงทำงานต่อไปตลอดไปเว้นแต่คุณจะปิดมันลง

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

หมายเหตุ: ฉันพูดได้แค่ว่าใช้ while วนซ้ำด้วยความระมัดระวัง

ทำในขณะที่วนซ้ำ

ไม่ค่อยมีการใช้ do- While loop แต่ก็มีอยู่ ลองมาดูกันว่ามันแตกต่างจากการวนซ้ำแบบธรรมดาอย่างไร

let num = 5

do {
    num++
} while ( num <= 10)

console.log(num)

// 11

อย่างที่คุณเห็น Do- While Loop จะดำเนินการตามที่ร้องขอก่อน และหลังจากทำงานนั้น มันจะตรวจสอบว่าเป็นไปตามเงื่อนไขหรือไม่ ในการจัดการที่คุณต้องเขียนเงื่อนไขในลักษณะที่จะทำงานของคุณได้อย่างถูกต้อง พูดง่ายๆ ก็คือนักพัฒนาจะได้งานมากขึ้น

หมายเหตุ: ฉันไม่เคยใช้ do- While loop