Maison interface Web Questions et réponses frontales suppression de la boucle javascript

suppression de la boucle javascript

May 17, 2023 pm 06:41 PM

JavaScript est un langage de programmation très populaire avec un large éventail d'applications. Au cours du processus de développement, nous devons souvent traiter des données, ce qui implique de parcourir des tableaux et des objets. Dans le développement réel, il est parfois nécessaire de supprimer certains éléments d'un tableau ou d'un objet. Alors, comment supprimer ces éléments dans une boucle ? Cet article présentera la méthode de suppression de boucle en JavaScript et ses précautions.

1. Supprimer des éléments d'un tableau dans une boucle for

La façon la plus simple de supprimer des éléments d'un tableau en JavaScript est d'utiliser une boucle for pour parcourir le tableau et supprimer les éléments correspondants.

Regardons d'abord un exemple :

const arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
  if (arr[i] === 2 || arr[i] === 4) {
    arr.splice(i, 1);
    i--;
  }
}

console.log(arr); // [1, 3, 5]
Copier après la connexion

Dans le code ci-dessus, nous utilisons une boucle for pour parcourir l'arr du tableau et déterminer si l'élément actuel est 2 ou 4. Si tel est le cas, appelez La méthode arr.splice(i, 1) supprime l'élément et décrémente la variable de boucle i de 1 pour garantir que les éléments suivants ne seront pas manqués. Les résultats d'exécution sont les suivants :

[1, 3, 5]
Copier après la connexion

Cette méthode est réalisable, mais il y a un problème important : chaque fois qu'un élément est supprimé, l'index de l'ensemble du tableau doit être réajusté, ce qui entraîne de mauvaises performances . Lorsque le nombre d’éléments du tableau est important, la suppression des boucles prendra beaucoup de temps. Si vous souhaitez supprimer uniquement un petit nombre d’éléments, vous pouvez utiliser cette méthode. Cependant, lors de la suppression d'un grand nombre d'éléments, d'autres méthodes sont recommandées.

2. Supprimez les éléments du tableau en boucle for inversée

En plus d'utiliser la boucle for traditionnelle, vous pouvez également utiliser la boucle for inversée pour supprimer des éléments du tableau. Par rapport à la boucle for forward, l'utilisation de la boucle for reverse peut résoudre efficacement le problème du réarrangement des index et améliorer les performances.

Par exemple, pour supprimer les nombres pairs dans un tableau, vous pouvez utiliser le code suivant :

const arr = [1, 2, 3, 4, 5];

for (let i = arr.length - 1; i >= 0; i--) {
  if (arr[i] % 2 === 0) {
    arr.splice(i, 1);
  }
}

console.log(arr); // [1, 3, 5]
Copier après la connexion

L'implémentation de cette méthode est fondamentalement la même, sauf que le sens de la boucle est opposé. Commencez par l’index de longueur 1 du tableau et réduisez progressivement la valeur de l’index pour accéder au tableau. L'utilisation de cette méthode peut éviter le déplacement incrémentiel du tableau et améliorer l'efficacité du code.

3. Utilisez la méthode de filtrage pour supprimer des éléments du tableau

En utilisant la méthode de filtrage d'ES6, vous pouvez également supprimer facilement des éléments du tableau. La fonction de filtre renvoie un nouveau tableau qui remplit les conditions sans modifier le tableau d'origine.

Par exemple, pour supprimer les nombres pairs dans un tableau, le code est le suivant :

const arr = [1, 2, 3, 4, 5];

// 返回所有奇数
arr = arr.filter(item => item % 2 !== 0);

console.log(arr); // [1, 3, 5]
Copier après la connexion

Cette méthode utilise la fonction flèche d'ES6 pour déterminer si la valeur de chaque élément est un nombre impair, l'élément est conservé dans le nouveau tableau. Après avoir supprimé les éléments pairs, le nouveau tableau est le résultat dont nous avons besoin.

Il est à noter que la méthode filter renverra un nouveau tableau sans modifier le tableau d'origine. Si vous devez modifier le tableau d'origine, vous pouvez attribuer cette méthode au tableau d'origine.

4. Utilisez la méthode forEach pour supprimer des éléments du tableau

En plus de la méthode de filtrage, vous pouvez également utiliser la méthode forEach pour supprimer des éléments du tableau. L'idée principale de cette méthode est de supprimer du tableau les éléments qui ne remplissent pas les conditions après avoir parcouru le tableau.

Par exemple, supprimez les éléments pairs du tableau :

let arr = [1, 2, 3, 4, 5];

arr.forEach((item, index) => {
  if (item % 2 === 0) {
    arr.splice(index, 1);
  }
});

console.log(arr); // [1, 3, 5]
Copier après la connexion

