30 KiB

Raw Permalink Blame History

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

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

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

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

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

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

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

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

อาร์เรย์

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

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

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

การสร้างอาร์เรย์

การสร้างอาร์เรย์นั้นง่ายมาก - เพียงแค่ใช้วงเล็บเหลี่ยม!

// Empty array - like an empty shopping cart waiting for items
const myArray = [];

เกิดอะไรขึ้นที่นี่? คุณเพิ่งสร้างภาชนะเปล่าด้วยวงเล็บเหลี่ยม [] ลองนึกถึงมันเหมือนชั้นวางหนังสือเปล่า - พร้อมที่จะเก็บหนังสืออะไรก็ได้ที่คุณต้องการจัดระเบียบไว้ที่นั่น

คุณยังสามารถเติมค่าเริ่มต้นในอาร์เรย์ได้ตั้งแต่เริ่มต้น:

// Your ice cream shop's flavor menu
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// A user's profile info (mixing different types of data)
const userData = ["John", 25, true, "developer"];

// Test scores for your favorite class
const scores = [95, 87, 92, 78, 85];

สิ่งที่น่าสังเกต:

คุณสามารถเก็บข้อความ ตัวเลข หรือแม้กระทั่งค่าจริง/เท็จในอาร์เรย์เดียวกัน
เพียงแค่แยกแต่ละรายการด้วยเครื่องหมายจุลภาค - ง่ายมาก!
อาร์เรย์เหมาะสำหรับการเก็บข้อมูลที่เกี่ยวข้องไว้ด้วยกัน

การเข้าถึงอาร์เรย์ด้วยดัชนี

นี่คือสิ่งที่อาจดูแปลกในตอนแรก: อาร์เรย์จะเริ่มนับรายการจาก 0 ไม่ใช่ 1 การนับดัชนีเริ่มจากศูนย์นี้มีรากฐานมาจากวิธีการทำงานของหน่วยความจำคอมพิวเตอร์ - เป็นธรรมเนียมปฏิบัติของการเขียนโปรแกรมตั้งแต่ยุคแรกของภาษาโปรแกรมอย่าง C แต่ละตำแหน่งในอาร์เรย์จะได้รับหมายเลขที่อยู่ของตัวเองเรียกว่า ดัชนี

ดัชนี	ค่า	คำอธิบาย
0	"Chocolate"	องค์ประกอบแรก
1	"Strawberry"	องค์ประกอบที่สอง
2	"Vanilla"	องค์ประกอบที่สาม
3	"Pistachio"	องค์ประกอบที่สี่
4	"Rocky Road"	องค์ประกอบที่ห้า

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

การเข้าถึงองค์ประกอบในอาร์เรย์:

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

// Access individual elements using bracket notation
console.log(iceCreamFlavors[0]); // "Chocolate" - first element
console.log(iceCreamFlavors[2]); // "Vanilla" - third element
console.log(iceCreamFlavors[4]); // "Rocky Road" - last element

การทำงานที่เกิดขึ้น:

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

การแก้ไของค์ประกอบในอาร์เรย์:

// Change an existing value
iceCreamFlavors[4] = "Butter Pecan";
console.log(iceCreamFlavors[4]); // "Butter Pecan"

// Add a new element at the end
iceCreamFlavors[5] = "Cookie Dough";
console.log(iceCreamFlavors[5]); // "Cookie Dough"

ในตัวอย่างข้างต้น เราได้:

แก้ไข องค์ประกอบที่ดัชนี 4 จาก "Rocky Road" เป็น "Butter Pecan"
เพิ่ม องค์ประกอบใหม่ "Cookie Dough" ที่ดัชนี 5
ขยาย ความยาวของอาร์เรย์โดยอัตโนมัติเมื่อเพิ่มเกินขอบเขตปัจจุบัน

ความยาวของอาร์เรย์และเมธอดที่ใช้บ่อย

อาร์เรย์มาพร้อมกับคุณสมบัติและเมธอดในตัวที่ทำให้การทำงานกับข้อมูลง่ายขึ้นมาก

