JavaScript-Objekt ist eine leistungsstarke Datenstruktur, die kombiniert Schlüssel Und Werte . Manchmal müssen wir einen bestimmten Schlüsselwert aus einem Objekt löschen. Dies kann mit den unten aufgeführten Ansätzen erfolgen.
Wie entferne ich einen Schlüsselwert aus einem JavaScript-Objekt?
Es gibt mehrere Methoden, mit denen ein Schlüssel aus einem JavaScript-Objekt entfernt werden kann:
Inhaltsverzeichnis
- Verwendung der Methoden Reduce() und Filter()
- Verwendung des Löschoperators
- Destrukturierung mit dem Rest-Operator
- Verwenden von Object.assign()
- Verwenden von Object.fromEntries() und Object.entries()
- Verwendung der _.omit-Methode der Underscore.js-Bibliothek
- Anwendungsfall: Entfernen eines Schlüssels aus einem JavaScript-Objekt
1. Verwendung der Methoden Reduce() und Filter()
Der reduzieren() und das Filter() Methoden von JavaScript können zusammen verwendet werden, um einen Schlüssel aus einem JavaScript-Objekt zu entfernen.
Syntax der Methoden Reduce() und Filter():
Object.keys(object_name).filter(()=>{}).reduce(()=>{});>Beispiel:
Camelcase-Python
Das folgende Codebeispiel implementiert die Filter- und Reduzierungsmethoden zusammen, um den Schlüssel aus einem Objekt zu entfernen.
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(details);> Ausgabe
Original Object: { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Erläuterung :
- Das Original
details>Das Objekt enthält Eigenschaften für Name, Alter und Land. - Der
Object.keys(details)>Die Methode gibt ein Array zurück, das die Schlüssel der enthältdetails>Objekt. - Der
.filter()>Die Methode filtert die Alterseigenschaft aus dem Schlüsselarray heraus. - Der
.reduce()>Methode erstellt ein neues Objekt (newObj>), indem Sie die gefilterten Schlüssel durchlaufen und sie dem neuen Objekt zuweisen. - Abschließend wird das neue Objekt ohne die Alterseigenschaft wieder dem zugewiesen
details>Variable und wird in der Konsole protokolliert.
2. Verwendung des Löschoperators
Der Löschoperator in JavaScript kann verwendet werden, um eine Eigenschaft (Schlüssel-Wert-Paar) aus einem Objekt zu entfernen.
Syntax des Löschoperators:
delete objectName.propertyName;>
Beispiel:
Der folgende Code entfernt den Schlüssel „Alter“ aus dem Objekt und hinterlässt nur die Schlüssel „Name“ und „Land“ im Objekt.
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);> Ausgabe
Original Object: { name: 'Alex', age: 30, country: 'Canada' } Object after deleting age key: { name: 'Alex', country: 'Canada' }> Erläuterung :
- Das Original
details>Das Objekt enthält Eigenschaften für Name, Alter und Land. - Der
delete>Der Operator wird verwendet, um die Alterseigenschaft aus dem zu entfernendetails>Objekt. - Nach dem Löschen der Alterseigenschaft wird die geänderte
details>Das Objekt wird in der Konsole protokolliert.
3. Destrukturierung mit dem Rest-Operator
Destrukturierend Ein Objekt, das den Rest-Operator verwendet, erstellt ein neues Objekt ohne eine angegebene Eigenschaft und behält die übrigen Eigenschaften des ursprünglichen Objekts bei.
Syntax für die Zerstörung mit dem Rest-Operator:
const { propertyToRemove, ...rest } = objectName;>Beispiel:
Java zu einem Array hinzufügen
Der folgende Code verwendet die Destrukturierungssyntax, um Schlüssel aus einem Objekt in JavaScript zu entfernen.
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);> Ausgabe
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Erläuterung :
- Das Original
details>Das Objekt enthält Eigenschaften für Name, Alter und Land. - Der Destrukturierungsauftrag
{ age, ...rest } = details;>extrahiert die Alterseigenschaft aus demdetails>Objekt und weist es dem zuage>Variable. Die restlichen Eigenschaften werden in einem neuen Objekt mit dem Namen zusammengefasstrest>. - Infolgedessen ist die
rest>Das Objekt enthält alle Eigenschaften des Originalsdetails>Objekt mit Ausnahme der Alterseigenschaft. - Der
rest>Das Objekt wird dann in der Konsole protokolliert und zeigt das Objekt ohne die Alterseigenschaft an.
4. Verwenden von Object.assign()
Benutzen Object.assign() ermöglicht es Ihnen, ein neues Objekt ohne eine angegebene Eigenschaft zu erstellen, indem Sie alle Eigenschaften außer der, die Sie entfernen möchten, kopieren.
Syntax von object.assign():
const { age, ...rest } = Object.assign({}, details);>Beispiel:
Der folgende Code implementiert die Methode Object.assign(), um Eigenschaften von einem Objekt zu entfernen.
Javascript const details = { name: 'Alex', age: 30, country: 'Canada' }; console.log('orignal object', details) const { age, ...rest } = Object.assign({}, details); console.log(rest);> Ausgabe
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Erläuterung :
Round-Robin-Planungsalgorithmus
- Der
Object.assign({}, details)>Die Methode erstellt eine flache Kopie derdetails>Objekt. Dies verhindert eine Veränderung des Originalsdetails>Objekt. - Anschließend wird die Objektdestrukturierung verwendet, um die Alterseigenschaft aus dem kopierten Objekt zu extrahieren und sie dem zuzuweisen
age>Variable. Die restlichen Eigenschaften werden in einem neuen Objekt mit dem Namen zusammengefasstrest>. - Infolgedessen ist die
rest>Das Objekt enthält alle Eigenschaften des Originalsdetails>Objekt mit Ausnahme der Alterseigenschaft. - Der
rest>Das Objekt wird dann in der Konsole protokolliert und zeigt das Objekt ohne die Alterseigenschaft an.
5. Verwenden von Object.fromEntries() und Object.entries()
Der Object.entries() wird verwendet, um das Objekt in ein Array von Schlüssel-Wert-Paaren umzuwandeln. Dann verwenden wir Array.filter() um das Schlüssel-Wert-Paar mit dem angegebenen Schlüssel auszuschließen. Schließlich verwenden wir Object.fromEntries(), um das gefilterte Array wieder in ein Objekt umzuwandeln.
Beispiel:
Der folgende Code implementiert die oben genannten Methoden, um Schlüssel aus einem Objekt in JavaScript zu entfernen.
Javascript const details = { name: 'Alex', age: 30, country: 'Canada' }; const { age, ...rest } = Object.fromEntries( Object.entries(details).filter(([key]) =>Schlüssel !== 'Alter')); console.log(rest);> Ausgabe
{ name: 'Alex', country: 'Canada' }> Erläuterung:
Object.entries(details)>wandelt diedetails>Objekt in ein Array von Schlüssel-Wert-Paaren..filter(([key]) =>Schlüssel !== 'age')>Filtert die Schlüssel-Wert-Paare heraus, bei denen der Schlüssel nicht gleich „Alter“ ist, und entfernt so effektiv die Alterseigenschaft.Object.fromEntries()>Konvertiert das gefilterte Array von Schlüssel-Wert-Paaren zurück in ein Objekt.- Schließlich wird die Objektdestrukturierung verwendet, um die Alterseigenschaft aus dem Ergebnis zu extrahieren, die dem zugewiesen wird
age>Variable, während die restlichen Eigenschaften in einem neuen Objekt namens gesammelt werdenrest>. - Der
rest>Das Objekt wird dann in der Konsole protokolliert und zeigt das Objekt ohne die Alterseigenschaft an.
6. Verwenden der _.omit-Methode der Underscore.js-Bibliothek, um einen Schlüssel aus dem Objekt zu entfernen
Der underscore.js ist eine JavaScript-Bibliothek, die über ihren CDN-Link in ein HTML-Dokument eingebunden werden kann und deren integrierte Funktionen Sie dann nutzen können.
Syntax der _.omit-Methode der Underscore.js-Bibliothek:
objName = _.omit(objName, 'ketToRemove');>
Beispiel:
Der folgende Code erklärt die Verwendung von _.auslassen() Funktion zum Entfernen eines Schlüssels aus einem JavaScript-Objekt.
HTML Schlüssel aus JavaScript-Objekttitel> Kopf> entfernen <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>let details = { Name: 'Alex', Alter: 30, Land: 'Kanada' }; console.log('Objekt vor dem Entfernen: ', Details); details = _.omit(details, 'age'); console.log('Objekt nach dem Entfernen: ', Details); script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</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="Ausgabe"></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/git-rebase">Git Rebase</a>
</blockquote> <p dir='ltr'> <b> <strong>Erläuterung</strong> </b> <span>:</span></p> <ul><li value='1'><span>Die Underscore.js-Bibliothek wird mithilfe eines Skript-Tags in die HTML-Datei eingebunden.</span></li><li value='2'><span>Innerhalb des Skript-Tags befindet sich ein Objekt mit dem Namen</span><code class='hljs'>details></code><span>wird mit Eigenschaften für Name, Alter und Land definiert.</span></li><li value='3'><span>Der</span><code class='hljs'>_.omit()></code><span>Die Funktion von Underscore.js wird verwendet, um den Schlüssel „Alter“ aus dem zu entfernen</span><code class='hljs'>details></code><span>Objekt.</span></li><li value='4'><span>Der</span><code class='hljs'>console.log()></code><span>Anweisungen werden verwendet, um das Objekt vor und nach dem Entfernen des „Alter“-Schlüssels zu drucken.</span></li></ul><h2 id='usecase-of-remove-a-key-from-javascript-object'><span>Anwendungsfall: Entfernen eines Schlüssels aus einem JavaScript-Objekt</span></h2><h3><span>1.</span> <span>JavaScript-Objekt-keys()-Methode</span> </h3><p dir='ltr'><span>Der</span> <b><code class='hljs'> Object.keys()></code></b> <b> <strong>Methode</strong> </b> <span>wird in JavaScript verwendet, um ein Array der aufzählbaren Eigenschaftsnamen eines Objekts abzurufen. Es gibt ein Array zurück, das die Schlüssel des Objekts enthält.</span></p> <h3><span>2.</span> <span>Wie entferne ich ein Objekt mit JavaScript aus einem Array von Objekten?</span> </h3><p dir='ltr'><span>Es gibt zwei Ansätze zur Lösung dieses Problems, die im Folgenden diskutiert werden:</span></p> <ul><li value='1'> <span>Verwenden der Methode array.forEach()</span> </li><li value='2'> <span>Verwenden der Methode array.map()</span> </li></ul><h3><span>3.</span> <span>Wie füge ich in JavaScript Eigenschaften zu Objekten hinzu und entferne sie?</span> </h3><ul><li value='1'><span>Zum Hinzufügen einer beliebigen Eigenschaft kann man entweder verwenden</span> <i> <em>Objektname.Eigenschaftsname = Wert</em> </i> <b> <strong> </strong> </b> <span>(oder)</span> <i> <em>Objektname[Eigenschaftsname] = Wert</em> </i> <span>.</span></li><li value='2'><span>Zum Löschen einer beliebigen Eigenschaft könnte man leicht verwenden</span> <i> <em>Objektname.Eigenschaftsname löschen (</em> </i> <span>oder)</span> <i> <em>Objektname[Eigenschaftsname] löschen</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="">Kategorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/blogathon-2021-cat/">Blogathon-2021</a> </li><li> <a href="/china-gk/">China Gk</a> </li><li> <a href="/json/">Json</a> </li><li> <a href="/technical-scripter-2020-cat/">Technischer Scripter 2020</a> </li><li> <a href="/hadoop-tutorial/">Hadoop-Tutorial</a> </li><li> <a href="/java-lang-package/">Java-Lang-Paket</a> </li><li> <a href="/deque/">Worüber</a> </li><li> <a href="/privacy-policy/">Datenschutzrichtlinie</a> </li><li> <a href="/r-machine-learning/">R Maschinelles Lernen</a> </li><li> <a href="/online-game-tools/">Online-Game-Tools</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-Json</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Python-Json</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/python-json/"> <i class="fa fa-external-link"></i> Weiterlesen</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikel</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/70-most-conservative-colleges-america-131946">Die 70 konservativsten Colleges in Amerika</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/access-modifiers-java">Zugriffsmodifikatoren in Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-windows">Was ist Windows?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/setting-up-environment-variables-for-java-complete-guide-to-set-java_home">Einrichten von Umgebungsvariablen für Java – Vollständige Anleitung zum Festlegen von JAVA_HOME</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-install-pandas-python">Wie installiere ich Pandas in 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">Beliebte Beiträge</h2>
<div class="content">
<ul class="list"> <li><a href="/java-scanner-hasnext-method">hasnext Java</a>
</li><li><a href="/alphabet-numbers">Was ist eine alphabetische Zahl?</a>
</li><li><a href="/android-easter-egg">Ostereier in Android</a>
</li><li><a href="/algebra-sets">Algebra der Mengen</a>
</li><li><a href="/how-open-file-java">öffne eine Datei mit 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 Alle Rechte Vorbehalten | <a href="//ar.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Haftungsausschluss</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Über Uns</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Datenschutzrichtlinie</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>