Obiekt JavaScript to potężna struktura danych, która łączy Klucze I wartości . Czasami musimy usunąć konkretną parę klucz-wartość z obiektu. Można tego dokonać, stosując metody podane poniżej.
Jak usunąć parę klucz-wartość z obiektu JavaScript?
Istnieje kilka metod usunięcia klucza z obiektu JavaScript:
Spis treści
- Korzystanie z metod redukcji() i filter().
- Korzystanie z operatora usuwania
- Destrukturyzacja za pomocą operatora rest
- Korzystanie z metody Object. przypisania()
- Korzystanie z obiektów Object.fromEntries() i Object.entries()
- Użycie metody _.omit biblioteki Underscore.js
- Przypadek użycia Usuń klucz z obiektu JavaScript
1. Korzystanie z metod redukcji() i filter().
The zmniejszyć() i filtr() Metody JavaScript mogą być razem użyte do usunięcia klucza z obiektu JavaScript.
Składnia metod redukcji() i filter():
Object.keys(object_name).filter(()=>{}).reduce(()=>{});>Przykład:
10 z 50
Poniższy przykład kodu implementuje razem metody filter i redukujące w celu usunięcia klucza z obiektu.
JavaScript let details = { name: 'Alex', age: 30, country: 'Canada' }; console.log('Original Object: ', details); details = Object.keys(details).filter(objKey =>objKey !== 'wiek').reduce((nowyObj, klucz) => { nowyObj[klucz] = szczegóły[klucz]; return nowyObj; }, {} ); konsola.log(szczegóły);> Wyjście
Original Object: { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Wyjaśnienie :
- Oryginalny
details>obiekt zawiera właściwości imienia, wieku i kraju. - The
Object.keys(details)>Metoda zwraca tablicę zawierającą klucze metodydetails>obiekt. - The
.filter()>Metoda odfiltrowuje właściwość age z tablicy kluczy. - The
.reduce()>metoda tworzy nowy obiekt (newObj>) poprzez iterację po przefiltrowanych kluczach i przypisanie ich do nowego obiektu. - Na koniec nowy obiekt bez właściwości age jest przypisywany z powrotem do
details>zmienną i jest ona rejestrowana w konsoli.
2. Użycie operatora usuwania
The usuń operatora w JavaScript może służyć do usuwania właściwości (pary klucz-wartość) z obiektu.
lista vs zestaw w Javie
Składnia operatora usuwania:
delete objectName.propertyName;>
Przykład:
Poniższy kod usuwa klucz „wiek” z obiektu, pozostawiając w obiekcie jedynie klucze „nazwa” i „kraj”.
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);> Wyjście
Original Object: { name: 'Alex', age: 30, country: 'Canada' } Object after deleting age key: { name: 'Alex', country: 'Canada' }> Wyjaśnienie :
- Oryginalny
details>obiekt zawiera właściwości imienia, wieku i kraju. - The
delete>Operator służy do usuwania właściwości age zdetails>obiekt. - Po usunięciu właściwości age zmodyfikowano
details>obiekt jest rejestrowany w konsoli.
3. Destrukturyzacja za pomocą operatora rest
Destrukturyzacja obiekt za pomocą operatora rest tworzy nowy obiekt bez określonej właściwości, zachowując pozostałe właściwości oryginalnego obiektu.
system plików Linuksa
Składnia destrukcji za pomocą operatora rest:
const { propertyToRemove, ...rest } = objectName;>Przykład:
Poniższy kod wykorzystuje składnię destrukturyzującą do usuwania kluczy z obiektu w 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);> Wyjście
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Wyjaśnienie :
- Oryginalny
details>obiekt zawiera właściwości imienia, wieku i kraju. - Zadanie destrukturyzujące
{ age, ...rest } = details;>wyodrębnia właściwość age z plikudetails>obiekt i przypisuje go doage>zmienny. Pozostałe właściwości są gromadzone w nowym obiekcie o nazwierest>. - W rezultacie
rest>obiekt zawiera wszystkie właściwości oryginałudetails>obiekt z wyjątkiem właściwości age. - The
rest>obiekt jest następnie logowany do konsoli, pokazując obiekt bez właściwości age.
4. Korzystanie z obiektu. przypisania()
Za pomocą Obiekt.przypisz() umożliwia utworzenie nowego obiektu bez określonej właściwości poprzez skopiowanie wszystkich właściwości z wyjątkiem tej, którą chcesz usunąć.
Składnia obiektu.przypisać():
const { age, ...rest } = Object.assign({}, details);>Przykład:
Poniższy kod implementuje metodę Object. przypis() w celu usunięcia właściwości z obiektu.
JavaScript const details = { name: 'Alex', age: 30, country: 'Canada' }; console.log('orignal object', details) const { age, ...rest } = Object.assign({}, details); console.log(rest);> Wyjście
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Wyjaśnienie :
- The
Object.assign({}, details)>Metoda tworzy płytką kopię plikudetails>obiekt. Zapobiega to modyfikacji oryginałudetails>obiekt. - Następnie stosuje się destrukturyzację obiektu w celu wyodrębnienia właściwości age ze skopiowanego obiektu i przypisania jej do obiektu
age>zmienny. Pozostałe właściwości są gromadzone w nowym obiekcie o nazwierest>. - W rezultacie
rest>obiekt zawiera wszystkie właściwości oryginałudetails>obiekt z wyjątkiem właściwości age. - The
rest>obiekt jest następnie logowany do konsoli, pokazując obiekt bez właściwości age.
5. Korzystanie z obiektów Object.fromEntries() i Object.entries()
The Obiekt.wpisy() zostanie użyty do przekształcenia obiektu w tablicę par klucz-wartość. Następnie używamy Tablica.filter() aby wykluczyć parę klucz-wartość z określonym kluczem. Na koniec używamy Object.fromEntries() do przekształcenia przefiltrowanej tablicy z powrotem w obiekt.
Przykład:
Poniższy kod implementuje powyższe metody usuwania klucza z obiektu w JavaScript.
jak przekonwertować ciąg na liczbę całkowitą w JavieJavaScript
const details = { name: 'Alex', age: 30, country: 'Canada' }; const { age, ...rest } = Object.fromEntries( Object.entries(details).filter(([key]) =>klucz !== 'wiek')); konsola.log(reszta);> Wyjście
{ name: 'Alex', country: 'Canada' }> Wyjaśnienie:
Object.entries(details)>konwertujedetails>obiekt na tablicę par klucz-wartość..filter(([key]) =>klucz !== 'wiek')>odfiltrowuje pary klucz-wartość, w których klucz nie jest równy „wiek”, skutecznie usuwając właściwość wiek.Object.fromEntries()>konwertuje przefiltrowaną tablicę par klucz-wartość z powrotem na obiekt.- Na koniec stosuje się destrukturyzację obiektu w celu wyodrębnienia z wyniku właściwości age, która jest przypisana do
age>zmienną, podczas gdy pozostałe właściwości są gromadzone w nowym obiekcie o nazwierest>. - The
rest>obiekt jest następnie logowany do konsoli, pokazując obiekt bez właściwości age.
6. Wykorzystanie metody _.omit biblioteki Underscore.js do usunięcia klucza z obiektu
The podkreślenie.js to biblioteka JavaScript, którą można włączyć do dokumentu HTML za pośrednictwem łącza CDN, a następnie można korzystać z jej wbudowanych funkcji.
Składnia metody _.omit biblioteki Underscore.js:
objName = _.omit(objName, 'ketToRemove');>
Przykład:
Poniższy kod wyjaśni użycie metody _.pomijać() funkcja usuwająca klucz z obiektu JavaScript.
HTML Usuń klucz z JavaScript Obiekt 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'>skrypt><script>niech szczegóły = { imię: 'Alex', wiek: 30, kraj: 'Kanada' }; console.log('Obiekt przed usunięciem: ', szczegóły); szczegóły = _.omit(szczegóły, 'wiek'); console.log('Obiekt po usunięciu: ', szczegóły); skrypt> treść> html>></pre> </code> <p dir='ltr'> <b> <strong>Wyjście:</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="wyjście"></p> <p dir='ltr'> <b> <strong>Wyjaśnienie</strong> </b> <span>:</span></p> <ul><li value='1'><span>Biblioteka Underscore.js jest dołączana do pliku HTML za pomocą znacznika skryptu.</span></li><li value='2'><span>Wewnątrz znacznika skryptu obiekt o nazwie</span><code class='hljs'>details></code><span>jest definiowany za pomocą właściwości imienia, wieku i kraju.</span></li><li value='3'><span>The</span><code class='hljs'>_.omit()></code><span>Funkcja z Underscore.js służy do usuwania klucza „wiek” z pliku</span><code class='hljs'>details></code><span>obiekt.</span></li><li value='4'><span>The</span><code class='hljs'>console.log()></code><span>instrukcje służą do wydrukowania obiektu przed i po usunięciu klucza „wiek”.</span></li></ul><h2 id='usecase-of-remove-a-key-from-javascript-object'><span>Przypadek użycia Usuń klucz z obiektu JavaScript</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>w JavaScript służy do pobierania tablicy przeliczalnych nazw właściwości obiektu. Zwraca tablicę zawierającą klucze obiektu.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/excel-difference-between-two-dates">różnica dat w Excelu</a>
</blockquote> <h3><span>2.</span> <span>Jak usunąć obiekt z tablicy obiektów za pomocą JavaScript?</span> </h3><p dir='ltr'><span>Istnieją dwa podejścia do rozwiązania tego problemu, które omówiono poniżej:</span></p> <ul><li value='1'> <span>Korzystanie z metody array.forEach().</span> </li><li value='2'> <span>Korzystanie z metody array.map().</span> </li></ul><h3><span>3.</span> <span>Jak dodawać i usuwać właściwości obiektów w JavaScript?</span> </h3><ul><li value='1'><span>Aby dodać dowolną właściwość, można użyć</span> <i> <em>nazwa_obiektu.nazwa_właściwości = wartość</em> </i> <b> <strong> </strong> </b> <span>(Lub)</span> <i> <em>nazwa_obiektu[nazwa_właściwości] = wartość</em> </i> <span>.</span></li><li value='2'><span>Do usunięcia dowolnej właściwości można z łatwością użyć</span> <i> <em>usuń nazwa_obiektu.nazwa_właściwości (</em> </i> <span>Lub)</span> <i> <em>usuń nazwa_obiektu[nazwa_właściwości]</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="">Kategoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/random-algorithms/">Algorytmy Losowe</a> </li><li> <a href="/python-gui/">Python-Gui</a> </li><li> <a href="/java-serialization/">Serializacja Javy</a> </li><li> <a href="/counter/">Lada</a> </li><li> <a href="/dbms/">Dbm</a> </li><li> <a href="/excel-how/">Excel — Jak To Zrobić</a> </li><li> <a href="/maths-class-11-cat/">Zajęcia Matematyczne-11</a> </li><li> <a href="/ios-development/">Rozwój Ios</a> </li><li> <a href="/ruby-tutorial/">Rubinowy Poradnik</a> </li><li> <a href="/best/">To, Co Najlepsze</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Formuła proporcji</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Portal informatyczny dla maniaków. Zawiera dobrze napisane, przemyślane i dobrze wyjaśnione artykuły z zakresu informatyki i programowania, quizy oraz pytania dotyczące ćwiczeń/programowania konkurencyjnego/rozmowy kwalifikacyjnej w firmie.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/ratio-formula"> <i class="fa fa-external-link"></i> Czytaj Więcej</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Ciekawe Artykuły</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/chords-circle">Akordy koła</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/will-your-sat-photo-id-work-131718">Czy Twój dokument tożsamości ze zdjęciem SAT będzie działał? Poznaj wymagania dotyczące identyfikatora SAT</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/acceptable-use-policy/">Zasady Dopuszczalnego Użytkowania</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-full-form-sfs">Jaka jest pełna forma SFS</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-multithreading/">Wielowątkowość W Javie</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">Popularne Wiadomości</h2>
<div class="content">
<ul class="list"> <li><a href="/mysql-change-column-type">mysql zmień typ kolumny</a>
</li><li><a href="/c-int-string">int na ciąg C++</a>
</li><li><a href="/java-math-random-method">Java math.random</a>
</li><li><a href="/difference-between-rj11">rj12 kontra rj11</a>
</li><li><a href="/java-linkedlist-class">połączona lista Java</a>
</li><li><a href="/vijay">aktor filmowy Vijay</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 Wszelkie Prawa Zastrzeżone | <a href="//bg.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Zastrzeżenie</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Nas</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Polityka Prywatności</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>