logo

Come rimuovere una coppia chiave-valore dall'oggetto JavaScript?

L'oggetto JavaScript è una potente struttura dati che combina chiavi E valori . A volte, dobbiamo eliminare un valore-chiave specifico da un oggetto. Può essere fatto utilizzando gli approcci indicati di seguito.

rimuovere-un-valore-chiave-da-javascript-obj

Come rimuovere un valore-chiave dall'oggetto JavaScript?

Esistono diversi metodi che possono essere utilizzati per rimuovere una chiave da un oggetto JavaScript:



Tabella dei contenuti

1. Utilizzando i metodi reduce() e filter()

IL ridurre() e il filtro() i metodi di JavaScript possono essere utilizzati insieme per rimuovere una chiave da un oggetto JavaScript.

Sintassi del metodo reduce() e filter():

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

Esempio:

L'esempio di codice seguente implementa insieme i metodi filter e reduce per rimuovere la chiave da un oggetto.

Javascript
let details = {  name: 'Alex',  age: 30,  country: 'Canada' }; console.log('Original Object: ', details); details = Object.keys(details).filter(objKey =>objKey !== 'età').reduce((nuovoObj, chiave) => { nuovoObj[chiave] = dettagli[chiave]; return nuovoObj; }, {} ); console.log(dettagli);>

Produzione
Original Object: { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }>

Spiegazione :

  • L'originaledetails>l'oggetto contiene proprietà per nome, età e paese.
  • ILObject.keys(details)>restituisce un array contenente le chiavi deldetails>oggetto.
  • IL.filter()>Il metodo filtra la proprietà age dall'array di chiavi.
  • IL.reduce()>Il metodo crea un nuovo oggetto (newObj>) eseguendo un'iterazione sulle chiavi filtrate e assegnandole al nuovo oggetto.
  • Infine, il nuovo oggetto senza la proprietà age viene assegnato nuovamente al filedetails>variabile e viene registrato sulla console.

2. Utilizzo dell'operatore delete

IL operatore cancella in JavaScript può essere utilizzato per rimuovere una proprietà (coppia chiave-valore) da un oggetto.

Sintassi dell'operatore delete:

delete objectName.propertyName;>

Esempio:

Il codice seguente rimuove la chiave 'età' dall'oggetto, lasciando solo le chiavi 'nome' e 'paese' nell'oggetto.

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);>

Produzione
Original Object: { name: 'Alex', age: 30, country: 'Canada' } Object after deleting age key: { name: 'Alex', country: 'Canada' }>

Spiegazione :

come trovare cose nascoste su Android
  • L'originaledetails>l'oggetto contiene proprietà per nome, età e paese.
  • ILdelete>viene utilizzato per rimuovere la proprietà age dal filedetails>oggetto.
  • Dopo aver eliminato la proprietà age, il file modificatodetails>l'oggetto viene registrato sulla console.

3. Destrutturazione con l'Operatore del Riposo

Destrutturante un oggetto che utilizza l'operatore rest crea un nuovo oggetto senza una proprietà specificata, mantenendo le proprietà rimanenti dell'oggetto originale.

Sintassi per distruggere con l'operatore rest:

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

Esempio:

Il codice seguente utilizza la sintassi di destrutturazione per rimuovere le chiavi da un oggetto in 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);>

Produzione
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }>

Spiegazione :

  • L'originaledetails>l'oggetto contiene proprietà per nome, età e paese.
  • L'incarico destrutturante{ age, ...rest } = details;>estrae la proprietà age dadetails>oggetto e lo assegna aage>variabile. Il resto delle proprietà vengono raccolte in un nuovo oggetto chiamatorest>.
  • Di conseguenza, ilrest>L'oggetto contiene tutte le proprietà dell'originaledetails>oggetto ad eccezione della proprietà age.
  • ILrest>l'oggetto viene quindi registrato nella console, mostrando l'oggetto senza la proprietà age.

4. Utilizzo di Object.assign()

Utilizzando Oggetto.assign() ti consente di creare un nuovo oggetto senza una proprietà specificata copiando tutte le proprietà tranne quella che desideri rimuovere.

Sintassi di object.assign():

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

Esempio:

Il codice seguente implementa il metodo Object.assign() per rimuovere la proprietà da un oggetto.

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

Produzione
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }>

Spiegazione :

  • ILObject.assign({}, details)>Il metodo crea una copia superficiale del filedetails>oggetto. Ciò impedisce la modifica dell'originaledetails>oggetto.
  • Quindi, la destrutturazione dell'oggetto viene utilizzata per estrarre la proprietà age dall'oggetto copiato e assegnarla al fileage>variabile. Il resto delle proprietà vengono raccolte in un nuovo oggetto chiamatorest>.
  • Di conseguenza, ilrest>L'oggetto contiene tutte le proprietà dell'originaledetails>oggetto ad eccezione della proprietà age.
  • ILrest>l'oggetto viene quindi registrato nella console, mostrando l'oggetto senza la proprietà age.

