recherche
Maisoninterface Webjs tutorielComment supprimer des éléments de tableau en javascript

Comment supprimer des éléments d'un tableau en JavaScript : 1. Utilisez l'attribut length ; 2. Utilisez le mot-clé delete ; 3. Utilisez la méthode de pile [pop()] 4. Utilisez la file d'attente [shift()] ; 5. Utilisez la méthode d'opération [splice()].

Comment supprimer des éléments de tableau en javascript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur DELL G3.

Comment supprimer des éléments d'un tableau en JavaScript :

1 L'attribut length

L'attribut length du tableau en JavaScript. est tout à fait unique - Il n'est pas en lecture seule. Par conséquent, vous pouvez définir cette propriété pour supprimer des éléments de la fin du tableau ou ajouter de nouveaux éléments.

var colors = ["red", "blue", "grey"]; // 创建一个包含3个字符串的数组
colors.length = 2;
console.log(colors[2]); // undefined

2. mot-clé delete

JavaScript fournit un mot-clé delete pour supprimer (effacer) les éléments du tableau.

var colors = ["red", "blue", "grey", "green"];
delete colors[0];
console.log(colors); // [undefined, "blue", "grey", "green"]

Il convient de noter qu'après avoir utilisé delete pour supprimer un élément, la longueur du tableau ne change pas, mais l'élément supprimé est défini sur indéfini.

3. Méthode de pile pop()

L'objet Array en JavaScript fournit une méthode de pile pop() pour afficher et renvoyer le dernier élément du tableau. être utilisé dans une certaine mesure comme une suppression.

La règle d'accès à la structure de données de la pile est FILO (First In Last Out). L'opération de pile ajoute des éléments en haut de la pile et supprime des éléments du haut de la pile. Utilisez la méthode pop(). , qui peut supprimer le dernier élément du tableau et renvoie cet élément, en décrémentant la longueur du tableau de un.

var colors = ["red", "blue", "grey"];
var color = colors.pop();
console.log(color); // "grey"
console.log(colors.length); // 2

On peut voir que lorsque la méthode pop() est appelée, le tableau renvoie le dernier élément, qui est "gris", et il ne reste que deux éléments dans le tableau.

4. Méthode de file d'attente shift()

L'objet Array en JavaScript fournit une méthode de file d'attente shift() pour afficher et renvoyer le premier élément du tableau. peut également être utilisé comme une suppression dans une certaine mesure.

La règle d'accès à la structure de données de la file d'attente est FIFO (First In First Out). La file d'attente ajoute des éléments à la fin de la liste et supprime les éléments du début de la liste. il peut déplacer Diviser le premier élément du tableau et renvoyer cet élément, et réduire la longueur du tableau de un.

var colors = ["red", "blue", "grey"];
var color = colors.shift();
console.log(color); // "red"
console.log(colors.length); // 2

On peut voir que lorsque la méthode shift() est appelée, le tableau renvoie le premier élément, qui est "rouge", et il ne reste que deux éléments dans le tableau.

5. Méthode d'opération splice()

L'objet Array en JavaScript fournit une méthode splice() pour effectuer des opérations spécifiques sur le tableau. splice() est probablement la méthode de tableau la plus puissante. Elle peut être utilisée de plusieurs manières. Ici, nous présentons uniquement la méthode de suppression des éléments du tableau. Lors de la suppression d'éléments du tableau, il peut supprimer n'importe quel nombre d'éléments en spécifiant seulement 2 paramètres : la position du premier élément à supprimer et le nombre d'éléments à supprimer.

var colors = ["red", "blue", "grey"];
var color = colors.splice(0, 1);
console.log(color); // "red"
console.log(colors); // ["blue", "grey"]

On peut voir que lorsque la méthode splice(0, 1) est appelée, un élément est supprimé du tableau en commençant par le premier élément.

6. Méthode d'itération

