Table des matières
Qu'est-ce qu'une pile
小结
Maison interface Web js tutoriel Comment implémenter une pile en JavaScript

Comment implémenter une pile en JavaScript

Jul 11, 2018 pm 04:54 PM
javascript 前端 数据结构与算法

Cet article présente principalement comment utiliser JavaScript pour implémenter une pile, qui a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Qu'est-ce qu'une pile

<.>

Comment implémenter une pile en JavaScript

  • Une pile est une collection ordonnée qui suit le principe du dernier entré, premier sorti (LIFO).

  • Les éléments nouvellement ajoutés ou à supprimer sont stockés à la fin de la pile, appelée haut de la pile, et l'autre extrémité est appelée bas de la pile.

  • Dans la pile, les nouveaux éléments sont proches du haut de la pile et les anciens éléments sont proches du bas de la pile

Exemples concrets

De nombreux exemples de stacks peuvent être trouvés dans la vie. Par exemple, parmi les assiettes empilées dans la cuisine, celles du dessus sont toujours utilisées en premier ; lorsque le contenu de la zone de saisie est supprimé, la dernière entrée est toujours supprimée en premier, les balles du chargeur sont tirées en premier telles quelles ; chargé plus tard....

Implémenter manuellement une pile

Tout d'abord, créez une classe pour représenter la pile

function Stack () { }
Copier après la connexion
Nous devons choisir une structure de données à enregistrer les éléments de la pile, vous pouvez choisir le tableau

function Stack(){
    var items = [];     //用来保存栈里的元素
}
Copier après la connexion
Ensuite, ajoutez quelques méthodes à la pile

push(element(s));   //添加新元素到栈顶
pop();              //移除栈顶的元素,同时返回被移除的元素
peek();             //返回栈顶的元素,不对栈做任何修改
isEmpty();          //如果栈里没有任何元素就返回true,否则false
clear();            //移除栈里的所有元素
size();             //返回栈里的元素个数,类似于数组的length属性
Copier après la connexion
La première méthode que nous devons implémenter est

. Utilisée pour ajouter de nouveaux éléments à la pile, une chose est très importante : cette méthode n'ajoute que le haut de la pile, qui est la fin de la pile. Par conséquent, vous pouvez écrire comme ceci : push

this.push = function (element) {
    items.push(element);
}
Copier après la connexion
En utilisant la méthode push du tableau, vous pouvez ajouter un nouvel élément à la fin du haut de la pile.

Ensuite, implémentez la méthode

pour supprimer des éléments de la pile. La pile suit le principe LIFO (dernier entré, premier sorti). Ce qui est supprimé est le dernier élément ajouté. Par conséquent, vous pouvez utiliser la méthode pop du tableau. pop

this.pop = function () {
    return items.pop();
}
Copier après la connexion
De cette façon, cette pile suit naturellement le principe LIFO

Ajoutons maintenant des méthodes auxiliaires supplémentaires à cette pile.

Si vous souhaitez connaître le dernier élément ajouté à la pile, vous pouvez utiliser la méthode

. Cette méthode renverra l'élément en haut de la pile peek

this.peek = function () {
    return items[items.length-1];
}
Copier après la connexion
Parce que la classe utilise un tableau pour enregistrer les éléments, donc ici pour accéder au dernier élément du tableau, utilisez

length-1

La prochaine méthode à implémenter est

, si la pile est vide, elle renvoie vrai, sinon elle renvoie faux : isEmpty

this.isEmpty = function () {
    return items.length == 0;
}
Copier après la connexion
En utilisant la méthode isEmpty, vous pouvez simplement déterminer si la pile est vide.

Semblable à la propriété length du tableau, nous pouvons également implémenter la longueur de la pile.

this.size = function () {
    return items.length;
}
Copier après la connexion
Étant donné que la pile utilise un tableau en interne pour stocker des éléments, la longueur du tableau est la longueur de la pile.

