JavaScript-object is een krachtige datastructuur die combineert sleutels En waarden . Soms moeten we een specifieke sleutelwaarde uit een object verwijderen. Dit kan worden gedaan met behulp van de onderstaande benaderingen.
Hoe verwijder ik een sleutelwaarde uit een JavaScript-object?
Er zijn verschillende methoden die kunnen worden gebruikt om een sleutel uit een JavaScript-object te verwijderen:
Inhoudsopgave
- De methoden reduce() en filter() gebruiken
- Met behulp van de verwijderoperator
- Destructureren met de Rest Operator
- Object.assign() gebruiken
- Object.fromEntries() en Object.entries() gebruiken
- Met behulp van de _.omit-methode van de Underscore.js-bibliotheek
- UseCase van Een sleutel verwijderen uit een JavaScript-object
1. Gebruik de methoden reduce() en filter().
De verminderen() en de filter() methoden van JavaScript kunnen samen worden gebruikt om een sleutel uit een JavaScript-object te verwijderen.
Syntaxis van de methode reduce() en filter():
Object.keys(object_name).filter(()=>{}).reduce(()=>{});>Voorbeeld:
In het onderstaande codevoorbeeld worden de filter- en reduce-methoden samen geïmplementeerd om de sleutel uit een object te verwijderen.
Javascript let details = { name: 'Alex', age: 30, country: 'Canada' }; console.log('Original Object: ', details); details = Object.keys(details).filter(objKey =>objKey !== 'leeftijd').reduce((newObj, sleutel) => { newObj[sleutel] = details[sleutel]; return newObj; }, {} ); console.log(details);> Uitvoer
Original Object: { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Uitleg :
arraylijst
- Het origineel
details>object bevat eigenschappen voor naam, leeftijd en land. - De
Object.keys(details)>methode retourneert een array met de sleutels van dedetails>voorwerp. - De
.filter()>methode filtert de leeftijdseigenschap uit de reeks sleutels. - De
.reduce()>methode creëert een nieuw object (newObj>) door de gefilterde sleutels te doorlopen en deze aan het nieuwe object toe te wijzen. - Ten slotte wordt het nieuwe object zonder de eigenschap age terug toegewezen aan de
details>variabele, en deze wordt geregistreerd op de console.
2. Gebruik de verwijderoperator
De operator verwijderen in JavaScript kan worden gebruikt om een eigenschap (sleutelwaardepaar) uit een object te verwijderen.
Syntaxis van de verwijderoperator:
delete objectName.propertyName;>
Voorbeeld:
De onderstaande code verwijdert de sleutel ‘leeftijd’ uit het object, waardoor alleen de sleutels ‘naam’ en ‘land’ in het object achterblijven.
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);> Uitvoer
Original Object: { name: 'Alex', age: 30, country: 'Canada' } Object after deleting age key: { name: 'Alex', country: 'Canada' }> Uitleg :
- Het origineel
details>object bevat eigenschappen voor naam, leeftijd en land. - De
delete>operator wordt gebruikt om de leeftijdseigenschap uit dedetails>voorwerp. - Na het verwijderen van de leeftijdseigenschap wordt het gewijzigd
details>object wordt geregistreerd op de console.
3. Destructureren met de Rest Operator
Destructurerend een object dat de rest-operator gebruikt, creëert een nieuw object zonder een opgegeven eigenschap, waarbij de resterende eigenschappen van het originele object behouden blijven.
Syntaxis voor vernietigen met restoperator:
const { propertyToRemove, ...rest } = objectName;>Voorbeeld:
De onderstaande code gebruikt de destructurerende syntaxis om sleutels uit een object in JavaScript te verwijderen.
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);> Uitvoer
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Uitleg :
- Het origineel
details>object bevat eigenschappen voor naam, leeftijd en land. - De destructureringsopdracht
{ age, ...rest } = details;>haalt de leeftijdseigenschap uit dedetails>object en wijst het toe aan deage>variabel. De rest van de eigenschappen worden verzameld in een nieuw object genaamdrest>. - Als gevolg hiervan is de
rest>object bevat alle eigenschappen van het origineeldetails>object met uitzondering van de ouderdomseigenschap. - De
rest>object wordt vervolgens in de console geregistreerd, waarbij het object wordt weergegeven zonder de eigenschap age.
4. Object.assign() gebruiken
Gebruik makend van Object.assign() Hiermee kunt u een nieuw object maken zonder een opgegeven eigenschap door alle eigenschappen te kopiëren, behalve degene die u wilt verwijderen.
Syntaxis van object.assign():
const { age, ...rest } = Object.assign({}, details);>Voorbeeld:
De onderstaande code implementeert de Object.assign() -methode om eigenschappen van een object te verwijderen.
Javascript const details = { name: 'Alex', age: 30, country: 'Canada' }; console.log('orignal object', details) const { age, ...rest } = Object.assign({}, details); console.log(rest);> Uitvoer
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Uitleg :
- De
Object.assign({}, details)>methode creëert een ondiepe kopie van dedetails>voorwerp. Dit voorkomt wijziging van het origineeldetails>voorwerp. - Vervolgens wordt objectdestructurering gebruikt om de eigenschap age uit het gekopieerde object te extraheren en toe te wijzen aan de
age>variabel. De rest van de eigenschappen worden verzameld in een nieuw object genaamdrest>. - Als gevolg hiervan is de
rest>object bevat alle eigenschappen van het origineeldetails>object met uitzondering van de ouderdomseigenschap. - De
rest>object wordt vervolgens in de console geregistreerd, waarbij het object wordt weergegeven zonder de eigenschap age.
5. Object.fromEntries() en Object.entries() gebruiken
De Object.entries() wordt gebruikt om het object om te zetten in een array van sleutelwaardeparen. Vervolgens gebruiken wij Array.filter() om het sleutelwaardepaar met de opgegeven sleutel uit te sluiten. Ten slotte gebruiken we Object.fromEntries() om de gefilterde array terug naar een object te converteren.
Voorbeeld:
De onderstaande code implementeert de bovenstaande methoden om de sleutel uit een object in JavaScript te verwijderen.
Javascript const details = { name: 'Alex', age: 30, country: 'Canada' }; const { age, ...rest } = Object.fromEntries( Object.entries(details).filter(([key]) =>sleutel !== 'leeftijd')); console.log(rest);> Uitvoer
{ name: 'Alex', country: 'Canada' }> Uitleg:
Object.entries(details)>converteert dedetails>object in een array van sleutel-waardeparen..filter(([key]) =>sleutel !== 'leeftijd')>filtert de sleutel-waardeparen eruit waarbij de sleutel niet gelijk is aan ‘leeftijd’, waardoor de leeftijdseigenschap effectief wordt verwijderd.Object.fromEntries()>converteert de gefilterde array van sleutel-waardeparen terug naar een object.- Ten slotte wordt objectdestructurering gebruikt om de age-eigenschap uit het resultaat te extraheren, dat wordt toegewezen aan de
age>variabele, terwijl de rest van de eigenschappen worden verzameld in een nieuw object genaamdrest>. - De
rest>object wordt vervolgens in de console geregistreerd, waarbij het object wordt weergegeven zonder de eigenschap age.
6. Gebruik de _.omit-methode van de Underscore.js-bibliotheek om een sleutel uit het object te verwijderen
De onderstrepingsteken.js is een JavaScript-bibliotheek die via de CDN-link in een HTML-document kan worden opgenomen en vervolgens mag u de ingebouwde functies ervan gebruiken.
Syntaxis van de _.omit-methode van de Underscore.js-bibliotheek:
objName = _.omit(objName, 'ketToRemove');>
Voorbeeld:
De onderstaande code legt het gebruik van de _.weglaten() functie om een sleutel uit een JavaScript-object te verwijderen.
HTML Sleutel uit JavaScript verwijderen Objecttitel> 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'>schrift><script>let details = { naam: 'Alex', leeftijd: 30, land: 'Canada' }; console.log('Object vóór verwijdering: ', details); details = _.omit(details, 'leeftijd'); console.log('Object na verwijdering: ', details); script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</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="uitgang"></p> <p dir='ltr'> <b> <strong>Uitleg</strong> </b> <span>:</span></p> <ul><li value='1'><span>De Underscore.js-bibliotheek is met behulp van een scripttag in het HTML-bestand opgenomen.</span></li><li value='2'><span>Binnen de scripttag staat een object met de naam</span><code class='hljs'>details></code><span>is gedefinieerd met eigenschappen voor naam, leeftijd en land.</span></li><li value='3'><span>De</span><code class='hljs'>_.omit()></code><span>functie van Underscore.js wordt gebruikt om de ‘age’-sleutel uit de</span><code class='hljs'>details></code><span>voorwerp.</span></li><li value='4'><span>De</span><code class='hljs'>console.log()></code><span>verklaringen worden gebruikt om het object af te drukken voor en na het verwijderen van de ‘leeftijd’-sleutel.</span></li></ul><h2 id='usecase-of-remove-a-key-from-javascript-object'><span>UseCase van Een sleutel verwijderen uit een JavaScript-object</span></h2><h3><span>1.</span> <span>JavaScript-objectsleutels() Methode</span> </h3><p dir='ltr'><span>De</span> <b><code class='hljs'> Object.keys()></code></b> <b> <strong>methode</strong> </b> <span>in JavaScript wordt gebruikt om een array van de opsombare eigenschapsnamen van een object op te halen. Het retourneert een array met de sleutels van het object.</span></p> <h3><span>2.</span> <span>Hoe verwijder ik een object uit een reeks objecten met JavaScript?</span> </h3><p dir='ltr'><span>Er zijn twee benaderingen om dit probleem op te lossen, die hieronder worden besproken:</span></p> <ul><li value='1'> <span>Methode array.forEach() gebruiken</span> </li><li value='2'> <span>Met behulp van de methode array.map().</span> </li></ul><h3><span>3.</span> <span>Hoe eigenschappen van objecten in JavaScript toevoegen en verwijderen?</span> </h3><ul><li value='1'><span>Voor het toevoegen van eigendommen kan men beide gebruiken</span> <i> <em>objectnaam.eigenschapsnaam = waarde</em> </i> <b> <strong> </strong> </b> <span>(of)</span> <i> <em>objectnaam[eigenschapsnaam] = waarde</em> </i> <span>.</span></li><li value='2'><span>Voor het verwijderen van eigendommen kan men gemakkelijk gebruiken</span> <i> <em>verwijder objectnaam.eigenschapsnaam (</em> </i> <span>of)</span> <i> <em>verwijder objectnaam[eigenschapsnaam]</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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/python-regex-programs/">Python Regex-Programma's</a> </li><li> <a href="/python-matplotlib/">Python-Matplotlib</a> </li><li> <a href="/geeks-premier-league-2023-cat/">Geeks Premier League 2023</a> </li><li> <a href="/operators/">Exploitanten</a> </li><li> <a href="/india-gk/">Indiase Gk</a> </li><li> <a href="/kali-linux-tutorial/">Kali Linux-Zelfstudie</a> </li><li> <a href="/net-framework/">.Net-Framework</a> </li><li> <a href="/mockito-tutorial/">Mockito-Zelfstudie</a> </li><li> <a href="/python-tkinter/">Python-Tkinter</a> </li><li> <a href="/list/">Lijst Van</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Bitsgewijze operatoren in C++</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Een informaticaportaal voor nerds. Het bevat goed geschreven, goed doordachte en goed uitgelegde artikelen over computerwetenschappen en programmeren, quizzen en vragen over oefenen/competitief programmeren/bedrijfsinterviews.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/bitwise-operators-c"> <i class="fa fa-external-link"></i> Lees Verder</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikelen</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/rj45-color-code">RJ45-kleurcode</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/web-browser">Webbrowser</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-use-concatenate-excel">Concatenatie gebruiken in Excel</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/caesar-cipher-cryptography">Caesarcijfer in cryptografie</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-full-form-ites">Wat is de volledige vorm van ITES</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">Populaire Berichten</h2>
<div class="content">
<ul class="list"> <li><a href="/how-sort-string-array-java">Java-sorteerreeksen</a>
</li><li><a href="/java-map-interface">kaart in Java</a>
</li><li><a href="/run-command-linux">Linux run-opdracht</a>
</li><li><a href="/binary-search-java">binair zoeken in Java</a>
</li><li><a href="/java-string-contains">string.bevat Java</a>
</li><li><a href="/how-read-csv-file-java">Hoe te lezen van CSV-bestand in Java</a>
</li><li><a href="/difference-between-mb">mb versus gb</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 Alle Rechten Voorbehouden | <a href="//no.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij?</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid</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>