การหาความยาวของอาร์เรย์:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
console.log(iceCreamFlavors.length); // 5

// Length updates automatically as array changes
iceCreamFlavors.push("Mint Chip");
console.log(iceCreamFlavors.length); // 6

จุดสำคัญที่ควรจำ:

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

เมธอดสำคัญของอาร์เรย์:

const fruits = ["apple", "banana", "orange"];

// Add elements
fruits.push("grape");           // Adds to end: ["apple", "banana", "orange", "grape"]
fruits.unshift("strawberry");   // Adds to beginning: ["strawberry", "apple", "banana", "orange", "grape"]

// Remove elements
const lastFruit = fruits.pop();        // Removes and returns "grape"
const firstFruit = fruits.shift();     // Removes and returns "strawberry"

// Find elements
const index = fruits.indexOf("banana"); // Returns 1 (position of "banana")
const hasApple = fruits.includes("apple"); // Returns true

การทำความเข้าใจเมธอดเหล่านี้:

เพิ่ม องค์ประกอบด้วย push() (ท้าย) และ unshift() (ต้น)
ลบ องค์ประกอบด้วย pop() (ท้าย) และ shift() (ต้น)
ค้นหา องค์ประกอบด้วย indexOf() และตรวจสอบการมีอยู่ด้วย includes()
คืนค่า ค่าที่มีประโยชน์ เช่น องค์ประกอบที่ถูกลบหรือดัชนีตำแหน่ง

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

ลูป

ลองนึกถึงการลงโทษที่มีชื่อเสียงในนิยายของ Charles Dickens ที่นักเรียนต้องเขียนประโยคซ้ำๆ บนกระดานชนวน ลองจินตนาการว่าคุณสามารถสั่งให้ใครสักคน "เขียนประโยคนี้ 100 ครั้ง" และให้มันทำโดยอัตโนมัติ นั่นคือสิ่งที่ลูปทำให้โค้ดของคุณ

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

JavaScript มีลูปหลายประเภทให้เลือกใช้ ลองมาดูแต่ละประเภทและเข้าใจว่าเมื่อใดควรใช้

For Loop

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

โครงสร้าง For Loop:

องค์ประกอบ	วัตถุประสงค์	ตัวอย่าง
การเริ่มต้น	กำหนดจุดเริ่มต้น	`let i = 0`
เงื่อนไข	เมื่อใดที่จะดำเนินการต่อ	`i < 10`
การเพิ่มค่า	วิธีการอัปเดต	`i++`

// Counting from 0 to 9
for (let i = 0; i < 10; i++) {
  console.log(`Count: ${i}`);
}

// More practical example: processing scores
const testScores = [85, 92, 78, 96, 88];
for (let i = 0; i < testScores.length; i++) {
  console.log(`Student ${i + 1}: ${testScores[i]}%`);
}

ทีละขั้นตอน สิ่งที่เกิดขึ้น:

เริ่มต้น ตัวแปรตัวนับ i เป็น 0 ตั้งแต่เริ่มต้น
ตรวจสอบ เงื่อนไข i < 10 ก่อนการวนซ้ำแต่ละครั้ง
ดำเนินการ โค้ดบล็อกเมื่อเงื่อนไขเป็นจริง
เพิ่มค่า i ทีละ 1 หลังการวนซ้ำแต่ละครั้งด้วย i++
หยุด เมื่อเงื่อนไขกลายเป็นเท็จ (เมื่อ i ถึง 10)

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

While Loop

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

ลักษณะของ While Loop:

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

// Basic counting example
let i = 0;
while (i < 10) {
  console.log(`While count: ${i}`);
  i++; // Don't forget to increment!
}

// More practical example: processing user input
let userInput = "";
let attempts = 0;
const maxAttempts = 3;

