13 KiB

Raw Permalink Blame History

พื้นฐาน JavaScript: อาเรย์และลูป

สเก็ตโน้ตโดย Tomomi Imura

แบบทดสอบก่อนเรียน

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

🎥 คลิกที่ภาพด้านบนเพื่อดูวิดีโอเกี่ยวกับอาเรย์และลูป

คุณสามารถเรียนบทเรียนนี้ได้ที่ Microsoft Learn!

อาเรย์

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

✅ อาเรย์มีอยู่รอบตัวเรา! คุณนึกถึงตัวอย่างอาเรย์ในชีวิตจริงได้ไหม เช่น แผงโซลาร์เซลล์ที่เรียงกันเป็นอาเรย์?

ไวยากรณ์ของอาเรย์คือการใช้วงเล็บเหลี่ยมคู่

let myArray = [];

นี่คือตัวอย่างอาเรย์เปล่า แต่คุณสามารถประกาศอาเรย์ที่มีข้อมูลอยู่แล้วได้ ค่าหลายค่าในอาเรย์จะถูกคั่นด้วยเครื่องหมายจุลภาค

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

ค่าของอาเรย์จะถูกกำหนดค่าที่ไม่ซ้ำกันเรียกว่า ดัชนี (index) ซึ่งเป็นตัวเลขจำนวนเต็มที่กำหนดตามระยะห่างจากจุดเริ่มต้นของอาเรย์ ในตัวอย่างด้านบน ค่าสตริง "Chocolate" มีดัชนีเป็น 0 และดัชนีของ "Rocky Road" คือ 4 คุณสามารถใช้ดัชนีร่วมกับวงเล็บเหลี่ยมเพื่อดึง เปลี่ยน หรือเพิ่มค่าของอาเรย์ได้

✅ คุณแปลกใจไหมที่ดัชนีของอาเรย์เริ่มต้นที่ 0? ในบางภาษาการเขียนโปรแกรม ดัชนีเริ่มต้นที่ 1 มีประวัติที่น่าสนใจเกี่ยวกับเรื่องนี้ ซึ่งคุณสามารถ อ่านเพิ่มเติมได้ใน Wikipedia

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

คุณสามารถใช้ดัชนีเพื่อเปลี่ยนค่าได้ เช่นนี้:

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

และคุณสามารถเพิ่มค่าใหม่ในดัชนีที่กำหนดได้ เช่นนี้:

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ วิธีที่พบบ่อยกว่าในการเพิ่มค่าในอาเรย์คือการใช้ตัวดำเนินการอาเรย์ เช่น array.push()

หากต้องการทราบจำนวนรายการในอาเรย์ ให้ใช้คุณสมบัติ length

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

✅ ลองทำด้วยตัวเอง! ใช้คอนโซลของเบราว์เซอร์เพื่อสร้างและจัดการอาเรย์ที่คุณสร้างขึ้นเอง

ลูป

ลูปช่วยให้เราทำงานที่ซ้ำซ้อนหรือ วนซ้ำ ได้ และช่วยประหยัดเวลาและโค้ดได้มาก การวนซ้ำแต่ละครั้งสามารถเปลี่ยนแปลงตัวแปร ค่า และเงื่อนไขได้ มีลูปหลายประเภทใน JavaScript ซึ่งแต่ละประเภทมีความแตกต่างเล็กน้อย แต่โดยพื้นฐานแล้วทำหน้าที่เหมือนกัน: วนซ้ำข้อมูล

For Loop

for loop ต้องการ 3 ส่วนในการวนซ้ำ:

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

// Counting up to 10
for (let i = 0; i < 10; i++) {
  console.log(i);
}

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

While loop

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

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

✅ ทำไมคุณถึงเลือกใช้ for loop แทน while loop? มีผู้ชม 17,000 คนที่มีคำถามเดียวกันใน StackOverflow และบางความคิดเห็น อาจน่าสนใจสำหรับคุณ

ลูปและอาเรย์

อาเรย์มักถูกใช้ร่วมกับลูป เพราะเงื่อนไขส่วนใหญ่ต้องการความยาวของอาเรย์เพื่อหยุดลูป และดัชนีสามารถใช้เป็นค่าของตัวนับได้

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed

✅ ลองทดลองวนซ้ำอาเรย์ที่คุณสร้างขึ้นเองในคอนโซลของเบราว์เซอร์

🚀 ความท้าทาย

ยังมีวิธีอื่นๆ ในการวนซ้ำอาเรย์นอกเหนือจาก for และ while loop เช่น forEach, for-of, และ map ลองเขียนลูปอาเรย์ของคุณใหม่โดยใช้เทคนิคเหล่านี้

แบบทดสอบหลังเรียน

ทบทวนและศึกษาด้วยตัวเอง

อาเรย์ใน JavaScript มีเมธอดมากมายที่มีประโยชน์อย่างยิ่งสำหรับการจัดการข้อมูล อ่านเพิ่มเติมเกี่ยวกับเมธอดเหล่านี้ และลองใช้บางเมธอด (เช่น push, pop, slice และ splice) กับอาเรย์ที่คุณสร้างขึ้นเอง

งานที่ได้รับมอบหมาย

วนซ้ำอาเรย์

ข้อจำกัดความรับผิดชอบ:
เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI Co-op Translator แม้ว่าเราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นทางควรถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลภาษาจากผู้เชี่ยวชาญ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดซึ่งเกิดจากการใช้การแปลนี้

13 KiB Raw Permalink Blame History