การใช้งาน Sequential Search ในภาษา Next.js แบบง่าย ๆ

การค้นหาข้อมูลในโปรแกรมมิ่งเป็นฟังก์ชันพื้นฐานที่มีความสำคัญต่อการทำงานของแอปพลิเคชันที่เกี่ยวข้องกับข้อมูล โดยเฉพาะการจัดการกับข้อมูลที่มีจำนวนมาก ในบทความนี้เราจะมาทำความรู้จักกับ **Sequential Search** หรือเรียกอีกชื่อว่า **Linear Search** ซึ่งเป็นการค้นหาข้อมูลที่ง่ายที่สุดในภาษา Next.js

Sequential Search คืออะไร?

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

การทำงานของ Sequential Search

1. เริ่มต้นด้วยการกำหนดรายการข้อมูลที่ต้องการค้นหา

2. ให้วัฏจักร (Loop) ทำงานเพื่อวนไปเช็คแต่ละองค์ประกอบในรายการ

3. หากพบค่าที่ต้องการ จะส่งกลับค่าตำแหน่งนั้นทันที

4. หากตรวจสอบครบทุกองค์ประกอบแต่ไม่พบ จะส่งคืนค่า `-1` (ในกรณีไม่พบ)

ตัวอย่างโค้ดใน Next.js

มาดูตัวอย่างโค้ดการใช้ Sequential Search ใน Next.js กันเลย! เราจะสร้างฟังก์ชัน `sequentialSearch` ที่ทำการค้นหาข้อมูลในอาเรย์

 // เลือก create-next-app สร้าง project ใหม่
import React, { useState } from 'react';

const App = () => {
  const [arr, setArr] = useState([10, 20, 30, 40, 50]);
  const [target, setTarget] = useState('');
  const [result, setResult] = useState(null);

  const sequentialSearch = (array, target) => {
    for (let i = 0; i < array.length; i++) {
      if (array[i] === target) {
        return i; // พบค่าตรงกัน ส่งค่าตำแหน่งกลับ
      }
    }
    return -1; // ไม่พบค่า
  };

  const handleSearch = () => {
    const searchResult = sequentialSearch(arr, parseInt(target));
    setResult(searchResult);
  };

  return (
    <div>
      <h1>Sequential Search ใน Next.js</h1>
      <input
        type="number"
        value={target}
        onChange={(e) => setTarget(e.target.value)}
        placeholder="Enter number to search"
      />
      <button onClick={handleSearch}>Search</button>
      {result !== null && (
        <h2>
          Result: {result !== -1 ? `Found at index ${result}` : "Not Found"}
        </h2>
      )}
    </div>
  );
};

export default App;

อธิบายโค้ด

- ฟังก์ชัน `sequentialSearch` จะทำงานโดยวนลูปในอาเรย์และเปรียบเทียบแต่ละค่ากับค่าที่เราต้องการ หากตรงกันจะส่งคืนตำแหน่ง

- ฟังก์ชัน `handleSearch` จะเรียกใช้งาน `sequentialSearch` เมื่อกดปุ่มค้นหา

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

Use Cases ในโลกจริง

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

- สำหรับธุรกิจต่าง ๆ ที่ต้องการจัดการข้อมูลสมาชิก สามารถใช้ Sequential Search เพื่อตรวจสอบว่ามีสมาชิกที่มีรหัสประจำตัวใดๆ อยู่ในระบบหรือไม่

- ถ้าคุณมีสินค้าหลายรายการและต้องการค้นหาสินค้าที่มีชื่อเฉพาะ Sequential Search สามารถทำงานได้อย่างมีประสิทธิภาพ

ข้อดีและข้อเสียของ Sequential Search

ข้อดี

- ง่ายและเข้าใจได้ง่าย ทั้งการเขียนและการอ่านโค้ด

- ไม่ต้องการข้อมูลที่จัดเรียงลำดับ

- สามารถใช้ได้กับข้อมูลที่ไม่รู้จำนวนล่วงหน้า

ข้อเสีย

- อาจจะช้าเมื่อข้อมูลมีขนาดใหญ่มาก เนื่องจากเวลาที่ใช้ในการค้นหาจะแปรผันตามจำนวนข้อมูล

- มีความไม่ประหยัดพื้นที่ ต้องมีการวนลูปทุกครั้งที่ต้องการค้นหาข้อมูล

สรุป

แค่ก้าวแรกก็สำคัญ ก้าวไว้ที่ EPT แล้วมาร่วมเรียนรู้การเขียนโปรแกรมไปด้วยกันเถอะ!

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