JavaScript and TypeScript Data Structures

Summary

Basic Structures

โครงสร้างข้อมูล	Time Complexity	Space Complexity	การใช้งานทั่วไป	Built-in Support
Array	Access: O(1) Insert/Delete: O(n)	O(n)	การเก็บข้อมูลแบบลำดับ	JS, TS
Object	Access: O(1) Insert/Delete: O(1)	O(n)	การเก็บข้อมูลแบบคู่คีย์-ค่า	JS, TS

Linear Structures

โครงสร้างข้อมูล	Time Complexity	Space Complexity	การใช้งานทั่วไป	Built-in Support
Stack	Access: O(1) Insert/Delete: O(1)	O(n)	การเรียกฟังก์ชัน, การยกเลิกการทำงาน	JS/TS (via Array)
Queue	Access: O(1) Insert/Delete: O(1)	O(n)	การจัดตารางงาน	JS/TS (via Array)

Tree Structures

โครงสร้างข้อมูล	Time Complexity	Space Complexity	การใช้งานทั่วไป	Built-in Support
Binary Tree	Access: O(log n) Insert/Delete: O(log n)	O(n)	ข้อมูลแบบลำดับชั้น	No
Binary Search Tree	Access: O(log n) Insert/Delete: O(log n)	O(n)	การค้นหาข้อมูลแบบเรียงลำดับ	No

Key-Value Structures

โครงสร้างข้อมูล	Time Complexity	Space Complexity	การใช้งานทั่วไป	Built-in Support
Hash Table	Access: O(1) Insert/Delete: O(1)	O(n)	แคช, พจนานุกรม	JS, TS

Graph Structures

โครงสร้างข้อมูล	Time Complexity	Space Complexity	การใช้งานทั่วไป	Built-in Support
Directed Graph	Access: Varies Insert/Delete: Varies	O(n + m)	การกำหนดเส้นทางเครือข่าย	No
Undirected Graph	Access: Varies Insert/Delete: Varies	O(n + m)	เครือข่ายสังคม	No

Basic Structures

Array

Array เป็นโครงสร้างข้อมูลพื้นฐานที่เก็บข้อมูลเป็นลำดับ โดยแต่ละ element มี index เป็นตัวระบุตำแหน่ง

www.typescriptlang.org favicon TS Documentation

array-interface.ts

interface Array<T> {
  length: number;
  push(...items: T[]): number;
  pop(): T | undefined;
  indexOf(searchElement: T, fromIndex?: number): number;
}

shopping-cart.ts

// ตะกร้าสินค้าใช้ Array
interface CartItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
}

const cart: CartItem[] = [
  { id: 1, name: 'Laptop', price: 999.99, quantity: 1 },
  { id: 2, name: 'Mouse', price: 19.99, quantity: 2 }
];

// เพิ่มสินค้า
cart.push({ id: 3, name: 'Keyboard', price: 49.99, quantity: 1 });

// ลบสินค้าด้วย ID
const itemToRemove = 2;
const index = cart.findIndex(item => item.id === itemToRemove);
if (index !== -1) cart.splice(index, 1);

ลักษณะ	ความซับซ้อนเวลา	การใช้งาน
เรียงลำดับ, เข้าถึงด้วย index	เข้าถึง: O(1) เพิ่ม/ลบ: O(n)	เก็บข้อมูลแบบลำดับ

Object

Object เก็บข้อมูลแบบ key-value pairs โดย key เป็น unique identifier

www.typescriptlang.org favicon TS Documentation

object-interface.ts

interface Object {
  hasOwnProperty(v: PropertyKey): boolean;
  keys(): string[];
  values(): any[];
}

user-profile.ts

// จัดการโปรไฟล์ผู้ใช้
interface UserPreferences {
  theme: string;
  notifications: boolean;
}

interface UserProfile {
  username: string;
  preferences: UserPreferences;
  updatePreference: (key: string, value: any) => UserPreferences;
}

const userProfile: UserProfile = {
  username: 'dev_john',
  preferences: {
    theme: 'dark',
    notifications: true
  },
  updatePreference(key: string, value: any) {
    this.preferences[key as keyof UserPreferences] = value;
    return this.preferences;
  }
};

ลักษณะ	ความซับซ้อนเวลา	การใช้งาน
ไม่เรียงลำดับ, เข้าถึงด้วย key	เข้าถึง: O(1) เพิ่ม/ลบ: O(1)	คอนฟิกูเรชัน, ดิกชันนารี

Linear Structures

Stack