La méthode dite d'itération consiste à utiliser une boucle pour itérer les éléments du tableau et supprimer les éléments qui correspondent aux éléments à supprimer . L'endroit le plus couramment utilisé peut être lorsque les éléments du tableau sont des objets et que les éléments du tableau peuvent être supprimés en fonction d'un certain attribut de l'objet (tel que l'ID).

La première méthode utilise la boucle ForEach la plus courante pour comparer les éléments et les supprimer après les avoir trouvés.

var colors = ["red", "blue", "grey"];
colors.forEach(function(item, index, arr) {
    if(item === "red") {
        arr.splice(index, 1);
    }
});

Vous pouvez voir que la méthode splice() est également nécessaire pour réaliser la suppression. La boucle sert simplement à trouver des éléments spécifiques. Une autre idée consiste à pousser les éléments qui n'ont pas besoin d'être supprimés dans un nouveau tableau dans une boucle, ce qui peut également atteindre l'objectif de supprimer faussement des éléments spécifiques.

Pour la deuxième méthode, nous utilisons la méthode du filtre dans la boucle.

var colors = ["red", "blue", "grey"];
colors = colors.filter(function(item) {
    return item != "red"
});
 
console.log(colors); // ["blue", "grey"]

Le code est très simple. Découvrez le nombre d'éléments dont les éléments ne sont pas rouges et remettez-le en couleurs (en fait, vous obtenez un nouveau tableau, pas supprimez le tableau d'origine dans une certaine mesure). cela peut être considéré comme une suppression. Le but d'un élément spécifique.

7. Méthode de prototype de prototype

Vous pouvez atteindre l'objectif de suppression en ajoutant une méthode au prototype du tableau.

Array.prototype.remove = function(dx) {
  if(isNaN(dx) || dx > this.length){
    return false;
  }
  for(var i = 0, n = 0; i < this.length; i++) {
    if(this[i] != this[dx]) {
      this[n++] = this[i];
    }
  }
  this.length -= 1;
};
var colors = ["red", "blue", "grey"];
colors.remove(1);
console.log(colors); // ["red", "grey"]

Cette méthode consiste en fait à implémenter vous-même une logique de suppression, puis à ajouter la méthode de suppression à l'objet prototype d'Array, puis tous les objets Array de cet environnement peuvent utiliser cette méthode. Bien que cela soit possible, il n’est pas recommandé de modifier le prototype d’un objet natif dans une application de production. La raison est simple. Si une méthode manque dans une certaine implémentation et que vous ajoutez cette méthode au prototype de l'objet natif, alors lorsque le code est exécuté dans une autre implémentation prenant en charge cette méthode, cela peut provoquer un conflit de nom. Et cela pourrait accidentellement entraîner le remplacement des méthodes natives.

Recommandations d'apprentissage gratuites associées : javascript(vidéo)

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
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
Comprendre le moteur JavaScript: détails de l'implémentationComprendre le moteur JavaScript: détails de l'implémentationApr 17, 2025 am 12:05 AM

Comprendre le fonctionnement du moteur JavaScript en interne est important pour les développeurs car il aide à écrire du code plus efficace et à comprendre les goulots d'étranglement des performances et les stratégies d'optimisation. 1) Le flux de travail du moteur comprend trois étapes: analyse, compilation et exécution; 2) Pendant le processus d'exécution, le moteur effectuera une optimisation dynamique, comme le cache en ligne et les classes cachées; 3) Les meilleures pratiques comprennent l'évitement des variables globales, l'optimisation des boucles, l'utilisation de const et de locations et d'éviter une utilisation excessive des fermetures.

Python vs JavaScript: la courbe d'apprentissage et la facilité d'utilisationPython vs JavaScript: la courbe d'apprentissage et la facilité d'utilisationApr 16, 2025 am 12:12 AM

Python convient plus aux débutants, avec une courbe d'apprentissage en douceur et une syntaxe concise; JavaScript convient au développement frontal, avec une courbe d'apprentissage abrupte et une syntaxe flexible. 1. La syntaxe Python est intuitive et adaptée à la science des données et au développement back-end. 2. JavaScript est flexible et largement utilisé dans la programmation frontale et côté serveur.

Python vs JavaScript: communauté, bibliothèques et ressourcesPython vs JavaScript: communauté, bibliothèques et ressourcesApr 15, 2025 am 12:16 AM