while (userInput !== "quit" && attempts < maxAttempts) {
  userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`);
  attempts++;
}

if (attempts >= maxAttempts) {
  console.log("Maximum attempts reached!");
}

การทำความเข้าใจตัวอย่างเหล่านี้:

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

ทางเลือกใหม่สำหรับลูป

JavaScript มีไวยากรณ์ลูปที่ทันสมัยซึ่งสามารถทำให้โค้ดของคุณอ่านง่ายขึ้นและลดข้อผิดพลาด

For...of Loop (ES6+):

const colors = ["red", "green", "blue", "yellow"];

// Modern approach - cleaner and safer
for (const color of colors) {
  console.log(`Color: ${color}`);
}

// Compare with traditional for loop
for (let i = 0; i < colors.length; i++) {
  console.log(`Color: ${colors[i]}`);
}

ข้อดีของ for...of:

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

เมธอด forEach:

const prices = [9.99, 15.50, 22.75, 8.25];

// Using forEach for functional programming style
prices.forEach((price, index) => {
  console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
});

// forEach with arrow functions for simple operations
prices.forEach(price => console.log(`Price: $${price}`));

สิ่งที่คุณต้องรู้เกี่ยวกับ forEach:

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

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

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

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

การประมวลผลอาร์เรย์แบบดั้งเดิม:

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

// Classic for loop approach
for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
}

// Modern for...of approach
for (const flavor of iceCreamFlavors) {
  console.log(`Available flavor: ${flavor}`);
}

มาทำความเข้าใจแต่ละวิธี:

ใช้ คุณสมบัติความยาวของอาร์เรย์เพื่อกำหนดขอบเขตลูป
เข้าถึง องค์ประกอบโดยดัชนีใน for loop แบบดั้งเดิม
ให้ การเข้าถึงองค์ประกอบโดยตรงใน for...of loop
ประมวลผล องค์ประกอบแต่ละตัวในอาร์เรย์เพียงครั้งเดียว

ตัวอย่างการประมวลผลข้อมูลจริง:

const studentGrades = [85, 92, 78, 96, 88, 73, 89];
let total = 0;
let highestGrade = studentGrades[0];
let lowestGrade = studentGrades[0];

// Process all grades with a single loop
for (let i = 0; i < studentGrades.length; i++) {
  const grade = studentGrades[i];
  total += grade;
  
  if (grade > highestGrade) {
    highestGrade = grade;
  }
  
  if (grade < lowestGrade) {
    lowestGrade = grade;
  }
}

const average = total / studentGrades.length;
console.log(`Average: ${average.toFixed(1)}`);
console.log(`Highest: ${highestGrade}`);
console.log(`Lowest: ${lowestGrade}`);

นี่คือวิธีการทำงานของโค้ดนี้:

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

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

GitHub Copilot Agent Challenge 🚀

ใช้โหมด Agent เพื่อทำภารกิจต่อไปนี้:

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

คำสั่ง: สร้างฟังก์ชันชื่อ analyzeGrades ที่รับอาร์เรย์ของออบเจ็กต์คะแนนนักเรียน (แต่ละออบเจ็กต์มีคุณสมบัติ name และ score) และคืนค่าออบเจ็กต์ที่มีสถิติรวมถึงคะแนนสูงสุด คะแนนต่ำสุด คะแนนเฉลี่ย จำนวนของนักเรียนที่ผ่าน (คะแนน >= 70) และอาร์เรย์ของชื่อนักเรียนที่ได้คะแนนสูงกว่าค่าเฉลี่ย ใช้ลูปอย่างน้อยสองประเภทในโซลูชันของคุณ

เรียนรู้เพิ่มเติมเกี่ยวกับ โหมด Agent ที่นี่

🚀 ภารกิจ

JavaScript มีเมธอดอาร์เรย์ที่ทันสมัยหลายตัวที่สามารถแทนที่ลูปแบบดั้งเดิมสำหรับงานเฉพาะ ลองสำรวจ forEach, for-of, map, filter, และ reduce

ภารกิจของคุณ: ปรับปรุงตัวอย่างคะแนนนักเรียนโดยใช้เมธอดอาร์เรย์อย่างน้อยสามตัว สังเกตว่าโค้ดสะอาดและอ่านง่ายขึ้นมากด้วยไวยากรณ์ JavaScript ที่ทันสมัย

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

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

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

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

วนซ้ำอาร์เรย์

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

30 KiB Raw Permalink Blame History