Objekt JavaScript je výkonná datová struktura, která se kombinuje klíče a hodnoty . Někdy potřebujeme z objektu odstranit konkrétní pár klíč–hodnota. To lze provést pomocí níže uvedených přístupů.
Jak odstranit pár klíč–hodnota z objektu JavaScript?
Existuje několik metod, které lze použít k odstranění klíče z objektu JavaScript:
Obsah
- Použití metod reduction() a filter().
- Pomocí operátoru delete
- Destrukturalizace s operátorem zbytku
- Použití Object.assign()
- Použití Object.fromEntries() a Object.entries()
- Použití metody _.omit knihovny Underscore.js
- UseCase of Odebrat klíč z objektu JavaScriptu
1. Použití metod reduction() a filter().
The snížit() a filtr() metody JavaScriptu lze společně použít k odstranění klíče z objektu JavaScriptu.
Syntaxe metody reduction() a filter():
Object.keys(object_name).filter(()=>{}).reduce(()=>{});>Příklad:
Níže uvedený příklad kódu implementuje metody filtrování a redukce společně k odstranění klíče z objektu.
Javascript let details = { name: 'Alex', age: 30, country: 'Canada' }; console.log('Original Object: ', details); details = Object.keys(details).filter(objKey =>objKey !== 'věk').reduce((newObj, key) => { newObj[key] = details[key]; return newObj; }, {} ); console.log(detaily);> Výstup
Original Object: { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Vysvětlení :
- Originál
details>objekt obsahuje vlastnosti pro jméno, věk a zemi. - The
Object.keys(details)>metoda vrací pole obsahující klíčedetails>objekt. - The
.filter()>metoda odfiltruje vlastnost age z pole klíčů. - The
.reduce()>metoda vytvoří nový objekt (newObj>) iterací přes filtrované klíče a jejich přiřazením k novému objektu. - Nakonec je nový objekt bez vlastnosti age přiřazen zpět k
details>a je přihlášen do konzole.
2. Pomocí operátoru delete
The odstranit operátor v JavaScriptu lze použít k odstranění vlastnosti (páru klíč-hodnota) z objektu.
Syntaxe operátoru delete:
delete objectName.propertyName;>
Příklad:
pro smyčku v bash
Níže uvedený kód odstraní z objektu klíč „věku“ a v objektu ponechá pouze klíče „jméno“ a „země“.
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);> Výstup
Original Object: { name: 'Alex', age: 30, country: 'Canada' } Object after deleting age key: { name: 'Alex', country: 'Canada' }> Vysvětlení :
- Originál
details>objekt obsahuje vlastnosti pro jméno, věk a zemi. - The
delete>Operátor se používá k odstranění vlastnosti stáří zdetails>objekt. - Po smazání vlastnosti stáří se změní
details>objekt je přihlášen do konzole.
3. Destrukce s operátorem zbytku
Ničení objekt používající operátor rest vytvoří nový objekt bez zadané vlastnosti, přičemž zachová zbývající vlastnosti původního objektu.
Syntaxe pro destrukci pomocí operátoru rest:
const { propertyToRemove, ...rest } = objectName;>Příklad:
Níže uvedený kód používá destrukční syntaxi k odstranění klíčů z obect v JavaScriptu.
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);> Výstup
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Vysvětlení :
- Originál
details>objekt obsahuje vlastnosti pro jméno, věk a zemi. - Destrukční úkol
{ age, ...rest } = details;>extrahuje vlastnost stáří zdetails>objektu a přiřadí jej kage>variabilní. Zbývající vlastnosti jsou shromážděny do nového objektu s názvemrest>. - V důsledku toho
rest>objekt obsahuje všechny vlastnosti origináludetails>objekt kromě vlastnosti stáří. - The
rest>objekt je poté přihlášen do konzoly a zobrazuje objekt bez vlastnosti age.
4. Použití Object.assign()
Použitím Object.assign() umožňuje vytvořit nový objekt bez zadané vlastnosti zkopírováním všech vlastností kromě té, kterou chcete odstranit.
Syntaxe objektu.assign():
const { age, ...rest } = Object.assign({}, details);>Příklad:
Níže uvedený kód implementuje metodu Object.assign() k odstranění vlastnosti z objektu.
Javascript const details = { name: 'Alex', age: 30, country: 'Canada' }; console.log('orignal object', details) const { age, ...rest } = Object.assign({}, details); console.log(rest);> Výstup
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Vysvětlení :
- The
Object.assign({}, details)>metoda vytvoří mělkou kopiidetails>objekt. Tím se zabrání modifikaci origináludetails>objekt. - Poté se destrukce objektu použije k extrahování vlastnosti stáří z kopírovaného objektu a jejímu přiřazení k objektu
age>variabilní. Zbývající vlastnosti jsou shromážděny do nového objektu s názvemrest>. - V důsledku toho
rest>objekt obsahuje všechny vlastnosti origináludetails>objekt kromě vlastnosti stáří. - The
rest>objekt je poté přihlášen do konzoly a zobrazuje objekt bez vlastnosti age.
5. Použití Object.fromEntries() a Object.entries()
The Object.entries() se použije k převodu objektu na pole párů klíč-hodnota. Pak použijeme Array.filter() k vyloučení páru klíč–hodnota se zadaným klíčem. Nakonec použijeme Object.fromEntries() k převedení filtrovaného pole zpět na objekt.
Příklad:
Níže uvedený kód implementuje výše uvedené metody k odstranění klíče z objektu v JavaScriptu.
Javascript const details = { name: 'Alex', age: 30, country: 'Canada' }; const { age, ...rest } = Object.fromEntries( Object.entries(details).filter(([key]) =>klíč !== 'věk')); console.log(zbytek);> Výstup
{ name: 'Alex', country: 'Canada' }> Vysvětlení:
Object.entries(details)>převádídetails>objekt do pole párů klíč-hodnota..filter(([key]) =>klíč !== 'věk')>odfiltruje páry klíč–hodnota, kde klíč není roven ‘věku’, a účinně odstraní vlastnost age.Object.fromEntries()>převede filtrované pole párů klíč–hodnota zpět na objekt.- Nakonec se k extrakci vlastnosti stáří z výsledku používá destrukturalizace objektu, která je přiřazena k
age>proměnná, zatímco zbytek vlastností se shromažďuje do nového objektu s názvemrest>. - The
rest>objekt je poté přihlášen do konzoly a zobrazuje objekt bez vlastnosti age.
6. Použití metody _.omit knihovny Underscore.js k odstranění klíče z objektu
The podtržítko.js je knihovna JavaScript, kterou lze zahrnout do dokumentu HTML prostřednictvím odkazu CDN a poté můžete používat její vestavěné funkce.
Syntaxe metody _.omit knihovny Underscore.js:
objName = _.omit(objName, 'ketToRemove');>
Příklad:
Níže uvedený kód vysvětlí použití _.vynechat() funkce k odstranění klíče z objektu JavaScript.
HTML Odebrat klíč z 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>let details = { jméno: 'Alex', věk: 30, země: 'Kanada' }; console.log('Objekt před odstraněním: ', podrobnosti); podrobnosti = _.omit(detaily, 'věk'); console.log('Objekt po odstranění: ', podrobnosti); skript> tělo> html>></pre> </code> <p dir='ltr'> <b> <strong>Výstup:</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="výstup"></p> <p dir='ltr'> <b> <strong>Vysvětlení</strong> </b> <span>:</span></p> <ul><li value='1'><span>Knihovna Underscore.js je součástí souboru HTML pomocí značky skriptu.</span></li><li value='2'><span>Uvnitř značky skriptu je objekt s názvem</span><code class='hljs'>details></code><span>je definována vlastnostmi pro jméno, věk a zemi.</span></li><li value='3'><span>The</span><code class='hljs'>_.omit()></code><span>funkce z Underscore.js se používá k odstranění klíče ‘věk’ z</span><code class='hljs'>details></code><span>objekt.</span></li><li value='4'><span>The</span><code class='hljs'>console.log()></code><span>příkazy se používají k tisku objektu před a po odstranění klíče ‚věk‘.</span></li></ul><h2 id='usecase-of-remove-a-key-from-javascript-object'><span>UseCase of Odebrat klíč z objektu JavaScriptu</span></h2><h3><span>1.</span> <span>Metoda JavaScript Object keys().</span> </h3><p dir='ltr'><span>The</span> <b><code class='hljs'> Object.keys()></code></b> <b> <strong>metoda</strong> </b> <span>v JavaScriptu se používá k načtení pole vyčíslitelných názvů vlastností objektu. Vrací pole obsahující klíče objektu.</span></p> <h3><span>2.</span> <span>Jak odstranit objekt z pole objektů pomocí JavaScriptu?</span> </h3><p dir='ltr'><span>Existují dva přístupy k řešení tohoto problému, které jsou popsány níže:</span></p> <ul><li value='1'> <span>Použití metody array.forEach().</span> </li><li value='2'> <span>Použití metody array.map().</span> </li></ul><h3><span>3.</span> <span>Jak přidat a odebrat vlastnosti z objektů v JavaScriptu?</span> </h3><ul><li value='1'><span>Pro přidání jakékoli vlastnosti lze použít buď</span> <i> <em>object_name.property_name = hodnota</em> </i> <b> <strong> </strong> </b> <span>(nebo)</span> <i> <em>object_name[property_name] = hodnota</em> </i> <span>.</span></li><li value='2'><span>Pro smazání jakékoli vlastnosti lze snadno použít</span> <i> <em>smazat název_objektu.název_vlastnosti (</em> </i> <span>nebo)</span> <i> <em>smazat název_objektu[název_vlastnosti]</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="">Kategorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/adobe/">Adobe</a> </li><li> <a href="/physical-quantities/">Fyzikální Veličiny</a> </li><li> <a href="/c-strings-programs/">Programy C Řetězce</a> </li><li> <a href="/java-integer/">Java-Integer</a> </li><li> <a href="/google-tricks/">Google Triky</a> </li><li> <a href="/operators/">Operátoři</a> </li><li> <a href="/java-random-class/">Java Random Class</a> </li><li> <a href="/data-visualization/">Vizualizace Dat</a> </li><li> <a href="/square-root/">Druhá Odmocnina Z</a> </li><li> <a href="/data-link-layer/">Data Link Layer</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Co znamená DSA?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Portál informatiky pro geeky. Obsahuje dobře napsané, dobře promyšlené a dobře vysvětlené články o informatice a programování, kvízy a otázky týkající se praxe/konkurenčního programování/firemního rozhovoru.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-does-dsas-mean"> <i class="fa fa-external-link"></i> Čtěte Více</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Zajímavé Články</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/python-ordered-set">Objednaná sada Pythonu</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/when-is-april-act-1311372">Kdy je dubnový ACT? Měli byste si to vzít?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/valentine-week-list-2024">Seznam pro valentýnský týden 2024: Název na celý den od 7. února do 14. února</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/convert-cubic-feet-cubic-inch">Převést krychlové stopy na krychlové palce</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-compound">Rozdíl mezi sloučeninou a směsí</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ární Příspěvky</h2>
<div class="content">
<ul class="list"> <li><a href="/tcp-ip-model">tcp ip model</a>
</li><li><a href="/how-convert-byte-array-string-java">převést bajtové pole na řetězec</a>
</li><li><a href="/how-open-file-java">jak otevřít soubor v java</a>
</li><li><a href="/java-list-node">vypsat uzel v Javě</a>
</li><li><a href="/python-programs-python-programming-examples">příklady programování v pythonu</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 Všechna Práva Vyhrazena | <a href="//pt.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vyloučení Odpovědnosti</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Nás</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Zásady Ochrany Osobních Údajů</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>