{"id":91729,"date":"2022-10-12T03:55:36","date_gmt":"2022-10-12T08:55:36","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/hur-man-bygger-datastrukturer-med-javascript-es6-klasser\/"},"modified":"2022-10-12T03:55:36","modified_gmt":"2022-10-12T08:55:36","slug":"hur-man-bygger-datastrukturer-med-javascript-es6-klasser","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/hur-man-bygger-datastrukturer-med-javascript-es6-klasser\/","title":{"rendered":"Hur man bygger datastrukturer med JavaScript ES6-klasser"},"content":{"rendered":"
\n

Datastrukturer \u00e4r en grundl\u00e4ggande aspekt av datavetenskap och programmering, oavsett vilket spr\u00e5k du anv\u00e4nder. Att ha en grundlig kunskap om dem kan hj\u00e4lpa dig att effektivt organisera, hantera, lagra och \u00e4ndra data. Att identifiera r\u00e4tt datastruktur f\u00f6r ditt anv\u00e4ndningsfall kan f\u00f6rb\u00e4ttra prestandan med stor marginal.<\/p>\n

JavaScript kommer dock bara med primitiva datastrukturer som arrayer och objekt som standard. Men med introduktionen av ECMAScript 6 (ES6)-klasser kan du nu skapa anpassade datastrukturer som stackar och k\u00f6er med hj\u00e4lp av primitiva datastrukturer.<\/p>\n

<\/span> Stack datastruktur<\/span><\/h2>\n

Stackdatastrukturen till\u00e5ter dig att skjuta ny data ovanp\u00e5 befintlig data p\u00e5 ett LIFO-s\u00e4tt (sist in, f\u00f6rst ut). Denna linj\u00e4ra datastruktur \u00e4r l\u00e4tt att visualisera med ett enkelt exempel. T\u00e4nk p\u00e5 en bunt tallrikar som st\u00e5r p\u00e5 ett bord. Du kan bara l\u00e4gga till eller ta bort en tallrik fr\u00e5n toppen av h\u00f6gen.<\/p>\n

S\u00e5 h\u00e4r kan du implementera stackdatastrukturen med JavaScript-matriser och ES6-klasser:<\/p>\n

class Stack {constructor() {this.data = [];this.top = -1;}}<\/pre>\n
L\u00e5t oss utforska och bygga n\u00e5gra av operationerna som du kan utf\u00f6ra p\u00e5 en stack.<\/p>\n
<\/span>Push Operation<\/span><\/h3>\n
Push-operationen anv\u00e4nds f\u00f6r att infoga ny data i stacken.  Du m\u00e5ste skicka data som en parameter medan du anropar push-metoden.  Innan data infogas \u00f6kas den \u00f6versta pekaren i stacken med en och den nya datan infogas i den \u00f6versta positionen.<\/p>\n
push(data) {this.top++;this.data[this.top] = data;return this.data;}<\/pre>\n
<\/span>Pop Operation<\/span><\/h3>\n
Pop-operationen anv\u00e4nds f\u00f6r att ta bort det \u00f6versta dataelementet i stacken.  N\u00e4r du utf\u00f6r denna operation minskas den \u00f6vre pekaren med 1.<\/p>\n
pop() {if (this.top < 0) return undefined;const poppedTop = this.data[this.top];this.top--;return poppedTop;}<\/pre>\n
<\/span>Peek Operation<\/span><\/h3>\n
Peek-operationen anv\u00e4nds f\u00f6r att returnera v\u00e4rdet som finns \u00f6verst i stacken.  Tidskomplexiteten f\u00f6r att h\u00e4mta dessa data \u00e4r O(1).<\/p>\n
peek() {return this.top >= 0 ? this.data[this.top] : undefined;}<\/pre>\n
<\/span>  L\u00e4nkad listdatastruktur<\/span><\/h2>\n
En l\u00e4nkad lista \u00e4r en linj\u00e4r datastruktur som best\u00e5r av ett flertal noder kopplade till varandra med hj\u00e4lp av pekare.  Varje nod i listan inneh\u00e5ller data och en pekarvariabel som pekar p\u00e5 n\u00e4sta nod i listan.<\/p>\n
Till skillnad fr\u00e5n en stack kr\u00e4ver implementeringar av l\u00e4nkade listor i JavaScript tv\u00e5 klasser.  Den f\u00f6rsta klassen \u00e4r Nod<\/strong> klass f\u00f6r att skapa en nod, och den andra klassen \u00e4r L\u00e4nkad lista<\/strong> klass f\u00f6r att utf\u00f6ra alla operationer p\u00e5 den l\u00e4nkade listan.  Huvudpekaren pekar p\u00e5 den f\u00f6rsta noden i den l\u00e4nkade listan, och slutpekaren pekar p\u00e5 den sista noden i den l\u00e4nkade listan.<\/p>\n
class Node {constructor(data, next = null) {this.data = data;this.next = next;}}class LinkedList {constructor() {this.head = null;this.tail = null;this.size = 0;}}<\/pre>\n
H\u00e4r \u00e4r n\u00e5gra prim\u00e4ra operationer som du kan utf\u00f6ra p\u00e5 en l\u00e4nkad lista:<\/p>\n
<\/span>L\u00e4gg till Operation<\/span><\/h3>\n
Append-operationen anv\u00e4nds f\u00f6r att l\u00e4gga till en ny nod i slutet av den l\u00e4nkade listan.  Du m\u00e5ste skicka data som en parameter f\u00f6r att infoga en ny nod.  Skapa f\u00f6rst ett nytt nodobjekt med hj\u00e4lp av ny<\/strong> nyckelord i JavaScript.<\/p>\n
Om den l\u00e4nkade listan \u00e4r tom kommer b\u00e5de huvud- och svanspekaren att peka p\u00e5 den nya noden.  Annars kommer bara svanspekaren att peka p\u00e5 den nya noden.<\/p>\n
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;}<\/pre>\n
<\/span>Ins\u00e4ttningsoperation<\/span><\/h3>\n
F\u00f6r att infoga en ny nod vid ett visst index kan du anv\u00e4nda infogningsoperationen.  Den h\u00e4r metoden kr\u00e4ver tv\u00e5 parametrar: data som ska infogas och index vid vilket den ska infogas.  I v\u00e4rsta fall har denna metod en tidskomplexitet p\u00e5 O(N) eftersom den kan beh\u00f6va g\u00e5 igenom hela listan.<\/p>\n
insert(data, index) {if (index < 0 || 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;}<\/pre>\n
<\/span>Ta bort operation<\/span><\/h3>\n
Raderingsoperationen g\u00e5r igenom den l\u00e4nkade listan f\u00f6r att f\u00e5 referensen till den nod som ska raderas och tar bort l\u00e4nken till den f\u00f6reg\u00e5ende noden.  I likhet med infogningsoperationen har raderingsoperationen ocks\u00e5 en tidskomplexitet p\u00e5 O(N) i v\u00e4rsta fall.<\/p>\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 < 0 || 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;}<\/pre>\n
<\/span>  K\u00f6datastruktur<\/span><\/h2>\n
K\u00f6datastrukturen liknar ett g\u00e4ng m\u00e4nniskor som st\u00e5r i en k\u00f6.  Den som kommer f\u00f6rst i k\u00f6n serveras f\u00f6re andra.  P\u00e5 liknande s\u00e4tt f\u00f6ljer denna linj\u00e4ra datastruktur FIFO-metoden (f\u00f6rst in, f\u00f6rst ut) f\u00f6r att infoga och ta bort data.  Denna datastruktur kan \u00e5terskapas i JavaScript med hj\u00e4lp av en l\u00e4nkad lista p\u00e5 detta s\u00e4tt:<\/p>\n
class Queue {constructor() {this.front = null;this.rear = null;this.size = 0;}}<\/pre>\n
S\u00e5 h\u00e4r kan du infoga och ta bort data fr\u00e5n en k\u00f6 i JavaScript:<\/p>\n
<\/span>K\u00f6drift<\/span><\/h3>\n
Enqueue-operationen infogar ny data i k\u00f6n.  Medan den h\u00e4r metoden anropas, om k\u00f6datastrukturen \u00e4r tom, pekar b\u00e5de de fr\u00e4mre och bakre pekarna p\u00e5 den nyligen infogade noden i k\u00f6n.  Om k\u00f6n inte \u00e4r tom l\u00e4ggs den nya noden till i slutet av listan och den bakre pekaren pekar p\u00e5 denna nod.<\/p>\n
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;}<\/pre>\n
<\/span>K\u00f6drift<\/span><\/h3>\n
Avk\u00f6ningsoperationen tar bort det f\u00f6rsta elementet i k\u00f6n.  Under avk\u00f6ningsoperationen flyttas huvudpekaren fram\u00e5t till den andra noden i listan.  Denna andra nod blir nu huvudet i k\u00f6n.<\/p>\n
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;}<\/pre>\n
<\/span>  N\u00e4sta steg efter datastrukturer<\/span><\/h2>\n
Datastrukturer kan vara ett knepigt koncept att f\u00f6rst\u00e5, s\u00e4rskilt om du \u00e4r ny p\u00e5 programmering.  Men precis som alla andra f\u00e4rdigheter kan \u00f6vning hj\u00e4lpa dig att verkligen f\u00f6rst\u00e5 och uppskatta effektiviteten det ger f\u00f6r att lagra och hantera data i dina applikationer.<\/p>\n
Algoritmer \u00e4r lika anv\u00e4ndbara som datastrukturer och kan bli n\u00e4sta logiska steg i din programmeringsresa.  S\u00e5 varf\u00f6r inte b\u00f6rja med en sorteringsalgoritm som bubbelsortering?<\/p>\n
    Om f\u00f6rfattaren<\/strong><\/p>\n
            Nitin Ranganath (39 artiklar publicerade)
<\/strong><\/p>\n
Nitin \u00e4r en ivrig mjukvaruutvecklare och en datoringenj\u00f6rsstudent som utvecklar webbapplikationer med JavaScript-teknik.  Han arbetar som frilansande webbutvecklare och gillar att skriva f\u00f6r Linux och programmering i sin free tid. <\/p>\n
                            Mer fr\u00e5n Nitin Ranganath<\/p>\n
<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n