Le code ci-dessus utilise une boucle forEach pour parcourir le tableau arr. est conservé dans le tableau d'origine, sinon supprimez l'élément. Il convient de noter qu'après la suppression d'éléments dans la boucle, la longueur et l'index du tableau changeront, ce qui peut entraîner l'omission de certains éléments. Par conséquent, il est recommandé, lorsque vous utilisez cette méthode, de sauvegarder d'abord la baie pour éviter des erreurs imprévisibles.

5. Précautions

Lors de la suppression d'éléments de tableau dans une boucle, différentes méthodes ont des domaines d'application et des précautions différents. Lors du développement, il est nécessaire de choisir une méthode appropriée en fonction de la situation réelle.

  1. Si vous ne supprimez qu'un petit nombre d'éléments, vous pouvez utiliser la méthode traditionnelle de boucle for ou la méthode de boucle for inversée, mais vous devez faire attention au problème du réajustement de l'index après suppression.
  2. Si le nombre d'éléments à supprimer est important, vous pouvez utiliser la méthode filter ou la méthode forEach, mais il convient de noter qu'après avoir supprimé des éléments dans la boucle, la longueur et l'index de le tableau d'origine peut changer, affectant ainsi le Traverse ultérieur.
  3. Lors de la suppression d'éléments du tableau, il est recommandé de sauvegarder le tableau pour éviter des erreurs imprévisibles.
  4. Lors de la suppression d'éléments dans une boucle for, vous devez parcourir de l'arrière vers l'avant, sinon certains éléments seront manqués.

En général, supprimer des éléments de tableau dans une boucle est une compétence de base dans le développement JavaScript. La maîtriser rendra le code plus efficace et plus beau. Plusieurs méthodes de mise en œuvre sont présentées ci-dessus et vous devez choisir en fonction de la situation réelle lors de leur utilisation.

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

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)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

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)

Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires? Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires? Mar 19, 2025 pm 03:58 PM

L'article traite de l'utilisation Effecte dans React, un crochet pour gérer les effets secondaires comme la récupération des données et la manipulation DOM dans les composants fonctionnels. Il explique l'utilisation, les effets secondaires courants et le nettoyage pour éviter des problèmes comme les fuites de mémoire.

Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable? Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable? Mar 18, 2025 pm 01:44 PM

Les fonctions d'ordre supérieur dans JavaScript améliorent la concision du code, la réutilisabilité, la modularité et les performances par abstraction, modèles communs et techniques d'optimisation.

Comment fonctionne le currying en JavaScript et quels sont ses avantages? Comment fonctionne le currying en JavaScript et quels sont ses avantages? Mar 18, 2025 pm 01:45 PM

L'article traite du curry dans JavaScript, une technique transformant les fonctions mulguments en séquences de fonctions à argument unique. Il explore la mise en œuvre du currying, des avantages tels que des applications partielles et des utilisations pratiques, améliorant le code

Comment fonctionne l'algorithme de réconciliation React? Comment fonctionne l'algorithme de réconciliation React? Mar 18, 2025 pm 01:58 PM

L'article explique l'algorithme de réconciliation de React, qui met à jour efficacement le DOM en comparant les arbres DOM virtuels. Il traite des avantages de la performance, des techniques d'optimisation et des impacts sur l'expérience utilisateur. Compte de charge: 159

Comment connectez-vous les composants React au magasin Redux à l'aide de Connect ()? Comment connectez-vous les composants React au magasin Redux à l'aide de Connect ()? Mar 21, 2025 pm 06:23 PM

L'article discute de la connexion des composants React à Redux Store à l'aide de Connect (), expliquant MapStateToproprop, MapDispatchToprops et des impacts de performances.

Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants? Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants? Mar 19, 2025 pm 03:59 PM

L'article explique UseContext dans React, qui simplifie la gestion de l'État en évitant le forage des accessoires. Il traite des avantages tels que les améliorations centralisées de l'État et des performances grâce à des redevances réduites.

Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements? Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements? Mar 19, 2025 pm 04:10 PM

L'article discute de la prévention des comportements par défaut dans les gestionnaires d'événements à l'aide de la méthode empêchée dedEfault (), de ses avantages tels que une expérience utilisateur améliorée et des problèmes potentiels tels que les problèmes d'accessibilité.

Quels sont les avantages et les inconvénients des composants contrôlés et incontrôlés? Quels sont les avantages et les inconvénients des composants contrôlés et incontrôlés? Mar 19, 2025 pm 04:16 PM

L'article traite des avantages et des inconvénients des composants contrôlés et incontrôlés dans la réaction, en se concentrant sur des aspects tels que la prévisibilité, la performance et les cas d'utilisation. Il conseille les facteurs à considérer lors du choix entre eux.

See all articles