JavaScript-objekt är en kraftfull datastruktur som kombinerar nycklar och värden . Ibland måste vi ta bort ett specifikt nyckel-värde från ett objekt. Det kan göras med hjälp av metoderna nedan.
Hur tar man bort ett nyckel-värde från JavaScript-objekt?
Det finns flera metoder som kan användas för att ta bort en nyckel från ett JavaScript-objekt:
Innehållsförteckning
- Använda metoderna reduce() och filter().
- Använda delete-operatorn
- Destrukturering med vilooperatören
- Använda Object.assign()
- Använda Object.fromEntries() och Object.entries()
- Använder _.omit-metoden för Underscore.js-biblioteket
- UseCase of Ta bort en nyckel från JavaScript-objekt
1. Använd metoderna reduce() och filter().
De minska() och den filtrera() JavaScript-metoder kan tillsammans användas för att ta bort en nyckel från ett JavaScript-objekt.
Syntax för metoden reduce() och filter():
Object.keys(object_name).filter(()=>{}).reduce(()=>{});>Exempel:
Kodexemplet nedan implementerar filtret och reduceringsmetoderna tillsammans för att ta bort nyckel från ett 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);> Produktion
Original Object: { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Förklaring :
- Originalet
details>objektet innehåller egenskaper för namn, ålder och land. - De
Object.keys(details)>metod returnerar en array som innehåller nycklarna tilldetails>objekt. - De
.filter()>metoden filtrerar bort egenskapen ålder från arrayen av nycklar. - De
.reduce()>metod skapar ett nytt objekt (newObj>) genom att iterera över de filtrerade nycklarna och tilldela dem till det nya objektet. - Slutligen tilldelas det nya objektet utan egenskapen ålder tillbaka till
details>variabel, och den loggas till konsolen.
2. Använda raderingsoperatorn
De ta bort operatör i JavaScript kan användas för att ta bort en egenskap (nyckel-värdepar) från ett objekt.
Syntax för delete-operator:
delete objectName.propertyName;>
Exempel:
Koden nedan tar bort 'ålder'-nyckeln från objektet och lämnar bara 'namn' och 'land'-nycklarna 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);> Produktion
Original Object: { name: 'Alex', age: 30, country: 'Canada' } Object after deleting age key: { name: 'Alex', country: 'Canada' }> Förklaring :
- Originalet
details>objektet innehåller egenskaper för namn, ålder och land. - De
delete>operatorn används för att ta bort egendomen ålder fråndetails>objekt. - Efter att ha tagit bort egenskapen ålder, ändras
details>objekt loggas till konsolen.
3. Destrukturering med vilooperatören
Destrukturering ett objekt som använder rest-operatorn skapar ett nytt objekt utan en specificerad egenskap, och behåller de återstående egenskaperna från det ursprungliga objektet.
Syntax för att förstöra med vilooperatör:
const { propertyToRemove, ...rest } = objectName;>Exempel:
Koden nedan använder destruktureringssyntaxen för att ta bort nycklar från ett 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);> Produktion
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Förklaring :
klass vs objekt java
- Originalet
details>objektet innehåller egenskaper för namn, ålder och land. - Destruktureringsuppdraget
{ age, ...rest } = details;>utvinner åldersegenskapen fråndetails>objekt och tilldelar det tillage>variabel. Resten av egenskaperna samlas in i ett nytt objekt som kallasrest>. - Som ett resultat av detta
rest>objektet innehåller alla egenskaper hos originaletdetails>objekt utom åldersegendomen. - De
rest>objekt loggas sedan till konsolen och visar objektet utan egenskapen ålder.
4. Använda Object.assign()
Använder sig av Object.assign() låter dig skapa ett nytt objekt utan en specificerad egenskap genom att kopiera alla egenskaper utom den du vill ta bort.
Syntax för object.assign():
const { age, ...rest } = Object.assign({}, details);>Exempel:
Koden nedan implementerar metoden Object.assign() för att ta bort egenskap från ett objekt.
Javascript const details = { name: 'Alex', age: 30, country: 'Canada' }; console.log('orignal object', details) const { age, ...rest } = Object.assign({}, details); console.log(rest);> Produktion
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Förklaring :
- De
Object.assign({}, details)>metoden skapar en ytlig kopia avdetails>objekt. Detta förhindrar modifiering av originaletdetails>objekt. - Sedan används objektdestrukturering för att extrahera åldersegenskapen från det kopierade objektet och tilldela det till
age>variabel. Resten av egenskaperna samlas in i ett nytt objekt som kallasrest>. - Som ett resultat av detta
rest>objektet innehåller alla egenskaper hos originaletdetails>objekt utom åldersegendomen. - De
rest>objekt loggas sedan till konsolen och visar objektet utan egenskapen ålder.
5. Använda Object.fromEntries() och Object.entries()
De Object.entries() kommer att användas för att konvertera objektet till en array av nyckel-värdepar. Sedan använder vi Array.filter() för att utesluta nyckel-värdeparet med den angivna nyckeln. Slutligen använder vi Object.fromEntries() för att konvertera den filtrerade arrayen tillbaka till ett objekt.
Exempel:
Koden nedan implementerar ovanstående metoder för att ta bort nyckel från ett objekt i JavaScript.
Javascript const details = { name: 'Alex', age: 30, country: 'Canada' }; const { age, ...rest } = Object.fromEntries( Object.entries(details).filter(([key]) =>nyckel !== 'ålder')); console.log(rest);> Produktion
{ name: 'Alex', country: 'Canada' }> Förklaring:
Object.entries(details)>konverterardetails>objekt till en uppsättning nyckel-värdepar..filter(([key]) =>nyckel !== 'ålder')>filtrerar bort nyckel-värdepar där nyckeln inte är lika med 'ålder', vilket effektivt tar bort egenskapen ålder.Object.fromEntries()>konverterar den filtrerade matrisen av nyckel-värdepar tillbaka till ett objekt.- Slutligen används objektdestrukturering för att extrahera åldersegenskapen från resultatet, som tilldelas till
age>variabel, medan resten av egenskaperna samlas in i ett nytt objekt som kallasrest>. - De
rest>objekt loggas sedan till konsolen och visar objektet utan egenskapen ålder.
6. Använd _.omit-metoden i Underscore.js-biblioteket för att ta bort en nyckel från objektet
De underscore.js är ett JavaScript-bibliotek som kan inkluderas i ett HTML-dokument genom dess CDN-länk och sedan får du använda dess inbyggda funktioner.
Syntax för _.omit-metoden för Underscore.js-biblioteket:
objName = _.omit(objName, 'ketToRemove');>
Exempel:
Koden nedan kommer att förklara användningen av _.utelämna() funktion för att ta bort en nyckel från JavaScript-objekt.
HTML Ta bort nyckel från JavaScript Object title> 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>låt detaljer = { namn: 'Alex', ålder: 30, land: 'Kanada' }; console.log('Objekt före borttagning: ', detaljer); detaljer = _.utelämna(detaljer, 'ålder'); console.log('Objekt efter borttagning: ', detaljer); script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</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="produktion"></p> <p dir='ltr'> <b> <strong>Förklaring</strong> </b> <span>:</span></p> <ul><li value='1'><span>Underscore.js-biblioteket ingår i HTML-filen med hjälp av en skripttagg.</span></li><li value='2'><span>Inuti skripttaggen, ett objekt som heter</span><code class='hljs'>details></code><span>definieras med egenskaper för namn, ålder och land.</span></li><li value='3'><span>De</span><code class='hljs'>_.omit()></code><span>funktion från Underscore.js används för att ta bort 'ålder'-tangenten från</span><code class='hljs'>details></code><span>objekt.</span></li><li value='4'><span>De</span><code class='hljs'>console.log()></code><span>uttalanden används för att skriva ut objektet före och efter borttagningen av 'ålder'-nyckeln.</span></li></ul><h2 id='usecase-of-remove-a-key-from-javascript-object'><span>UseCase of Ta bort en nyckel från JavaScript-objekt</span></h2><h3><span>1.</span> <span>JavaScript Object keys() Metod</span> </h3><p dir='ltr'><span>De</span> <b><code class='hljs'> Object.keys()></code></b> <b> <strong>metod</strong> </b> <span>i JavaScript används för att hämta en array av de uppräknade egenskapsnamnen för ett objekt. Den returnerar en array som innehåller objektets nycklar.</span></p> <h3><span>2.</span> <span>Hur tar man bort objekt från array av objekt med hjälp av JavaScript?</span> </h3><p dir='ltr'><span>Det finns två sätt att lösa detta problem som diskuteras nedan:</span></p> <ul><li value='1'> <span>Använder metoden array.forEach().</span> </li><li value='2'> <span>Använder metoden array.map().</span> </li></ul><h3><span>3.</span> <span>Hur lägger man till och tar bort egenskaper från objekt i JavaScript?</span> </h3><ul><li value='1'><span>För att lägga till någon egenskap kan man antingen använda</span> <i> <em>objektnamn.egenskapsnamn = värde</em> </i> <b> <strong> </strong> </b> <span>(eller)</span> <i> <em>objektnamn[egendomsnamn] = värde</em> </i> <span>.</span></li><li value='2'><span>För att ta bort någon egendom kan man enkelt använda</span> <i> <em>ta bort objektnamn.egenskapsnamn (</em> </i> <span>eller)</span> <i> <em>ta bort objektnamn[egendomsnamn]</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="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/python-selenium-exercises/">Python Selen-Övningar</a> </li><li> <a href="/gcd-lcm/">Gcd-Lcm</a> </li><li> <a href="/chemistry-class-9-cat/">Kemi-Klass-9</a> </li><li> <a href="/chemistry-class-10-cat/">Kemi-Klass-10</a> </li><li> <a href="/news/">Nyheter</a> </li><li> <a href="/cpp-map-functions/">Cpp-Map-Funktioner</a> </li><li> <a href="/geeks-premier-league-2023-cat/">Geeks Premier League 2023</a> </li><li> <a href="/coding-problems/">Kodningsproblem</a> </li><li> <a href="/bootstrap-tutorial/">Handledning För Bootstrap</a> </li><li> <a href="/kali-linux-tutorial/">Kali Linux Handledning</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Ansvarsfriskrivning</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> undefined</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/disclaimer"> <i class="fa fa-external-link"></i> Läs Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Intressanta Artiklar</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-find-hidden-apps-android">Hur man hittar dolda appar på Android</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/english-blogs/">Engelska Bloggar</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/10-best-websites-earn-money-2024">10 bästa webbplatser för att tjäna pengar 2024</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/convert-number-string-javascript">Konvertera ett tal till en sträng i JavaScript</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/eol-python">EOL i Python</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ära Inlägg</h2>
<div class="content">
<ul class="list"> <li><a href="/java-arrays">en array i java</a>
</li><li><a href="/kruskals-algorithm">kruskals algoritm</a>
</li><li><a href="/mamta-kulkarni">mamta kulkarni</a>
</li><li><a href="/dhanashree-verma">dhanashree verma</a>
</li><li><a href="/installation-pytorch">ficklampa installera</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 Alla Rättigheter Förbehållna | <a href="//ko.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfriskrivning</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Sekretesspolicy</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>