5. Utilizzo di Object.fromEntries() e Object.entries()

IL Object.entries() verrà utilizzato per convertire l'oggetto in un array di coppie chiave-valore. Quindi usiamo Array.filtro() per escludere la coppia chiave-valore con la chiave specificata. Infine, utilizziamo Object.fromEntries() per riconvertire l'array filtrato in un oggetto.

Esempio:

Il codice seguente implementa i metodi sopra indicati per rimuovere la chiave da un oggetto in JavaScript.

Bharti Jha
Javascript
const details = {  name: 'Alex',  age: 30,  country: 'Canada' }; const { age, ...rest } = Object.fromEntries(  Object.entries(details).filter(([key]) =>chiave !== 'età')); console.log(resto);>

Produzione
{ name: 'Alex', country: 'Canada' }>

Spiegazione:

  • Object.entries(details)>converte ildetails>oggetto in un array di coppie chiave-valore.
  • .filter(([key]) =>chiave !== 'età')>filtra le coppie chiave-valore in cui la chiave non è uguale a 'età', rimuovendo di fatto la proprietà età.
  • Object.fromEntries()>riconverte l'array filtrato di coppie chiave-valore in un oggetto.
  • Infine, la destrutturazione dell'oggetto viene utilizzata per estrarre la proprietà age dal risultato, che viene assegnata aage>variabile, mentre il resto delle proprietà vengono raccolte in un nuovo oggetto chiamatorest>.
  • ILrest>l'oggetto viene quindi registrato nella console, mostrando l'oggetto senza la proprietà age.

6. Utilizzo del metodo _.omit della libreria Underscore.js per rimuovere una chiave dall'oggetto

IL trattino basso.js è una libreria JavaScript che può essere inclusa in un documento HTML tramite il suo collegamento CDN e quindi puoi utilizzare le sue funzioni integrate.

Sintassi del metodo _.omit della libreria Underscore.js:

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

Esempio:

Il codice seguente spiegherà l'uso di _.omettere() funzione per rimuovere una chiave dall'oggetto JavaScript.

