เราจะประยุกต์ใช้ Data Structure ใน JavaScript ได้อย่างไร ?

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

มาทำความรู้จัก Data Structures กันก่อนนะ

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

Array

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

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

var Name1 = ["Too", "Pom", "Dang", "Phareena"];
var Name2 = ["Benten", "Nui", "Koi", "Eid"]

console.log(Name1.concat(Name2)); // ["Too", "Pom", "Dang", "Phareena", "Benten", "Nui", "Koi", "Eid"]
console.log(Name1.includes("Too")); // true
console.log(Name2.reverse()); // ["Eid", "Koi", "Nui", "Benten"]
console.log(Name2.push("Tee")); // ["Benten", "Nui", "Koi", "Eid", "Tee"]

จากโค้ดตัวอย่างเป็นการใช้ Method มาจัดการข้อมูลใน Array เช่น
concat() – ใช้เชื่อม 2 Array เข้าด้วยกัน
include() – ใช้หาข้อมูลใน Array ได้ตามต้องการ จะ return ค่าออกมาเป็น True หรือ False
reverse() – ใช้จัดเรียงข้อมูลใน Array จาก index สุดท้าย ไปยัง index แรก
push() – ใช้เพิ่มข้อมูลลงไปใน Array

Linked List

เป็นโครงสร้างข้อมูลแบบ linear (เส้นตรง) ซึ่งข้อมูลอาจจะไม่ได้อยู่ในตำแหน่งที่ติดกัน แต่มีพอยเตอร์เป็นตัวเชื่อมต่อหากัน 1 ชุดข้อมูลจะเรียกตัวเองว่า Node โดยแต่ละโหนดจะประกอบด้วย Data และ Link Field เพื่อเก็บตำแหน่งของข้อมูลชุดถัดไป ซึ่งจะเชื่อมโยงกันตังแต่ Head Node ไปจนถึง Last Node ซึ่งจะเป็น Node ที่ไม่มี Link Field ของตำแหน่งของข้อมูลในชุดถัดไป ถือว่าเป็นอันสิ้นสุด Link

👍 ข้อดีคือใช้ในการค้นหาข้อมูลและเชื่อมโยงข้อมูลได้อย่างง่ายมากขึ้น ไม่จำเป็นต้องจัดการโครงสร้างข้อมูลใหม่ทั้งหมด

👎 ข้อเสียคือหากเป็นชุดข้อมูลที่เยอะอาจจะใช้เวลาในการค้นหานาน

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

//สร้าง Class
class LinkedList {
  constructor(head = null) {
  this.head = head
   }
}
//กำหนด node 
let node1 = new ListNode(2)
let node2 = new ListNode(5)

//กำหนดให้ node1 ชี้ไปหา node2
node1.next = node2

//ให้ส่งค่า node1 ไปยัง class LinkedList 
let list = new LinkedList(node1)

//ผลลัพธ์จะเท่ากับ 5 ซึ่งจะทำให้รู้ว่า node 2 เป็น last node
console.log(list.head.next.data) //returns 5

ตัวอย่าง Methods JavaScript ที่ใช้สำหรับ LinkedList มีดังนี้

size() – ใช้เพื่อหาจำนวน node ใน list 

วิธีการใช้งาน

size() {
  let count = 0; 
  let node = this.head;
while (node) {
  count++;
  node = node.next
}
  return count;
}

clear() – ใช้เพื่อ clear ค่าใน list

วิธีการใช้งาน

clear() {
this.head = null;
}

getLast() – ใช้เพื่อหาโหนดสุดท้ายใน list

วิธีการใช้งาน

getLast() {
  let lastNode = this.head;
  if (lastNode) {
while (lastNode.next) {
  lastNode = lastNode.next
  }
}
  return lastNode
}

getFirst() – ใช้เพื่อหาโหนดแรกใน list

วิธีการใช้งาน

getFirst() {
return this.head;
}

Stack

เป็นโครงสร้างชุดข้อมูลเชิงเส้น มีหลักการ LIFO (Last In First Out) ซึ่งจะมี pointer เพื่อชี้ไปยังตำแหน่งข้อมูล โดยวิธีนี้จะเป็นวิธีการเพิ่มหรือลบข้อมูล โดยจะเพิ่มข้อมูลจากล่างขึ้นบน และจะลบข้อมูลจากบนลงล่าง ยกตัวอย่างเช่น การวางจานโดยเราจะวางซ้อนกันจากล่างขึ้นบน และเมื่อจะหยิบใช้เราก็จะหยิบจากจานที่อยู่ด้านบนก่อน

มีตัวอย่างการใช้งานดังนี้