implémente la méthode

et la méthode clear est utilisée pour effacer tous les éléments de la pile. La méthode d'implémentation la plus simple est : clear

this.clear = function () {
    items = [];
}
Copier après la connexion
En fait, il est également possible d'appeler la méthode pop plusieurs fois, mais ce n'est pas aussi simple et rapide que cette méthode.

Enfin, afin de vérifier le contenu de la pile, vous devez implémenter une méthode d'assistance :

. Il affichera tous les éléments de la pile sur la console : print

this.print = function () {
    console.log(items.toString());
}
Copier après la connexion
À ce stade, nous avons complètement créé une

pile !

Code complet de la pile

function Stack(){

    var items = [];     //用来保存栈里的元素

    this.push = function (element) {
        items.push(element);
    }

    this.pop = function () {
        return items.pop();
    }

    this.peek = function () {
        return items[items.length-1];
    }

    this.isEmpty = function () {
        return items.length == 0;
    }

    this.size = function () {
        return items.length;
    }

    this.clear = function () {
        items = [];
    }

    this.print = function () {
        console.log(items.toString());
    }
}
Copier après la connexion
Utilisation de la classe Stack

La pile a été créée, testons-la

Tout d'abord, initialisons la classe Stack. Ensuite, vérifiez si la pile est vide

var stack = new Stack();
console.log(stack.isEmpty());         //控制台输出true
Copier après la connexion
Ensuite, ajoutez un élément à la pile :

stack.push(5);
stack.push(8);
Copier après la connexion
Si vous appelez la méthode peek, elle affichera évidemment 8, car elle C'est l'élément en haut de la pile :

console.log(stack.peek());            //控制台输出8
Copier après la connexion
Ajouter un autre élément :

