JavaScript ES6 클래스로 데이터 구조를 구축하는 방법

JavaScript ES6 클래스로 데이터 구조를 구축하는 방법

데이터 구조는 사용하는 언어와 상관없이 컴퓨터 과학 및 프로그래밍의 기본적인 측면입니다. 이에 대한 철저한 지식이 있으면 데이터를 효율적으로 구성, 관리, 저장 및 수정하는 데 도움이 될 수 있습니다. 사용 사례에 적합한 데이터 구조를 식별하면 성능이 크게 향상될 수 있습니다.





그러나 JavaScript는 기본적으로 배열 및 객체와 같은 기본 데이터 구조만 제공됩니다. 그러나 ECMAScript 6(ES6) 클래스의 도입으로 이제 기본 데이터 구조의 도움으로 스택 및 대기열과 같은 사용자 정의 데이터 구조를 생성할 수 있습니다.





전화로 이메일을 보내는 방법

스택 데이터 구조

스택 데이터 구조를 사용하면 LIFO(후입선출) 방식으로 기존 데이터 위에 새 데이터를 푸시할 수 있습니다. 이 선형 데이터 구조는 간단한 예를 사용하여 쉽게 시각화할 수 있습니다. 탁자 위에 놓인 접시 더미를 생각해 보십시오. 스택 상단에서만 플레이트를 추가하거나 제거할 수 있습니다.





JavaScript 배열을 사용하여 스택 데이터 구조를 구현하는 방법은 다음과 같습니다. ES6 수업 :

class Stack {
constructor() {
this.data = [];
this.top = -1;
}
}

스택에서 수행할 수 있는 몇 가지 작업을 탐색하고 구축해 보겠습니다.



푸시 작업

푸시 작업은 스택에 새 데이터를 삽입하는 데 사용됩니다. 푸시 메소드를 호출하는 동안 데이터를 매개변수로 전달해야 합니다. 데이터를 삽입하기 전에 스택의 맨 위 포인터가 1씩 증가하고 새 데이터가 맨 위에 삽입됩니다.

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

팝 오퍼레이션

pop 연산은 스택의 최상위 데이터 요소를 제거하는 데 사용됩니다. 이 작업을 수행하는 동안 상단 포인터가 1 감소합니다.





pop() {
if (this.top <0) return undefined;
const poppedTop = this.data[this.top];
this.top--;
return poppedTop;
}

작업 엿보기

peek 연산은 스택의 맨 위에 있는 값을 반환하는 데 사용됩니다. 이 데이터를 검색하기 위한 시간 복잡도는 O(1)입니다.

더 알아보기: Big-O 표기법이란 무엇입니까?





peek() {
return this.top >= 0 ? this.data[this.top] : undefined;
}

연결 리스트 데이터 구조

연결 리스트는 포인터의 도움으로 서로 연결된 수많은 노드로 구성된 선형 데이터 구조입니다. 목록의 각 노드는 데이터와 목록의 다음 노드를 가리키는 포인터 변수를 포함합니다.

자세히 알아보기: 프로그래머를 위한 포인터 소개

스택과 달리 JavaScript의 연결 목록 구현에는 두 개의 클래스가 필요합니다. 첫 번째 수업은 마디 노드를 생성하기 위한 클래스이고 두 번째 클래스는 링크드리스트 연결 리스트에 대한 모든 작업을 수행하는 클래스입니다. 머리 포인터는 연결 목록의 첫 번째 노드를 가리키고 꼬리 포인터는 연결 목록의 마지막 노드를 가리킵니다.

class Node {
constructor(data, next = null) {
this.data = data;
this.next = next;
}
}
class LinkedList {
constructor() {
this.head = null;
this.tail = null;
this.size = 0;
}
}

다음은 연결 목록에서 수행할 수 있는 몇 가지 기본 작업입니다.

추가 작업

추가 작업은 연결 목록의 끝에 새 노드를 추가하는 데 사용됩니다. 새 노드를 삽입하려면 데이터를 매개변수로 전달해야 합니다. 먼저 다음을 사용하여 새 노드 개체를 만듭니다. 새로운 JavaScript의 키워드.

연결 목록이 비어 있으면 헤드 포인터와 테일 포인터가 모두 새 노드를 가리킵니다. 그렇지 않으면 꼬리 포인터만 새 노드를 가리킵니다.

append(data) {
const newNode = new Node(data);
if (!this.head) {
this.head = newNode;
this.tail = newNode;
} else {
this.tail.next = newNode;
this.tail = newNode;
}
this.size++;
return this;
}

삽입 작업

특정 인덱스에 새 노드를 삽입하려면 삽입 작업을 사용할 수 있습니다. 이 메서드는 삽입할 데이터와 삽입할 인덱스라는 두 개의 매개변수를 사용합니다. 최악의 경우 이 방법은 전체 목록을 통과해야 할 수 있으므로 O(N)의 시간 복잡도를 갖습니다.