Python et JavaScript ont leurs propres avantages et inconvénients en termes de communauté, de bibliothèques et de ressources. 1) La communauté Python est amicale et adaptée aux débutants, mais les ressources de développement frontal ne sont pas aussi riches que JavaScript. 2) Python est puissant dans les bibliothèques de science des données et d'apprentissage automatique, tandis que JavaScript est meilleur dans les bibliothèques et les cadres de développement frontaux. 3) Les deux ont des ressources d'apprentissage riches, mais Python convient pour commencer par des documents officiels, tandis que JavaScript est meilleur avec MDNWEBDOCS. Le choix doit être basé sur les besoins du projet et les intérêts personnels.

De C / C à JavaScript: comment tout cela fonctionneDe C / C à JavaScript: comment tout cela fonctionneApr 14, 2025 am 12:05 AM

Le passage de C / C à JavaScript nécessite de s'adapter à la frappe dynamique, à la collecte des ordures et à la programmation asynchrone. 1) C / C est un langage dactylographié statiquement qui nécessite une gestion manuelle de la mémoire, tandis que JavaScript est dynamiquement typé et que la collecte des déchets est automatiquement traitée. 2) C / C doit être compilé en code machine, tandis que JavaScript est une langue interprétée. 3) JavaScript introduit des concepts tels que les fermetures, les chaînes de prototypes et la promesse, ce qui améliore la flexibilité et les capacités de programmation asynchrones.

Moteurs JavaScript: comparaison des implémentationsMoteurs JavaScript: comparaison des implémentationsApr 13, 2025 am 12:05 AM

Différents moteurs JavaScript ont des effets différents lors de l'analyse et de l'exécution du code JavaScript, car les principes d'implémentation et les stratégies d'optimisation de chaque moteur diffèrent. 1. Analyse lexicale: convertir le code source en unité lexicale. 2. Analyse de la grammaire: générer un arbre de syntaxe abstrait. 3. Optimisation et compilation: générer du code machine via le compilateur JIT. 4. Exécuter: Exécutez le code machine. Le moteur V8 optimise grâce à une compilation instantanée et à une classe cachée, SpiderMonkey utilise un système d'inférence de type, résultant en différentes performances de performances sur le même code.

Au-delà du navigateur: Javascript dans le monde réelAu-delà du navigateur: Javascript dans le monde réelApr 12, 2025 am 12:06 AM

Les applications de JavaScript dans le monde réel incluent la programmation côté serveur, le développement des applications mobiles et le contrôle de l'Internet des objets: 1. La programmation côté serveur est réalisée via Node.js, adaptée au traitement de demande élevé simultané. 2. Le développement d'applications mobiles est effectué par le reactnatif et prend en charge le déploiement multiplateforme. 3. Utilisé pour le contrôle des périphériques IoT via la bibliothèque Johnny-Five, adapté à l'interaction matérielle.

Construire une application SaaS multi-locataire avec next.js (intégration backend)Construire une application SaaS multi-locataire avec next.js (intégration backend)Apr 11, 2025 am 08:23 AM

J'ai construit une application SAAS multi-locataire fonctionnelle (une application EdTech) avec votre outil technologique quotidien et vous pouvez faire de même. Premièrement, qu'est-ce qu'une application SaaS multi-locataire? Les applications saas multi-locataires vous permettent de servir plusieurs clients à partir d'un chant

Comment construire une application SaaS multi-locataire avec Next.js (Frontend Integration)Comment construire une application SaaS multi-locataire avec Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

Cet article démontre l'intégration frontale avec un backend sécurisé par permis, construisant une application fonctionnelle EdTech SaaS en utilisant Next.js. Le frontend récupère les autorisations des utilisateurs pour contrôler la visibilité de l'interface utilisateur et garantit que les demandes d'API adhèrent à la base de rôles

See all articles

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

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

SublimeText3 Linux nouvelle version

SublimeText3 Linux nouvelle version

Dernière version de SublimeText3 Linux

Télécharger la version Mac de l'éditeur Atom

Télécharger la version Mac de l'éditeur Atom

L'éditeur open source le plus populaire

SublimeText3 version Mac

SublimeText3 version Mac

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

VSCode Windows 64 bits Télécharger

VSCode Windows 64 bits Télécharger

Un éditeur IDE gratuit et puissant lancé par Microsoft