stack.push(11);
console.log(stack.size());            //控制台输出3
Copier après la connexion
Nous en avons ajouté 11 autres à la pile. Si la méthode size est appelée, le résultat est 3 car il y a trois éléments sur la pile (5, 8 et 11). Si vous appelez la méthode isEmpty à ce moment, vous verrez un faux résultat (car la pile n'est pas vide à ce moment). Enfin, ajoutez-y un autre élément :

stack.push(15);
Copier après la connexion
Ensuite, appelez deux fois la méthode pop pour supprimer deux éléments de la pile :

stack.pop();
stack.pop();
console.log(stack.size());            //控制台输出2
stack.print();                        //控制台输出[5,8]
Copier après la connexion
À ce stade, la fonction de l'ensemble Test de pile terminé.

Utilisez la pile pour résoudre le problème

Utilisez la pile pour terminer la conversion hexadécimale.

Dans la vraie vie, on utilise principalement la base 10, mais en informatique, le binaire est très important, car tout dans l'ordinateur est représenté par les nombres binaires 0 et 1. Les cours d'informatique dans les universités enseigneront d'abord la conversion de base. Prenons l'exemple du binaire :

Comment implémenter une pile en JavaScript

function pideBy2 (decNumber) {

    var remStack = new Stack(),
    rem,
    binaryString = '';

    while (decNumber>0) {  //{1}
        rem = Math.floor(decNumber % 2);  //{2}
        remStack.push(rem);  //{3}
        decNumber = Math.floor(decNumber / 2);  //{4}
    }

    while (!remStack.isEmpty()) {  //{5}
        binaryString += remStack.pop().toString();
    }

    return binaryString;
}
Copier après la connexion
Dans ce code, lorsque le résultat remplit la condition d'être divisible par 2, (ligne {1}), nous obtiendrons le courant Le résultat et le reste de 2 sont placés sur la pile (lignes {2}, {3}). Ensuite, laissez le résultat être divisé également par 2 (ligne {4})

Remarque : JavaScript a un type numérique, mais il ne fait pas la distinction entre les entiers et les nombres à virgule flottante. Par conséquent, utilisez la fonction Math.floor pour que l'opération de division renvoie uniquement la partie entière.
Enfin, utilisez la méthode pop pour supprimer tous les éléments de la pile et concaténer les éléments sautés en une chaîne (ligne {5}).

Testez-le :

console.log(pideBy2(520));      //输出1000001000
console.log(pideBy2(10));       //输出1010
console.log(pideBy2(1000));     //输出1111101000
Copier après la connexion
Ensuite, vous pouvez facilement modifier l'algorithme ci-dessus afin qu'il puisse convertir le nombre décimal en n'importe quelle base. En plus de convertir des nombres décimaux et la divisibilité par 2 en nombres binaires, vous pouvez également passer d'autres bases arbitraires comme paramètres, comme l'algorithme suivant :

function baseConverter (decNumber, base) {

    var remStack = new Stack(),
    rem,
    baseString = '';
    digits = '0123456789ABCDEF';     //{6}

    while (decNumber>0) {  
        rem = Math.floor(decNumber % base);
        remStack.push(rem);  //{3}
        decNumber = Math.floor(decNumber / base);
    }

    while (!remStack.isEmpty()) {
        baseString += digits[remStack.pop()];  //{7}
    }

    return baseString;
}
Copier après la connexion

在将十进制转成二进制时,余数是0或1;在将十进制转成八进制时,余数时0-8之间的数;但是将十进制转成十六进制时,余数时0-9之间的数字加上A、B、C、D、E、F(对应10、11、12、13、14和15)。因此,需要对栈中的数字做个转化才可以(行{6}、{7})。

来测试一下输出结果:

console.log(baseConverter(1231,2));      //输出10011001111
console.log(baseConverter(1231,8));      //输出2317
console.log(baseConverter(1231,16));     //输出4CF
Copier après la connexion

显然是正确的。

小结

我们用js代码自己实现了栈。并且通过进制转换的例子来实际应用了它。栈的应用实例还有很多,比如平衡圆括号和汉诺塔。

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

如何利用js fetch实现ping效果

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

PHP et Vue : une combinaison parfaite d'outils de développement front-end PHP et Vue : une combinaison parfaite d'outils de développement front-end Mar 16, 2024 pm 12:09 PM

PHP et Vue : une combinaison parfaite d'outils de développement front-end À l'ère actuelle de développement rapide d'Internet, le développement front-end est devenu de plus en plus important. Alors que les utilisateurs ont des exigences de plus en plus élevées en matière d’expérience des sites Web et des applications, les développeurs front-end doivent utiliser des outils plus efficaces et plus flexibles pour créer des interfaces réactives et interactives. En tant que deux technologies importantes dans le domaine du développement front-end, PHP et Vue.js peuvent être considérés comme une arme parfaite lorsqu'ils sont associés. Cet article explorera la combinaison de PHP et Vue, ainsi que des exemples de code détaillés pour aider les lecteurs à mieux comprendre et appliquer ces deux éléments.

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

Questions fréquemment posées par les enquêteurs front-end Questions fréquemment posées par les enquêteurs front-end Mar 19, 2024 pm 02:24 PM

Lors des entretiens de développement front-end, les questions courantes couvrent un large éventail de sujets, notamment les bases HTML/CSS, les bases JavaScript, les frameworks et les bibliothèques, l'expérience du projet, les algorithmes et les structures de données, l'optimisation des performances, les requêtes inter-domaines, l'ingénierie front-end, les modèles de conception et les nouvelles technologies et tendances. Les questions de l'intervieweur sont conçues pour évaluer les compétences techniques du candidat, son expérience en matière de projet et sa compréhension des tendances du secteur. Par conséquent, les candidats doivent être parfaitement préparés dans ces domaines pour démontrer leurs capacités et leur expertise.

Django est-il front-end ou back-end ? Vérifiez-le! Django est-il front-end ou back-end ? Vérifiez-le! Jan 19, 2024 am 08:37 AM

Django est un framework d'application Web écrit en Python qui met l'accent sur un développement rapide et des méthodes propres. Bien que Django soit un framework Web, pour répondre à la question de savoir si Django est un front-end ou un back-end, vous devez avoir une compréhension approfondie des concepts de front-end et de back-end. Le front-end fait référence à l'interface avec laquelle les utilisateurs interagissent directement, et le back-end fait référence aux programmes côté serveur. Ils interagissent avec les données via le protocole HTTP. Lorsque le front-end et le back-end sont séparés, les programmes front-end et back-end peuvent être développés indépendamment pour mettre en œuvre respectivement la logique métier et les effets interactifs, ainsi que l'échange de données.

Explorer la technologie front-end du langage Go : une nouvelle vision du développement front-end Explorer la technologie front-end du langage Go : une nouvelle vision du développement front-end Mar 28, 2024 pm 01:06 PM

En tant que langage de programmation rapide et efficace, le langage Go est très populaire dans le domaine du développement back-end. Cependant, peu de gens associent le langage Go au développement front-end. En fait, l’utilisation du langage Go pour le développement front-end peut non seulement améliorer l’efficacité, mais également ouvrir de nouveaux horizons aux développeurs. Cet article explorera la possibilité d'utiliser le langage Go pour le développement front-end et fournira des exemples de code spécifiques pour aider les lecteurs à mieux comprendre ce domaine. Dans le développement front-end traditionnel, JavaScript, HTML et CSS sont souvent utilisés pour créer des interfaces utilisateur.

Structures de données et algorithmes Java : optimisation pratique des performances Structures de données et algorithmes Java : optimisation pratique des performances May 09, 2024 am 08:03 AM

En Java, l'optimisation des performances peut être réalisée à travers les étapes suivantes : analyser les données pour comprendre leurs caractéristiques ; sélectionner des algorithmes adaptés à des tâches spécifiques ; utiliser des techniques d'optimisation pour améliorer les performances de la structure des données à l'aide de cas pratiques (comme l'utilisation de systèmes binaires) ; arbres de recherche pour optimiser les recherches) ; Benchmarker et analyser pour quantifier les améliorations ; éviter la sur-optimisation pour garder le code simple ;

