logo

TechCodeview

Comment supprimer une paire clé-valeur d'un objet JavaScript ?

L'objet JavaScript est une structure de données puissante qui combine clés et valeurs . Parfois, nous devons supprimer une valeur-clé spécifique d’un objet. Cela peut être fait en utilisant les approches indiquées ci-dessous.

supprimer-une-valeur-clé-de-javascript-obj

Comment supprimer une clé-valeur d'un objet JavaScript ?



Il existe plusieurs méthodes qui peuvent être utilisées pour supprimer une clé d'un objet JavaScript :

Table des matières

1. Utilisation des méthodes réduire() et filtre()

Le réduire() et le filtre() Les méthodes JavaScript peuvent être utilisées ensemble pour supprimer une clé d'un objet JavaScript.



Syntaxe des méthodes réduire() et filtre() :

Object.keys(object_name).filter(()=>{}).reduce(()=>{});>

Exemple:

piles Java

L'exemple de code ci-dessous implémente les méthodes de filtrage et de réduction ensemble pour supprimer la clé d'un objet.

Javascript 
let details = {  name: 'Alex',  age: 30,  country: 'Canada' }; console.log('Original Object: ', details); details = Object.keys(details).filter(objKey =>objKey !== 'age').reduce((newObj, key) => { newObj[key] = détails[key]; return newObj; }, {} ); console.log(détails);>
Sortir 
Original Object: { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }>

Explication :



  • L'originaldetails>L'objet contient des propriétés pour le nom, l'âge et le pays.
  • LeObject.keys(details)>La méthode renvoie un tableau contenant les clés dudetails>objet.
  • Le.filter()>La méthode filtre la propriété age du tableau de clés.
  • Le.reduce()>La méthode crée un nouvel objet (newObj>) en parcourant les clés filtrées et en les attribuant au nouvel objet.
  • Enfin, le nouvel objet sans la propriété age est réaffecté audetails>variable, et elle est enregistrée sur la console.

2. Utilisation de l'opérateur de suppression

Le supprimer l'opérateur en JavaScript peut être utilisé pour supprimer une propriété (paire clé-valeur) d'un objet.

tri des tuples python

Syntaxe de l'opérateur de suppression : 

delete objectName.propertyName;>

Exemple:

Le code ci-dessous supprime la clé « âge » de l'objet, ne laissant que les clés « nom » et « pays » dans l'objet.

Javascript 
const details = {  name: 'Alex',  age: 30,  country: 'Canada' }; console.log('Original Object:', details); delete details.age; console.log('Object after deleting age key:', details);>
Sortir 
Original Object: { name: 'Alex', age: 30, country: 'Canada' } Object after deleting age key: { name: 'Alex', country: 'Canada' }>

Explication :

  • L'originaldetails>L'objet contient des propriétés pour le nom, l'âge et le pays.
  • Ledelete>L'opérateur est utilisé pour supprimer la propriété age dudetails>objet.
  • Après avoir supprimé la propriété age, la valeur modifiéedetails>L'objet est enregistré sur la console.

3. Déstructuration avec l'opérateur Rest

Déstructuration un objet utilisant l'opérateur rest crée un nouvel objet sans propriété spécifiée, en conservant les propriétés restantes de l'objet d'origine.

système de fichiers Linux

Syntaxe de destruction avec l'opérateur rest : 

const { propertyToRemove, ...rest } = objectName;>

Exemple:

Le code ci-dessous utilise la syntaxe de déstructuration pour supprimer les clés d'un objet en JavaScript.

Javascript 
const details = {  name: 'Alex',  age: 30,  country: 'Canada' }; console.log('orignal object', details) // after using destructuring and rest operator  const { age, ...rest } = details; console.log(rest);>
Sortir 
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }>

Explication :

  • L'originaldetails>L'objet contient des propriétés pour le nom, l'âge et le pays.
  • La mission de déstructuration{ age, ...rest } = details;>extrait la propriété d'âge dudetails>objet et l'affecte auage>variable. Le reste des propriétés est rassemblé dans un nouvel objet appelérest>.
  • En conséquence, lerest>l'objet contient toutes les propriétés de l'originaldetails>objet à l’exception de la propriété age.
  • Lerest>L'objet est ensuite enregistré sur la console, affichant l'objet sans la propriété age.

4. Utilisation d'Object.assign()

En utilisant Objet.assign() vous permet de créer un nouvel objet sans propriété spécifiée en copiant toutes les propriétés sauf celle que vous souhaitez supprimer.

Syntaxe de object.assign() : 

const { age, ...rest } = Object.assign({}, details);>

Exemple:

Le code ci-dessous implémente la méthode Object.assign() pour supprimer la propriété d'un objet.

Javascript 
const details = {  name: 'Alex',  age: 30,  country: 'Canada' }; console.log('orignal object', details) const { age, ...rest } = Object.assign({}, details); console.log(rest);>
Sortir 
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }>