Stack เป็นโครงสร้างข้อมูลแบบ Last-In-First-Out โดยมีการเข้าถึงและลบข้อมูลจากด้านบนเท่านั้น

www.typescriptlang.org favicon TS Documentation

browser-history.ts

// ประวัติการใช้งานเบราว์เซอร์
class BrowserHistory {
  private history: string[];
  private currentIndex: number;

  constructor() {
    this.history = [];
    this.currentIndex = -1;
  }

  // เยี่ยมชมหน้าใหม่
  visit(url: string) {
    this.history = this.history.slice(0, this.currentIndex + 1);
    this.history.push(url);
    this.currentIndex = this.history.length - 1;
  }

  // ย้อนกลับ
  back() {
    if (this.currentIndex > 0) this.currentIndex--;
    return this.history[this.currentIndex];
  }

  // ไปข้างหน้า
  forward() {
    if (this.currentIndex < this.history.length - 1) this.currentIndex++;
    return this.history[this.currentIndex];
  }
}

// ตัวอย่างการใช้งาน
const history = new BrowserHistory();
history.visit('https://example.com');
history.visit('https://example.com/products');
history.back(); // กลับไปหน้าแรก

ลักษณะ	ความซับซ้อนเวลา	การใช้งาน
LIFO, เข้าถึงด้วย top	Push/Pop: O(1)	การเรียกฟังก์ชัน, การยกเลิกการทำงาน

Queue

Queue เป็นโครงสร้างข้อมูลแบบ First-In-First-Out โดยมีการเข้าถึงและลบข้อมูลจากด้านหน้าและด้านหลัง

www.typescriptlang.org favicon TS Documentation

task-queue.ts

// คิวสำหรับทำงานแบบแบ็กกราวด์
class TaskQueue {
  private tasks: (() => void)[];

  constructor() {
    this.tasks = [];
  }

  // เพิ่มงานใหม่
  addTask(task: () => void) {
    this.tasks.push(task);
    this.processQueue();
  }

  // ประมวลผลงานทั้งหมด
  private async processQueue() {
    while (this.tasks.length > 0) {
      const task = this.tasks.shift();
      await task();
    }
  }
}

// ตัวอย่างการใช้งาน
const queue = new TaskQueue();
queue.addTask(() => console.log('งานที่ 1 กำลังทำงาน'));
queue.addTask(() => new Promise(resolve => {
  setTimeout(() => {
    console.log('งานที่ 2 กำลังทำงาน');
    resolve();
  }, 1000);
}));

ลักษณะ	ความซับซ้อนเวลา	การใช้งาน
FIFO, เข้าถึงด้วย front	Enqueue/Dequeue: O(1)	การจัดตารางงาน

Tree Structures

Binary Tree

Binary Tree เป็นโครงสร้างข้อมูลแบบลำดับชั้น โดยแต่ละ node มีลูกไม่เกินสองตัว

www.typescriptlang.org favicon TS Documentation

file-system.ts

// โครงสร้างไฟล์แบบต้นไม้
interface FileNode {
  name: string;
  isDirectory: boolean;
  children: FileNode[];
  parent: FileNode | null;
}

class FileNodeImpl implements FileNode {
  constructor(public name: string, public isDirectory: boolean = false) {
    this.children = [];
    this.parent = null;
  }

  // เพิ่มไฟล์/โฟลเดอร์ย่อย
  addChild(node: FileNode) {
    node.parent = this;
    this.children.push(node);
    return node;
  }

  // ค้นหาไฟล์ด้วย path
  find(path: string) {
    const parts = path.split('/'); // แยก path
    let current: FileNode | null = this;
    for (const part of parts) {
      if (!part) continue;
      const child = current.children.find(c => c.name === part);
      if (!child) return null; // ไม่พบ
      current = child; // ย้ายไปโหนดลูก
    }
    return current; // คืนค่าสุดท้ายที่พบ
  }
}

// ตัวอย่างระบบไฟล์
const root = new FileNodeImpl('', true); // โฟลเดอร์ราก
const etc = root.addChild(new FileNodeImpl('etc', true)); // โฟลเดอร์ etc
etc.addChild(new FileNodeImpl('nginx.conf')); // ไฟล์ config
const home = root.addChild(new FileNodeImpl('home', true)); // โฟลเดอร์ home
const user = home.addChild(new FileNodeImpl('user', true)); // โฟลเดอร์ user
user.addChild(new FileNodeImpl('profile.txt')); // ไฟล์ผู้ใช้