Push – ใช้เพิ่มข้อมูลลงใน Stack
เมื่อต้องการ push ข้อมูลลงใน Stack ต้องเพิ่มในตำแหน่งบนสุดของข้อมูลเดิม และต้องกำหนดให้ข้อมูลที่ถูกเพิ่มใหม่กลายเป็นข้อมูลที่อยู่บนสุดแทน

push(element) {
  this.data[this.top] = element;
  this.top = this.top + 1;
}

Pop – ใช้ลบข้อมูลใน Stack
เมื่อต้องการลบข้อมูลใน Stack เราต้องลบจากข้อมูลที่อยู่บนสุดก่อน และต้องกำหนดให้ข้อมูลที่อยู่ล่างตำแหน่งที่ถูกลบไป กลายเป็นข้อมูลที่อยู่บนสุดแทน

pop() {
 this.top = this.top -1;
 return this.data.pop(); // removes the last element
}

ลองมาดูโค้ดเต็มๆ กันบ้าง

// สร้าง class Stack 
class Stack {
  #items = []
  push = (element) => this.#items.push(element)
  pop = () => this.#items.pop()
  size = () => this.#items.length
}

const stack = new Stack()

// เพิ่มข้อมูลลงใน stack
stack.push(1)
stack.push(2)
stack.push(3)

// จำนวนข้อมูลใน stack เท่ากับ 3
console.log(stack.size()) // => 3

// ลบ 3 ออกจาก stack เพราะเป็นข้อมูลที่อยู่บนสุด 
console.log(stack.pop()) // => 3 

// จำนวนข้อมูลเหลือ 2 เพราะถูกลบออกไปแล้ว 1
console.log(stack.size()) // => 2

Queue 

เป็นโครงสร้างข้อมูลแบบเชิงเส้น ใช้หลักการ FIFO (First In First Out) อย่างเช่นเราเข้าแถวซื้ออาหารคนแรกก็จะเป็นคิวที่ 1 ซึ่งจะได้ซื้ออาหารเป็นคนแรก และคิวก็จะรันไปเรื่อยๆ จนถึงคิวสุดท้ายนั่นเอง 

Enqueue – เป็นการเพิ่มข้อมูลลงในคิว โดยข้อมูลที่เพิ่มมาใหม่จะต่อท้ายข้อมูลที่อยู่ก่อนหน้า
Dequeue – เป็นการลบข้อมูล โดยจะลบจากข้อมูลที่อยู่ด้านหน้าก่อน
Peek – เป็นการหาข้อมูลที่อยู่หน้าสุด
length – เป็นการนับจำนวนข้อมูลที่อยู่ในคิว

ลองมาดูโค้ดตัวอย่างกันบ้าง

//สร้าง class Queue
class Queue {
  constructor() {
    this.items = {};
    this.headIndex = 0;
    this.tailIndex = 0;
}

//ฟังก์ชันเพิ่มข้อมูลลงในคิว
  enqueue(item) {
    this.items[this.tailIndex] = item;
    this.tailIndex++;
  }

//ฟังก์ชันลบข้อมูลในคิว
  dequeue() {
    const item = this.items[this.headIndex];
    delete this.items[this.headIndex];
    this.headIndex++;
    return item;
  }

//ฟังก์ชันหาข้อมูลที่อยู่ด้านหน้าสุด
  peek() {
    return this.items[this.headIndex];
  }

//หาจำนวนข้อมูลที่อยู่ในคิว
  get length() {
    return this.tailIndex - this.headIndex;
  }
}

const queue = new Queue();

//เพิ่มข้อมูลลงในคิว
queue.enqueue(7);
queue.enqueue(2);
queue.enqueue(6);
queue.enqueue(4);

//ลบ 7 ออกจากคิวเพราะ 7 อยู่หน้าสุด
console.log(queue.dequeue()); // => 7

//2 กลายเป็นข้อมูลที่อยู่หน้าสุดแทน 
console.log(queue.peek()); // => 2

//เหลือข้อมูลแค่ 3 เพราะถูกลบออกไป 1
console.log(queue.length); // => 3

เป็นยังไงกันบ้างกับตัวอย่างการใช้งาน Data Structures กับ JavaScript พอเห็นภาพขึ้นมาบ้างไหม? มันจะเป็นประโยชน์มากเลยนะถ้าเราเข้าใจพื้นฐานพวกนี้ ซึ่งมันก็จะช่วยอำนวยความสะดวกให้เราในการเขียนโปรแกรมมากยิ่งขึ้น เพื่อนๆ ก็สามารถไปประยุกต์ใช้งานกับโปรแกรมของเพื่อนๆ ได้ตามความเหมาะสมเลยนะคะ 😊