การใช้งาน Array 2D ในภาษา Next.js: ตัวอย่างและการใช้งานในโลกจริง

ในโลกของการพัฒนาเว็บการใช้งานโครงสร้างข้อมูลที่มีประสิทธิภาพถือว่าสำคัญมาก และหนึ่งในโครงสร้างข้อมูลพื้นฐานที่เป็นที่รู้จักก็คือ **Array (อาเรย์)** โดยเฉพาะ **Array 2D (อาเรย์สองมิติ)** ที่ช่วยให้เราสามารถจัดเก็บข้อมูลในรูปแบบตารางได้อย่างมีระเบียบ

วันนี้เราจะมาพูดถึงการใช้งาน Array 2D ใน **Next.js** ซึ่งเป็นเฟรมเวิร์กสำหรับ React ที่ใช้ในการพัฒนาเว็บแอปพลิเคชันแบบ Server-Side Rendering (SSR) รวมถึง Static Site Generation (SSG) ที่ยอดนิยมในปัจจุบัน หากคุณเริ่มสนใจเรื่องการเขียนโปรแกรม หรือกำลังศึกษาที่ **EPT** (Expert-Programming-Tutor) สถาบันการเรียนรู้การเขียนโปรแกรมที่ดีที่สุด สามารถมาศึกษาศาสตร์การเขียนโปรแกรมแบบเชิงลึกตั้งแต่พื้นฐานจนถึงขั้นสูงได้เลย!

Array 2D คืออะไร?

ตัวอย่างโครงสร้าง Array 2D

พิจารณา Array 2D ที่ใช้ในการจัดการคะแนนสอบของนักเรียน 3 คน ใน 3 วิชา:

 const scores = [
  [85, 90, 95], // คะแนนของนักเรียนคนที่ 1
  [80, 85, 90], // คะแนนของนักเรียนคนที่ 2
  [75, 80, 85]  // คะแนนของนักเรียนคนที่ 3
];

ในที่นี้ `scores` คืออาเรย์ที่มี 3 อาเรย์ย่อย ซึ่งแต่ละอาเรย์ย่อยนั้นเก็บคะแนนของนักเรียนแต่ละคนใน 3 วิชาที่แตกต่างกัน

การใช้งาน Array 2D ใน Next.js

การใช้งาน Array 2D ใน Next.js ก็ไม่แตกต่างจากการใช้งานใน JavaScript ทั่วไป มาดูตัวอย่างการใช้งานใน Next.js ผ่านคอมโพเนนต์พื้นฐานกันเลย

ตัวอย่างโค้ด

สร้างคอมโพเนนต์ที่แสดงอันดับของนักเรียนจากคะแนนที่เก็บใน Array 2D

 import React from 'react';

const StudentScores = () => {
  const scores = [
    [85, 90, 95],
    [80, 85, 90],
    [75, 80, 85]
  ];

  const calculateAverages = (scores) => {
    return scores.map(studentScores => {
      const total = studentScores.reduce((acc, score) => acc + score, 0);
      return total / studentScores.length;
    });
  };

  const averages = calculateAverages(scores);

  return (
    <div>
      <h1>คะแนนนักเรียน</h1>
      <table>
        <thead>
          <tr>
            <th>นักเรียน</th>
            <th>คะแนนเฉลี่ย</th>
          </tr>
        </thead>
        <tbody>
          {averages.map((avg, index) => (
            <tr key={index}>
              <td>นักเรียนคนที่ {index + 1}</td>
              <td>{avg.toFixed(2)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default StudentScores;

การทำงานของโค้ด

Use Case ในโลกจริง

การใช้งาน Array 2D เป็นเรื่องที่สามารถพบเห็นได้ในหลายๆ สถานการณ์ในโลกจริง อย่างเช่น:

สรุป

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