HTML
     Rimuovi la chiave dal titolo dell'oggetto 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'>copione><script>let dettagli = { nome: 'Alex', età: 30, paese: 'Canada' };  console.log('Oggetto prima della rimozione: ', dettagli);  dettagli = _.omit(dettagli, 'età');  console.log('Oggetto dopo la rimozione: ', dettagli);  script> corpo> html>></pre> </code> <p dir='ltr'>  <b>  <strong>Produzione:</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="produzione"></p> <p dir='ltr'>  <b>  <strong>Spiegazione</strong>  </b>  <span>:</span></p> <ul><li value='1'><span>La libreria Underscore.js è inclusa nel file HTML utilizzando un tag script.</span></li><li value='2'><span>All'interno del tag script, un oggetto denominato</span><code class='hljs'>details></code><span>è definito con proprietà per nome, età e paese.</span></li><li value='3'><span>IL</span><code class='hljs'>_.omit()></code><span>La funzione di Underscore.js viene utilizzata per rimuovere la chiave 'età' dal file</span><code class='hljs'>details></code><span>oggetto.</span></li><li value='4'><span>IL</span><code class='hljs'>console.log()></code><span>le istruzioni vengono utilizzate per stampare l'oggetto prima e dopo la rimozione della chiave 'age'.</span></li></ul><h2 id='usecase-of-remove-a-key-from-javascript-object'><span>Caso d'uso di Rimuovere una chiave dall'oggetto JavaScript</span></h2><h3><span>1.</span> <span>Metodo JavaScript Object keys()</span> </h3><p dir='ltr'><span>IL</span>  <b><code class='hljs'> Object.keys()></code></b>   <b>  <strong>metodo</strong>  </b>  <span>in JavaScript viene utilizzato per recuperare un array di nomi di proprietà enumerabili di un oggetto. Restituisce un array contenente le chiavi dell'oggetto.</span></p> <h3><span>2.</span> <span>Come rimuovere l'oggetto dalla serie di oggetti utilizzando JavaScript?</span> </h3><p dir='ltr'><span>Esistono due approcci per risolvere questo problema che vengono discussi di seguito:</span></p> <ul><li value='1'> <span>Utilizzando il metodo array.forEach()</span> </li><li value='2'> <span>Utilizzando il metodo array.map()</span> </li></ul><h3><span>3.</span> <span>Come aggiungere e rimuovere proprietà dagli oggetti in JavaScript?</span> </h3><ul><li value='1'><span>Per aggiungere qualsiasi proprietà, è possibile utilizzare</span>  <i>  <em>nome_oggetto.nome_proprietà = valore</em>  </i>   <b>  <strong> </strong>  </b>  <span>(O)</span>  <i>  <em>nome_oggetto[nome_proprietà] = valore</em>  </i>  <span>.</span></li><li value='2'><span>Per eliminare qualsiasi proprietà, è possibile utilizzare facilmente</span>  <i>  <em>elimina nome_oggetto.nome_proprietà (</em>  </i>  <span>O)</span>  <i>  <em>elimina nome_oggetto[nome_proprietà]</em>  </i>  <span>.</span></li></ul><p dir='ltr'>  <br></p>  <br>  <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="">Categoria</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li> <a href="/gmail/">Gmail</a> </li><li> <a href="/python-library/">Libreria Python</a> </li><li> <a href="/java-array-programs/">Programmi Array Java</a> </li><li> <a href="/ssc-general-awareness/">Consapevolezza Generale Del Ssc</a> </li><li> <a href="/commerce-11th/">Commercio - 11</a> </li><li> <a href="/it-problems-solutions/">Problemi E Soluzioni Informatiche</a> </li><li> <a href="/english-difference-between/">Differenza-Inglese-Tra</a> </li><li> <a href="/chemistry-class-9-cat/">Chimica-Classe-9</a> </li><li> <a href="/big-endian/">Grande Endian</a> </li><li> <a href="/gmail-questions/">Domande Su Gmail</a> </li>
                                
                            </ul>
                        </div><!--//content-->  
                    </div><!--//section-inner-->                 
                </aside><!--//aside-->
                
                 <aside class="testimonials aside section">
                	 <div class="section-inner">
                        <div class="content">
                            <div class="item">
  								<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>                                                   
                            </div>
                        </div>
                    </div>
                   <div class="section-inner">
                        <h2 class="heading">Ordinamento di unione simultaneo nella memoria condivisa</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> Dato un numero 'n' e n numeri, ordinare i numeri utilizzando l'ordinamento simultaneo. (Suggerimento: prova a utilizzare le chiamate di sistema shmget, shmat). Parte 1: l'algoritmo (COME?) Crea ricorsivamente due processi secondari, uno per la metà sinistra, uno per la metà destra. Se il numero di elementi nell'array per un processo è inferiore a 5, eseguire un ordinamento per inserimento. Il genitore dei due figli unisce quindi il risultato e ritorna al genitore e così via. Ma come renderlo simultaneo?Parte 2: La logica (PERCHÉ?) La parte importante della soluzione a questo problema non è algoritmica, ma spiegare i concetti di sistema operativo e kernel. Per ottenere un ordinamento simultaneo, abbiamo bisogno di un modo per far sì che due processi funzionino contemporaneamente sullo stesso array. Per rendere le cose più semplici Linux fornisce molte chiamate di sistema tramite semplici endpoint API. Due di essi sono shmget() (per l'allocazione della memoria condivisa) e shmat() (per le operazioni sulla memoria condivisa). Creiamo uno spazio di memoria condiviso tra il processo figlio che forziamo. Ogni segmento è diviso in figlio sinistro e figlio destro che vengono ordinati, la parte interessante è che lavorano contemporaneamente! shmget() richiede al kernel di allocare una pagina condivisa per entrambi i processi. Perché il tradizionale fork() non funziona? La risposta sta in ciò che fa effettivamente fork(). Dalla documentazione, "fork() crea un nuovo processo duplicando il processo chiamante". Il processo figlio e il processo genitore vengono eseguiti in spazi di memoria separati. Al momento di fork() entrambi gli spazi di memoria hanno lo stesso contenuto. Le scritture in memoria, le modifiche al descrittore di file (fd), ecc., eseguite da uno dei processi non influiscono sull'altro. Quindi abbiamo bisogno di un segmento di memoria condivisa.</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/concurrent-merge-sort-in-shared-memory"> <i class="fa fa-external-link"></i> Per Saperne Di Più</a> </p> 
                            
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
               
                            
                 <aside class="languages aside section">
                    <div class="section-inner">
                        <h2 class="heading">Articoli Interessanti</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"> <strong> <a href="/directory-submission">Invio della directory</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/initialize-an-empty-dictionary-python">Inizializza un dizionario vuoto in Python</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/java-files/">File Java</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/best-smile-world">Il miglior sorriso del mondo</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/what-is-10-10">Quanto fa il 10% di 10</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">Messaggi Popolari</h2>
                        <div class="content">
                            <ul class="list"> <li><a href="/ddl-commands-sql">comandi sql ddl</a>
</li><li><a href="/java-if-else-statement">altrimenti esegui il loop in Java</a>
</li><li><a href="/round-robin-scheduling-algorithm">programmazione round robin</a>
</li><li><a href="/immutable-list-java">elenco immutabile</a>
</li><li><a href="/gimp-fonts">elenco dei caratteri in gimp</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 Tutti I Diritti Riservati |  <a href="//nl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Disclaimer</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Chi Siamo</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica Sulla Riservatezza</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>
	<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
        #toTopBtn {
            position: fixed;
            bottom: 25px;
            right: 25px;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            background-color: #213141;
            color: white;
            border: none;
            border-radius: 8px;
            width: 50px;
            height: 50px;
            font-size: 24px;
            cursor: pointer;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }
        #toTopBtn:hover {
            background-color: #555;
        }
    `,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>