การใช้งาน Longest Common Subsequence ในภาษา Next.js แบบง่าย ๆ พร้อมตัวอย่าง CODE และอธิบายการทำงาน

LCS คืออะไร?

Longest Common Subsequence คือ วิธีการที่ใช้ในการเปรียบเทียบและค้นหาลำดับของสตริงที่มีความเหมือนกัน อยู่ในลำดับที่ถูกต้อง แต่ไม่ต้องติดกัน วัตถุประสงค์คือการหา "ความยาว" ของลำดับโดยที่ไม่ต้องเปลี่ยนลำดับต้นฉบับ

ตัวอย่างของ LCS

ให้เรานำสตริง 2 ตัวมาดูกัน:

Longest Common Subsequence ของ "ABCBDAB" และ "BDCAB" คือ "BCAB" โดยความยาวจะมีค่าเท่ากับ 4

ทำไมต้องใช้ LCS?

LCS มีการนำไปใช้ในหลายวงการ เช่น:

การใช้งาน LCS ใน Next.js

หากเราต้องการใช้ LCS ใน Next.js เราสามารถทำได้ง่ายๆ ด้วยการเขียนฟังก์ชันเพื่อหาค่าดังกล่าว และแสดงผลลัพธ์บนเว็บไซต์ของเรา

การเขียนฟังก์ชัน LCS

ให้เรามาเริ่มต้นกันที่การสร้างฟังก์ชันที่ใช้ในการหาค่าของ LCS บน Next.js

 // ฟังก์ชัน LCS
function lcs(X, Y) {
  let m = X.length;
  let n = Y.length;
  let L = Array(m + 1).fill(null).map(() => Array(n + 1).fill(0));

  // สร้างตารางที่ใช้ในการเก็บค่า
  for (let i = 0; i <= m; i++) {
    for (let j = 0; j <= n; j++) {
      if (i === 0 || j === 0) {
        L[i][j] = 0;
      } else if (X[i - 1] === Y[j - 1]) {
        // เพิ่มค่าในตาราง
        L[i][j] = L[i - 1][j - 1] + 1;
      } else {
        L[i][j] = Math.max(L[i - 1][j], L[i][j - 1]);
      }
    }
  }

  return L[m][n];
}

// ใช้งานฟังก์ชัน LCS
const str1 = "ABCBDAB";
const str2 = "BDCAB";
console.log("Length of LCS is", lcs(str1, str2)); // แสดงผล

อธิบายโค้ด

ในโค้ดข้างต้น เราได้กำหนดฟังก์ชัน `lcs` ที่รับค่าพารามิเตอร์เป็นสตริง 2 ตัว (X และ Y) และสร้างตารางสองมิติ (`L`) เพื่อเก็บค่าต่าง ๆ ที่คำนวณใน Process. โค้ดจะเปรียบเทียบสตริง X กับ Y ทีละตัวอักษร ถ้าตรงกันจะเพิ่มค่าลงในตาราง แต่อย่างไรก็ตาม ถ้าไม่ตรงกันจะเลือกค่ามากที่สุดระหว่างสองค่าที่อยู่ด้านซ้ายและด้านบนของตารางแทน

ตัวอย่างการใช้งานใน Next.js

ถัดไป เราจะสร้างแอปพลิเคชัน Next.js เพื่อแสดงผลลัพธ์ของ LCS ซึ่งประกอบด้วยฟอร์มให้ผู้ใช้กรอกสตริง 2 ตัวและแสดงผลความยาวของ LCS ที่ได้

 import { useState } from 'react';

function LCSPage() {
  const [str1, setStr1] = useState('');
  const [str2, setStr2] = useState('');
  const [result, setResult] = useState(null);

  const calculateLCS = () => {
    const lcsLength = lcs(str1, str2);
    setResult(lcsLength);
  };

  return (
    <div>
      <h1>Calculate Longest Common Subsequence</h1>
      <input type="text" value={str1} onChange={(e) => setStr1(e.target.value)} placeholder="Enter first string" />
      <input type="text" value={str2} onChange={(e) => setStr2(e.target.value)} placeholder="Enter second string" />
      <button onClick={calculateLCS}>Calculate LCS</button>
      {result !== null && <h2>Length of LCS: {result}</h2>}
    </div>
  );
}

export default LCSPage;

ในโค้ดนี้ เราใช้ useState ของ React เพื่อรับค่าเข้าจากผู้ใช้โดยมี Input 2 ตัวสำหรับกรอกสตริง วิธีการทำงานก็ง่าย เพียงแค่ผู้ใช้กรอกสตริงที่ต้องการเปรียบเทียบ หลังจากนั้นคลิกปุ่มเพื่อคำนวณค่า LCS และแสดงผลลัพธ์!!

สรุป

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

อย่าพลาดโอกาสที่จะพัฒนาความรู้ของคุณ!

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