JavaScript-objekt er en kraftig datastruktur som kombinerer nøkler og verdier . Noen ganger må vi slette en bestemt nøkkelverdi fra et objekt. Det kan gjøres ved å bruke fremgangsmåtene gitt nedenfor.
Hvordan fjerne en nøkkelverdi fra JavaScript-objekt?
Det er flere metoder som kan brukes til å fjerne en nøkkel fra et JavaScript-objekt:
Innholdsfortegnelse
- Bruke metodene reduce() og filter().
- Bruke delete-operatoren
- Destrukturering med restoperatøren
- Bruke Object.assign()
- Bruke Object.fromEntries() og Object.entries()
- Bruker _.omit-metoden til Underscore.js-biblioteket
- UseCase of Fjern en nøkkel fra JavaScript-objekt
1. Bruke metodene reduce() og filter().
De redusere() og filter() JavaScript-metoder kan sammen brukes til å fjerne en nøkkel fra et JavaScript-objekt.
Syntaks for metoden redusere() og filter():
Object.keys(object_name).filter(()=>{}).reduce(()=>{});>Eksempel:
Kodeeksemplet nedenfor implementerer filter- og reduseringsmetodene sammen for å fjerne nøkkel fra et objekt.
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] = details[key]; return newObj; }, {} ); console.log(detaljer);> Produksjon
Original Object: { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Forklaring :
pd.sammenslå
- Den opprinnelige
details>objektet inneholder egenskaper for navn, alder og land. - De
Object.keys(details)>metoden returnerer en matrise som inneholder nøklene tildetails>gjenstand. - De
.filter()>metoden filtrerer ut aldersegenskapen fra rekke nøkler. - De
.reduce()>metoden oppretter et nytt objekt (newObj>) ved å iterere over de filtrerte nøklene og tilordne dem til det nye objektet. - Til slutt blir det nye objektet uten aldersegenskapen tilordnet tilbake til
details>variabel, og den logges til konsollen.
2. Bruke sletteoperatoren
De slett operatør i JavaScript kan brukes til å fjerne en egenskap (nøkkelverdi-par) fra et objekt.
Syntaks for delete-operator:
delete objectName.propertyName;>
Eksempel:
Koden nedenfor fjerner 'alder'-nøkkelen fra objektet, og lar bare 'navn' og 'land'-nøkler i objektet.
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);> Produksjon
Original Object: { name: 'Alex', age: 30, country: 'Canada' } Object after deleting age key: { name: 'Alex', country: 'Canada' }> Forklaring :
- Den opprinnelige
details>objektet inneholder egenskaper for navn, alder og land. - De
delete>operatør brukes til å fjerne aldersegenskapen fradetails>gjenstand. - Etter å ha slettet aldersegenskapen, endres
details>objektet logges til konsollen.
3. Destrukturering med restoperatøren
Destrukturering et objekt som bruker rest-operatoren oppretter et nytt objekt uten en spesifisert egenskap, og holder de gjenværende egenskapene fra det opprinnelige objektet.
Syntaks for destruksjon med hvileoperator:
const { propertyToRemove, ...rest } = objectName;>Eksempel:
Koden nedenfor bruker destruktureringssyntaksen for å fjerne nøkler fra et objekt i 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);> Produksjon
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Forklaring :
- Den opprinnelige
details>objektet inneholder egenskaper for navn, alder og land. - Destruktureringsoppdraget
{ age, ...rest } = details;>trekker ut aldersegenskapen fradetails>objektet og tilordner det tilage>variabel. Resten av egenskapene er samlet inn i et nytt objekt kaltrest>. - Som et resultat har
rest>objektet inneholder alle egenskapene til originalendetails>objekt bortsett fra alderseiendommen. - De
rest>objektet logges deretter til konsollen, og viser objektet uten aldersegenskapen.
4. Bruke Object.assign()
Ved hjelp av Object.assign() lar deg lage et nytt objekt uten en spesifisert egenskap ved å kopiere alle egenskaper bortsett fra den du vil fjerne.
streng inn dato
Syntaks for object.assign():
const { age, ...rest } = Object.assign({}, details);>Eksempel:
Koden nedenfor implementerer Object.assign()-metoden for å fjerne eiendom fra et objekt.
Javascript const details = { name: 'Alex', age: 30, country: 'Canada' }; console.log('orignal object', details) const { age, ...rest } = Object.assign({}, details); console.log(rest);> Produksjon
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Forklaring :
- De
Object.assign({}, details)>metoden lager en grunn kopi avdetails>gjenstand. Dette forhindrer modifikasjon av originalendetails>gjenstand. - Deretter brukes objektdestrukturering for å trekke ut aldersegenskapen fra det kopierte objektet og tilordne det til
age>variabel. Resten av egenskapene er samlet inn i et nytt objekt kaltrest>. - Som et resultat har
rest>objektet inneholder alle egenskapene til originalendetails>objekt bortsett fra alderseiendommen. - De
rest>objektet logges deretter til konsollen, og viser objektet uten aldersegenskapen.
5. Bruke Object.fromEntries() og Object.entries()
De Object.entries() vil bli brukt til å konvertere objektet til en rekke nøkkelverdi-par. Så bruker vi Array.filter() for å ekskludere nøkkelverdi-paret med den angitte nøkkelen. Til slutt bruker vi Object.fromEntries() for å konvertere den filtrerte matrisen tilbake til et objekt.
Eksempel:
Koden nedenfor implementerer metodene ovenfor for å fjerne nøkkel fra et objekt i JavaScript.
Javascript const details = { name: 'Alex', age: 30, country: 'Canada' }; const { age, ...rest } = Object.fromEntries( Object.entries(details).filter(([key]) =>nøkkel !== 'alder')); console.log(rest);> Produksjon
{ name: 'Alex', country: 'Canada' }> Forklaring:
Object.entries(details)>konvertererdetails>objekt inn i en rekke nøkkelverdi-par..filter(([key]) =>nøkkel !== 'alder')>filtrerer ut nøkkel-verdi-parene der nøkkelen ikke er lik 'alder', og fjerner effektivt aldersegenskapen.Object.fromEntries()>konverterer den filtrerte matrisen av nøkkelverdi-par tilbake til et objekt.- Til slutt brukes objektdestrukturering for å trekke ut aldersegenskapen fra resultatet, som er tilordnet til
age>variabel, mens resten av egenskapene er samlet inn i et nytt objekt kaltrest>. - De
rest>objektet logges deretter til konsollen, og viser objektet uten aldersegenskapen.
6. Bruke _.omit-metoden til Underscore.js-biblioteket for å fjerne en nøkkel fra objektet
De understrek.js er et JavaScript-bibliotek som kan inkluderes i et HTML-dokument gjennom CDN-koblingen, og så har du lov til å bruke dets innebygde funksjoner.
Syntaks for _.omit-metoden til Underscore.js-biblioteket:
objName = _.omit(objName, 'ketToRemove');>
Eksempel:
Koden nedenfor vil forklare bruken av _.utelate() funksjon for å fjerne en nøkkel fra JavaScript-objekt.
HTML Fjern nøkkel fra JavaScript Objekttittel> 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'>skript><script>la detaljer = { navn: 'Alex', alder: 30, land: 'Canada' }; console.log('Objekt før fjerning: ', detaljer); detaljer = _.utelat(detaljer, 'alder'); console.log('Objekt etter fjerning: ', detaljer); script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produksjon:</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="produksjon"></p> <p dir='ltr'> <b> <strong>Forklaring</strong> </b> <span>:</span></p> <ul><li value='1'><span>Underscore.js-biblioteket er inkludert i HTML-filen ved hjelp av en script-tag.</span></li><li value='2'><span>Inne i skriptkoden, et objekt som heter</span><code class='hljs'>details></code><span>er definert med egenskaper for navn, alder og land.</span></li><li value='3'><span>De</span><code class='hljs'>_.omit()></code><span>funksjon fra Underscore.js brukes til å fjerne 'alder'-tasten fra</span><code class='hljs'>details></code><span>gjenstand.</span></li><li value='4'><span>De</span><code class='hljs'>console.log()></code><span>uttalelser brukes til å skrive ut objektet før og etter fjerning av 'alder'-nøkkelen.</span></li></ul><h2 id='usecase-of-remove-a-key-from-javascript-object'><span>UseCase of Fjern en nøkkel fra JavaScript-objekt</span></h2><h3><span>1.</span> <span>JavaScript Object keys() Metode</span> </h3><p dir='ltr'><span>De</span> <b><code class='hljs'> Object.keys()></code></b> <b> <strong>metode</strong> </b> <span>i JavaScript brukes til å hente en rekke av de tallrike egenskapsnavnene til et objekt. Den returnerer en matrise som inneholder nøklene til objektet.</span></p> <h3><span>2.</span> <span>Hvordan fjerne objekter fra en rekke objekter ved hjelp av JavaScript?</span> </h3><p dir='ltr'><span>Det er to tilnærminger til å løse dette problemet som diskuteres nedenfor:</span></p> <ul><li value='1'> <span>Bruker array.forEach()-metoden</span> </li><li value='2'> <span>Bruker array.map() metoden</span> </li></ul><h3><span>3.</span> <span>Hvordan legge til og fjerne egenskaper fra objekter i JavaScript?</span> </h3><ul><li value='1'><span>For å legge til en hvilken som helst eiendom, kan man enten bruke</span> <i> <em>objektnavn.egenskapsnavn = verdi</em> </i> <b> <strong> </strong> </b> <span>(eller)</span> <i> <em>objektnavn[egenskapsnavn] = verdi</em> </i> <span>.</span></li><li value='2'><span>For å slette enhver eiendom, kan man enkelt bruke</span> <i> <em>slett objektnavn.egenskapsnavn (</em> </i> <span>eller)</span> <i> <em>slett objektnavn[egenskapsnavn]</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="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/java-drivermanager/">Java Drivermanager</a> </li><li> <a href="/docker-container/">Docker Container</a> </li><li> <a href="/linux-vi-editor/">Linux Vi Editor</a> </li><li> <a href="/javascript-underscore/">Javascript – Underscore.js</a> </li><li> <a href="/data-mining/">Datautvinning</a> </li><li> <a href="/python-dictionary-programs/">Python Ordbok-Programmer</a> </li><li> <a href="/python-time-module/">Python Tidsmodul</a> </li><li> <a href="/godot-tutorial/">Godot Opplæring</a> </li><li> <a href="/python-numpy-random/">Python Numpy-Tilfeldig</a> </li><li> <a href="/log4j-tutorial/">Log4J Opplæring</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">Python 2D-array</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Python 2D-array med python, tutorial, tkinter, knapp, oversikt, entry, checkbutton, canvas, frame, miljøoppsett, første python-program, operatører, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/python-2d-array"> <i class="fa fa-external-link"></i> Les Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikler</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/what-is-period">Hva er en periode?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/algorithms-tutorial">Algoritmer opplæring</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/namedtuple-python">Namedtuple i Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/list-10-highest-paying-law-firms-india">Liste over 10 høyest betalende advokatfirmaer i India</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/binary-heap">Binær haug</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">Populære Innlegg</h2>
<div class="content">
<ul class="list"> <li><a href="/mylivecricket-alternatives">mylivecricket.in</a>
</li><li><a href="/java-convert-string-int">streng til heltall java</a>
</li><li><a href="/how-align-images-css">justere et bilde i css</a>
</li><li><a href="/binary-search-tree">eksempel binært søketre</a>
</li><li><a href="/how-open-file-java">java åpne en fil</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 Rettigheter Reservert | <a href="//nl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfraskrivelse</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Personvernerklæring</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>