Django : Un framework magique capable de gérer à la fois le développement front-end et back-end ! Django : Un framework magique capable de gérer à la fois le développement front-end et back-end ! Jan 19, 2024 am 08:52 AM

Django : Un framework magique capable de gérer à la fois le développement front-end et back-end ! Django est un framework d'application Web efficace et évolutif. Il est capable de prendre en charge plusieurs modèles de développement Web, notamment MVC et MTV, et peut facilement développer des applications Web de haute qualité. Django prend non seulement en charge le développement back-end, mais peut également créer rapidement des interfaces frontales et obtenir un affichage de vue flexible via un langage de modèle. Django combine le développement front-end et le développement back-end dans une intégration transparente, afin que les développeurs n'aient pas à se spécialiser dans l'apprentissage.

Combinaison de Golang et de technologie front-end : découvrez comment Golang joue un rôle dans le domaine front-end Combinaison de Golang et de technologie front-end : découvrez comment Golang joue un rôle dans le domaine front-end Mar 19, 2024 pm 06:15 PM

Combinaison de Golang et de la technologie front-end : pour explorer le rôle de Golang dans le domaine front-end, des exemples de code spécifiques sont nécessaires. Avec le développement rapide d'Internet et des applications mobiles, la technologie front-end est devenue de plus en plus importante. Dans ce domaine, Golang, en tant que puissant langage de programmation back-end, peut également jouer un rôle important. Cet article explorera comment Golang est combiné avec la technologie front-end et démontrera son potentiel dans le domaine front-end à travers des exemples de code spécifiques. Le rôle de Golang dans le domaine front-end est celui d'un outil efficace, concis et facile à apprendre.

See all articles