フロントエンドで言わざるを得ないデータ構造

フロントエンドはよくあるデータ構造を把握し、開発中のデータ構造をより明確にすることを学ばなければなりません.
一.キュー
列に並ぶように、列は先に出て、列に並んで入場します!

class Queue {
    constructor() {
        this.arr = []
    }
    enqueue(element){ //    
        this.arr.push(element)
    }
    dequeue(){ //    
        return this.items.shift()
    }
}

二.スタック
積み上げた薪を手に取るように、桟は先に出て、場を離れる時に後進する人が先に出ます!

class Stack {
    constructor(){
        this.arr = [];
    }
    push(element){ //   
        this.arr.push(element);
    }
    pop() { //   
        return this.items.pop();
    }
}

三.チェーンテーブル
チェーンテーブルは、データの削除と新しいデータの追加をより便利にします.
headポインタは最初に格納された要素ノードを指し、各ノードにはnext属性がある要素ノードを指し、最後の要素のポインタがnullを指す
ノードを作成します.各ノードの構造は非常に簡単です.

class Node {
    constructor(element){
        this.element = element; //          
        this.next = null; //      ，       
    }
}

チェーンテーブルの構築

class LinkList {
    constructor(){
        this.head = null; //             ，   null
        this.length = 0;
    }
    append(element){
        //     
        const node = new Node(element);
        if(this.head == null){
            this.head = node; //          
        }else{
            let current = this.head;
            //                
            while(current.next){
                current = current.next;
            }
            current.next = node; //           next      
        }
        this.length++; //        
    }
}

チェーンテーブルを使用すると、チェーンテーブルが見苦しくないのはnextで次のノード(チェーンのように)を指すのが特徴です.

const ll = new LinkList();
ll.append(1);
ll.append(2);
console.log(ll); // head: Node { element: 1, next: Node { element: 2, next: null } }

チェーンテーブルの挿入を実現

insert(position,element){
    //             
    if(position>=0 && position <=this.length){
        const node = new Node(element); //       
        if(position === 0){ //      0
            node.next = this.head; //            
            this.head = node;
        }else{
            let current = this.head; //          
            let previous = null;
            let index = 0;
            while(index++ < position){ //        
                previous = current;
                current = current.next;
            }
            node.next = current; //      next        
            previous.next = node; //         next     
        }
        this.length++;
    }
}

チェーンテーブルの削除を実現

removeAt(position){
      if(position > -1 && position < this.length){
          if(position ==0){ //             
              this.head = this.head.next
          }else{
              let index = 0;
              let previous = null;
              let current = this.head;
              while(index++ < position){ //          ，              
                  previous = current;
                  current = current.next
              }
              previous.next = current.next; //    next       next
          }
          this.length--;
      }
  }

チェーンテーブルの内容の更新

update(position,element) {
    if (position >= 0 && position < this.length) {
        if (position === 0) {
          //               
          this.head.element = element
        }else{
            let index = 0;
            //            
            let current = this.head;
            while(index++ < position){
              current = current.next;
            }
            current.element = element;
        }
      }
  }

四.しゅうごう
ES 6はすでにSetのapiを提供していますが、場合によっては(ブラウザがサポートしていない場合)、私たちは自分でSetを実現する必要があります.

class Set{
    constructor(){
        this.items = {};
    }
    has(value){ //   
        return this.items.hasOwnProperty(value);
    }
    add(value){ //       
        if(!this.has(value)){
            this.items[value] = value;
        }
    }
    remove(value){ //          
        if(this.has(value)){
            delete this.items[value];
        }
    }
}

集合、一般的な方法は、交差、並列、差分セットです.
五.hash表
検索速度が速いのが特徴ですが、ストレージは手動で拡張する必要があります.

class HashTable{
    constructor(){
        this.table = [];
    }
    calcuteHash(key){ //   put key   hash ，     
        let hash = 0;
        for(let s of key){
            hash += s.charCodeAt();
        }
        return hash % 100; //     100 
    }
    get(key){ //  hash     
        let hash = this.calcuteHash(key);
        return this.table[hash]
    }
    put(key,value){ //  hash    
        let hash = this.calcuteHash(key);
        this.table[hash] = value;
    }
}
let hash = new HashTable();
hash.put('abc',1);
console.log(hash.get('abc'));

六.ツリー
「木」というのは、逆さにかかっている木のように見えるからです.つまり、根が上を向いていて、葉が下を向いているからです.
先端で最もよく考察されているのは二叉樹です!
ツリーツリー:ツリー内のノードには最大2つのサブノードしかありません
二叉ルックアップツリー:左サブツリーが空でない場合、左サブツリー上のすべてのノードの値がルートノードの値よりも小さくなります.右サブツリーが空でない場合、右サブツリー上のすべてのノードの値がルートノードの値よりも大きくなります.

class Node {
    constructor(key){
        this.key = key;
        this.left = null; //   
        this.right = null;//   
    }
}
class BinarySearchTree{
    constructor(){
        this.root = null;
    }
    insert(key){
        const newNode = new Node(key);
        const insertNode = (node,newNode)=>{
            //            
            if(newNode.key < node.key){ // left
                if(node.left == null){
                    node.left = newNode;
                }else{ //                    
                    insertNode(node.left,newNode);
                }
            }else{ // right
                if(node.right == null){
                    node.right = newNode;
                }else{
                    insertNode(node.right,newNode);
                }
            }
        }
        if(!this.root){ //              
            this.root = newNode;
        }else{ //      
            insertNode(this.root,newNode)
        }
    }
}
let binaryTree = new BinarySearchTree();
binaryTree.insert(8);
binaryTree.insert(3);
binaryTree.insert(10);

七.図
図は関連するツリーと見なすことができ,隣接テーブルを用いて各ノードの関係を記述することができる.

class Graph{
    constructor(){
        this.List = {};
    }
    addNode(v){
        this.List[v] = [];
    }
    addRelation(v,w){
        //       
        this.List[v].push(w);
        this.List[w].push(v);
    }
}
const graph = new Graph();
['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'].forEach(node => graph.addNode(node));
graph.addRelation('A', 'B')
graph.addRelation('A', 'C')
graph.addRelation('A', 'D')
console.log(graph.List['A']);

ここを見ると、データ構造について一定の認識があるのではないでしょうか.次は皆さんのリーズナブルな応用を見てみましょう~
本文はあなたに役に立つと思いますか?もっと多くの人に「先端が好ましい」に注目して星標を加えて、先端の技能を高めて私の微信を加えてください:webyouxuan