Explication :

  • LeObject.assign({}, details)>La méthode crée une copie superficielle dudetails>objet. Cela empêche la modification de l'originaldetails>objet.
  • Ensuite, la déstructuration de l'objet est utilisée pour extraire la propriété age de l'objet copié et l'attribuer à l'objet copié.age>variable. Le reste des propriétés est rassemblé dans un nouvel objet appelérest>.
  • En conséquence, lerest>l'objet contient toutes les propriétés de l'originaldetails>objet à l’exception de la propriété age.
  • Lerest>L'objet est ensuite enregistré sur la console, affichant l'objet sans la propriété age.

5. Utilisation de Object.fromEntries() et Object.entries()

Le Objet.entrées() sera utilisé pour convertir l'objet en un tableau de paires clé-valeur. Ensuite, nous utilisons Tableau.filter() pour exclure la paire clé-valeur avec la clé spécifiée. Enfin, nous utilisons Object.fromEntries() pour reconvertir le tableau filtré en objet.

Exemple:

Le code ci-dessous implémente les méthodes ci-dessus pour supprimer la clé d'un objet en JavaScript.

le défilement de la souris ne fonctionne pas
Javascript 
const details = {  name: 'Alex',  age: 30,  country: 'Canada' }; const { age, ...rest } = Object.fromEntries(  Object.entries(details).filter(([key]) =>clé !== 'âge')); console.log(reste);>
Sortir 
{ name: 'Alex', country: 'Canada' }>

Explication:

  • Object.entries(details)>convertit ledetails>objet dans un tableau de paires clé-valeur.
  • .filter(([key]) =>clé !== 'âge')>filtre les paires clé-valeur où la clé n'est pas égale à « age », supprimant ainsi la propriété age.
  • Object.fromEntries()>reconvertit le tableau filtré de paires clé-valeur en un objet.
  • Enfin, la déstructuration des objets permet d'extraire du résultat la propriété age, qui est affectée à l'objet.age>variable, tandis que le reste des propriétés est collecté dans un nouvel objet appelérest>.
  • Lerest>L'objet est ensuite enregistré sur la console, affichant l'objet sans la propriété age.

6. Utilisation de la méthode _.omit de la bibliothèque Underscore.js pour supprimer une clé d'un objet

Le soulignement.js est une bibliothèque JavaScript qui peut être incluse dans un document HTML via son lien CDN et vous êtes ensuite autorisé à utiliser ses fonctions intégrées.

Syntaxe de la méthode _.omit de la bibliothèque Underscore.js :

objName = _.omit(objName, 'ketToRemove');>

Exemple:

Le code ci-dessous expliquera l'utilisation du _.omettre() fonction pour supprimer une clé d’un objet JavaScript.

HTML 
     Supprimer la clé du titre de l'objet JavaScript> head> <body> <script src= 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js' integrity= 'sha512-2V49R8ndaagCOnwmj8QnbT1Gz/rie17UouD9Re5WxbzRVUGoftCu5IuqqtAM9+UC3fwfHCSJR1hkzNQh/2wdtg==' crossorigin='anonymous' referrerpolicy='no-referrer'>scénario><script>let details = { nom : 'Alex', âge : 30 ans, pays : 'Canada' } ;  console.log('Objet avant suppression : ', détails);  détails = _.omit(détails, 'âge');  console.log('Objet après suppression : ', détails);  script> corps> html>></pre> </code> <p dir='ltr'>  <b>  <strong>Sortir:</strong>  </b>  </p> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-object/32/how-remove-key-value-pair-from-javascript-object-2.webp' alt="sortir"></p> <p dir='ltr'>  <b>  <strong>Explication</strong>  </b>  <span>:</span></p> <ul><li value='1'><span>La bibliothèque Underscore.js est incluse dans le fichier HTML à l'aide d'une balise de script.</span></li><li value='2'><span>À l'intérieur de la balise script, un objet nommé</span><code class='hljs'>details></code><span>est défini avec des propriétés pour le nom, l'âge et le pays.</span></li><li value='3'><span>Le</span><code class='hljs'>_.omit()></code><span>La fonction de Underscore.js est utilisée pour supprimer la clé « âge » du</span><code class='hljs'>details></code><span>objet.</span></li><li value='4'><span>Le</span><code class='hljs'>console.log()></code><span>les instructions sont utilisées pour imprimer l’objet avant et après la suppression de la clé « âge ».</span></li></ul><h2 id='usecase-of-remove-a-key-from-javascript-object'><span>Cas d'utilisation de Supprimer une clé d'un objet JavaScript</span></h2><h3><span>1.</span> <span>Méthode JavaScript Object Keys()</span> </h3><p dir='ltr'><span>Le</span>  <b><code class='hljs'> Object.keys()></code></b>   <b>  <strong>méthode</strong>  </b>  <span>en JavaScript est utilisé pour récupérer un tableau des noms de propriétés énumérables d'un objet. Il renvoie un tableau contenant les clés de l'objet.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-create-array-objects-java">tableau d'objets en Java</a>