insert(data, index) {
if (index this.size) return undefined;
if (index === 0) {
this.head = new Node(data, this.head);
!this.tail ? (this.tail = this.head) : null;
this.size++;
return this;
}
if (index === this.size) return this.append(data);
let count = 0;
let beforeNode = this.head;
while (count !== index) {
beforeNode = beforeNode.next;
count++;
}
const newNode = new Node(data);
let afterNode = beforeNode.next;
newNode.next = afterNode;
beforeNode.next = newNode;
this.size++;
return this;
}

삭제 작업

삭제 작업은 연결 목록을 탐색하여 삭제할 노드에 대한 참조를 가져오고 이전 노드의 링크를 제거합니다. 삽입 작업과 유사하게 삭제 작업도 최악의 경우 O(N)의 시간 복잡도를 갖습니다.

deleteNode(index) {
if (index === 0) {
const removedHead = this.head;
this.head = this.head.next;
this.size--;
this.size === 0 ? (this.tail = null) : null;
return removedHead;
}
if (index === this.size - 1) {
if (!this.head) return undefined;
let currentNode = this.head;
let newTail = currentNode;
while (currentNode.next) {
newTail = currentNode;
currentNode = currentNode.next;
}
this.tail = newTail;
this.tail.next = null;
this.size--;
this.size === 0 ? ([this.head, this.tail] = [null, null]) : null;
return currentNode;
}
if (index this.size - 1) return undefined;
let count = 0;
let beforeNode = this.head;
while (count !== index - 1) {
beforeNode = beforeNode.next;
count++;
}
const removedNode = beforeNode.next;
let afterNode = removedNode.next;
beforeNode.next = afterNode;
removedNode.next = null;
this.size--;
return removedNode;
}

큐 데이터 구조

대기열 데이터 구조는 대기열에 서 있는 많은 사람들과 유사합니다. 먼저 대기열에 들어간 사람이 다른 사람보다 먼저 서비스를 받습니다. 유사하게, 이 선형 데이터 구조는 데이터를 삽입하고 제거하기 위해 FIFO(선입 선출) 접근 방식을 따릅니다. 이 데이터 구조는 다음과 같은 방식으로 연결 목록을 사용하여 JavaScript에서 다시 만들 수 있습니다.

class Queue {
constructor() {
this.front = null;
this.rear = null;
this.size = 0;
}
}

JavaScript의 큐에서 데이터를 삽입하고 제거하는 방법은 다음과 같습니다.

일러스트레이터에서 png로 저장하는 방법

큐에 넣기 작업

enqueue 작업은 새 데이터를 대기열에 삽입합니다. 이 메서드를 호출하는 동안 대기열 데이터 구조가 비어 있으면 전면 및 후면 포인터가 모두 대기열에 새로 삽입된 노드를 가리킵니다. 대기열이 비어 있지 않으면 새 노드가 목록 끝에 추가되고 뒤쪽 포인터가 이 노드를 가리킵니다.

enqueue(data) {
const newNode = new Node(data);
if (!this.front) {
this.front = newNode;
this.rear = newNode;
} else {
this.rear.next = newNode;
this.rear = newNode;
}
this.size++;
return this;
}

큐에서 빼기 작업

대기열에서 빼기 작업은 대기열의 첫 번째 요소를 제거합니다. 대기열에서 빼기 작업 동안 헤드 포인터는 목록의 두 번째 노드 앞으로 이동합니다. 이 두 번째 노드는 이제 대기열의 헤드가 됩니다.

dequeue() {
if (!this.front) return undefined;
if (this.front === this.rear) this.rear = null;
const dequeuedNode = this.front;
this.front = this.front.next;
this.size--;
return dequeuedNode;
}

데이터 구조 이후의 다음 단계

데이터 구조는 특히 프로그래밍을 처음 접하는 경우 이해하기 어려운 개념일 수 있습니다. 그러나 다른 기술과 마찬가지로 연습은 애플리케이션에서 데이터를 저장하고 관리하는 데 제공하는 효율성을 진정으로 이해하고 이해하는 데 도움이 될 수 있습니다.

알고리즘은 데이터 구조만큼 유용하며 프로그래밍 여정에서 다음 논리적 단계가 될 수 있습니다. 그렇다면 버블 정렬과 같은 정렬 알고리즘으로 시작하지 않는 이유는 무엇입니까?

공유하다 공유하다 트위터 이메일 버블 정렬 알고리즘 소개

버블 정렬 알고리즘: 배열 정렬에 대한 훌륭한 소개입니다.

다음 읽기
관련 항목
  • 프로그램 작성
  • 자바스크립트
  • 프로그램 작성
  • 코딩 튜토리얼
저자 소개 니틴 랑가나트(31건 게재)

Nitin은 열렬한 소프트웨어 개발자이자 JavaScript 기술을 사용하여 웹 애플리케이션을 개발하는 컴퓨터 공학도입니다. 그는 프리랜서 웹 개발자로 일하며 여가 시간에는 Linux 및 프로그래밍에 대한 글을 쓰는 것을 좋아합니다.

Nitin Ranganath가 참여한 작품 더보기

뉴스레터 구독

뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!

구독하려면 여기를 클릭하세요.