root.find('home/user/profile.txt'); // ค้นหาไฟล์

ลักษณะ	ความซับซ้อนเวลา	การใช้งาน
ลำดับชั้น, เข้าถึงด้วย node	Varies	ข้อมูลแบบลำดับชั้น

Binary Search Tree

Binary Search Tree เป็นประเภทเฉพาะของ Binary Tree ที่มีคุณสมบัติ:

ทุกโหนดใน subtree ซ้ายมีค่าน้อยกว่าโหนดปัจจุบัน
ทุกโหนดใน subtree ขวามีค่ามากกว่าโหนดปัจจุบัน
subtree ทั้งซ้ายและขวาต้องเป็น Binary Search Tree ด้วย

www.typescriptlang.org favicon TS Documentation

bst.ts

// ต้นไม้ค้นหาแบบทวิภาค
interface BSTNode {
  value: number;
  left: BSTNode | null;
  right: BSTNode | null;
}

class BSTNodeImpl implements BSTNode {
  constructor(public value: number) {
    this.left = null;
    this.right = null;
  }

  // เพิ่มค่าใหม่
  insert(value: number) {
    if (value < this.value) {
      if (!this.left) this.left = new BSTNodeImpl(value);
      else this.left.insert(value);
    } else {
      if (!this.right) this.right = new BSTNodeImpl(value);
      else this.right.insert(value);
    }
  }
}

ลักษณะ	ความซับซ้อนเวลา	การใช้งาน
ลำดับชั้น, เข้าถึงด้วย node	O(log n) when balanced	การค้นหาข้อมูลแบบเรียงลำดับ

Key-Value Structures

Hash Table

Hash Table เป็นโครงสร้างข้อมูลแบบ key-value pairs โดยใช้ hash function ในการเข้าถึงข้อมูล

www.typescriptlang.org favicon TS Documentation

hash-table.ts

// ตารางแฮช
const hashTable: { [key: string]: any } = {};
hashTable['key1'] = 'value1';  // เพิ่มค่า
const value = hashTable['key1']; // ค้นหาค่า
delete hashTable['key1'];      // ลบค่า

ลักษณะ	ความซับซ้อนเวลา	การใช้งาน
เข้าถึงด้วย key, ใช้ hash function	Average O(1)	แคช, พจนานุกรม

Graph Structures

Directed Graph

Directed Graph เป็นโครงสร้างข้อมูลแบบเครือข่ายที่มีการเชื่อมต่อระหว่าง node โดยมีทิศทาง

www.typescriptlang.org favicon TS Documentation

directed-graph.ts

// กราฟทิศทาง
interface Graph {
  [key: string]: string[];
}

const graph: Graph = {
  A: ['B', 'C'],
  B: ['D'],
  C: [],
  D: ['C']
};

ลักษณะ	ความซับซ้อนเวลา	การใช้งาน
เข้าถึงด้วย node, เชื่อมต่อด้วย edge	Varies	การกำหนดเส้นทางเครือข่าย

Undirected Graph

Undirected Graph เป็นโครงสร้างข้อมูลแบบเครือข่ายที่มีการเชื่อมต่อระหว่าง node โดยไม่มีทิศทาง

www.typescriptlang.org favicon TS Documentation

undirected-graph.ts

// กราฟไม่มีทิศทาง
interface Graph {
  [key: string]: string[];
}

const graph: Graph = {
  A: ['B', 'C'],
  B: ['A', 'D'],
  C: ['A'],
  D: ['B']
};

ลักษณะ	ความซับซ้อนเวลา	การใช้งาน
เข้าถึงด้วย node, เชื่อมต่อด้วย edge	Varies	เครือข่ายสังคม

JavaScript and TypeScript Data Structures ​

Summary ​

Basic Structures ​

Linear Structures ​

Tree Structures ​

Key-Value Structures ​

Graph Structures ​

Basic Structures ​

Array ​

Object ​

Linear Structures ​

Stack ​

Queue ​

Tree Structures ​

Binary Tree ​

Binary Search Tree ​

Key-Value Structures ​

Hash Table ​

Graph Structures ​

Directed Graph ​

Undirected Graph ​

JavaScript and TypeScript Data Structures

Summary

Basic Structures

Linear Structures

Tree Structures

Key-Value Structures

Graph Structures

Basic Structures

Array

Object

Linear Structures

Stack

Queue

Tree Structures

Binary Tree

Binary Search Tree

Key-Value Structures

Hash Table

Graph Structures

Directed Graph

Undirected Graph