</blockquote> <h3><span>2.</span> <span>Comment supprimer un objet d'un tableau d'objets à l'aide de JavaScript ?</span> </h3><p dir='ltr'><span>Il existe deux approches pour résoudre ce problème, décrites ci-dessous :</span></p> <ul><li value='1'> <span>Utilisation de la méthode array.forEach()</span> </li><li value='2'> <span>Utilisation de la méthode array.map()</span> </li></ul><h3><span>3.</span> <span>Comment ajouter et supprimer des propriétés d'objets en JavaScript ?</span> </h3><ul><li value='1'><span>Pour ajouter une propriété, on peut soit utiliser</span>  <i>  <em>nom_objet.nom_propriété = valeur</em>  </i>   <b>  <strong> </strong>  </b>  <span>(ou)</span>  <i>  <em>nom_objet[nom_propriété] = valeur</em>  </i>  <span>.</span></li><li value='2'><span>Pour supprimer n'importe quelle propriété, on pourrait facilement utiliser</span>  <i>  <em>supprimer nom_objet.nom_propriété (</em>  </i>  <span>ou)</span>  <i>  <em>supprimer nom_objet[nom_propriété]</em>  </i>  <span>.</span></li></ul><p dir='ltr'>  <br></p>  <br>  <br></article>
                         
                        </div><!--//content-->
                    </div><!--//section-inner-->                 
                </section><!--//section-->
    
            </div><!--//primary-->
            <div class="secondary col-md-4 col-sm-12 col-xs-12">
                  <aside class="info aside section">
                    <div class="section-inner">
                        <h2 class="">Catégorie</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li> <a href="/reactjs-tutorial/">Tutoriel Reactjs</a> </li><li> <a href="/c-set-function/">Fonction Définie En C++</a> </li><li> <a href="/python-list/">Liste Python</a> </li><li> <a href="/rxjs-tutorial/">Tutoriel Rxjs</a> </li><li> <a href="/csharp-operators/">Opérateurs Csharp</a> </li><li> <a href="/data-structures-hash/">Structures De Données-Hash</a> </li><li> <a href="/excel-how/">Excel-Comment Faire</a> </li><li> <a href="/backend-development/">Développement Backend</a> </li><li> <a href="/software-engineering/">Génie Logiciel</a> </li><li> <a href="/chemical-compounds/">Composants Chimiques</a> </li>
                                
                            </ul>
                        </div><!--//content-->  
                    </div><!--//section-inner-->                 
                </aside><!--//aside-->
                
                 <aside class="testimonials aside section">
                   <div class="section-inner">
                        <h2 class="heading">Comment parcourir les fichiers d'un répertoire en utilisant Python ?</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> Un portail informatique pour les geeks. Il contient des articles sur l'informatique et la programmation bien écrits, bien pensés et bien expliqués, des quiz et des questions pratiques/de programmation compétitive/d'entretien d'entreprise.</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/how-iterate-over-files-directory-using-python"> <i class="fa fa-external-link"></i> Lire La Suite</a> </p> 
                            
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
               
                            
                 <aside class="languages aside section">
                    <div class="section-inner">
                        <h2 class="heading">Des Articles Intéressants</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"> <strong> <a href="/node-js-fs-writefile-method">Méthode Node JS fs.writeFile()</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/how-sort-pandas-dataframe">Comment trier le DataFrame Pandas ?</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/abstract-method-java">Méthode abstraite en Java</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/how-iterate-list-java">Comment parcourir une liste en Java</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/loops-java">Boucles en Java</a> </strong> </span>
                                    
                                </li><!--//item-->
                               
                            </ul>
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
              
                 <aside class="list music aside section">
                    <div class="section-inner">
                        <h2 class="heading">Articles Populaires</h2>
                        <div class="content">
                            <ul class="list"> <li><a href="/java-convert-string-int">chaîne en entier en java</a>
</li><li><a href="/javascript-string-trim">coupe de chaîne javascript</a>
</li><li><a href="/java-constant">constantes Java</a>
</li><li><a href="/javascript-operators">opérateurs javascript</a>
</li><li><a href="/how-get-input-from-user-java">entrée Java</a>
</li> 
                                
                                
                            </ul>
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
              
            </div><!--//secondary-->    
        </div><!--//row-->
    </div><!--//masonry-->
    
	    <footer class="footer">
        <div class="container text-center">
                <span>
Copyright ©2025 Tous Les Droits Sont Réservés |  <a href="//de.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité</a>  </span>
        </div>
    </footer>
 
         
    <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>    
    

    <script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>     
	
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
	
</body>
</html>