Об’єкт JavaScript — це потужна структура даних, яка об’єднує ключі і значення . Іноді нам потрібно видалити певний ключ-значення з об’єкта. Це можна зробити за допомогою наведених нижче підходів.
Як видалити ключ-значення з об’єкта JavaScript?
Існує кілька методів, за допомогою яких можна видалити ключ з об’єкта JavaScript:
Зміст
log4j
- Використання методів reduce() і filter().
- Використання оператора видалення
- Деструктуризація з оператором Rest
- Використання Object.assign()
- Використання Object.fromEntries() і Object.entries()
- Використання методу _.omit бібліотеки Underscore.js
- Випадок використання Видалити ключ з об’єкта JavaScript
1. Використання методів reduce() і filter().
The зменшити() і фільтр() методи JavaScript можна разом використовувати для видалення ключа з об’єкта JavaScript.
Синтаксис методів reduce() і filter():
Object.keys(object_name).filter(()=>{}).reduce(()=>{});>приклад:
Наведений нижче приклад коду реалізує методи фільтра та зменшення разом для видалення ключа з об’єкта.
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(подробиці);> Вихід
Original Object: { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Пояснення :
- Оригінальний
details>містить властивості для імені, віку та країни. - The
Object.keys(details)>метод повертає масив, що містить ключіdetails>об'єкт. - The
.filter()>метод фільтрує властивість віку з масиву ключів. - The
.reduce()>метод створює новий об'єкт (newObj>), перебираючи відфільтровані ключі та призначаючи їх новому об’єкту. - Нарешті, новий об’єкт без властивості віку призначається назад до
details>змінна, і вона реєструється на консолі.
2. Використання оператора видалення
The оператор видалення у JavaScript можна використовувати для видалення властивості (пари ключ-значення) з об’єкта.
Синтаксис оператора видалення:
delete objectName.propertyName;>
приклад:
Наведений нижче код видаляє ключ «age» з об’єкта, залишаючи в об’єкті лише ключі «name» та «country».
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);> Вихід
Original Object: { name: 'Alex', age: 30, country: 'Canada' } Object after deleting age key: { name: 'Alex', country: 'Canada' }> Пояснення :
- Оригінальний
details>містить властивості для імені, віку та країни. - The
delete>оператор використовується для видалення властивості age зdetails>об'єкт. - Після видалення властивості age змінений
details>об'єкт зареєстровано на консолі.
3. Деструктуризація за допомогою оператора Rest
Деструктуризація об’єкт, який використовує оператор rest, створює новий об’єкт без зазначеної властивості, зберігаючи властивості, що залишилися від оригінального об’єкта.
Синтаксис для деструкції з оператором rest:
const { propertyToRemove, ...rest } = objectName;>приклад:
Наведений нижче код використовує синтаксис деструктуризації для видалення ключів з об’єкта в 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);> Вихід
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Пояснення :
- Оригінальний
details>містить властивості для імені, віку та країни. - Завдання деструктуризації
{ age, ...rest } = details;>виділяє властивість віку зdetails>і призначає його доage>змінна. Решта властивостей збираються в новий об’єкт під назвоюrest>. - В результаті,
rest>об'єкт містить усі властивості оригіналуdetails>об'єкт, за винятком властивості вік. - The
rest>потім об’єкт реєструється на консолі, показуючи об’єкт без властивості віку.
4. Використання Object.assign()
Використання Object.assign() дозволяє створити новий об’єкт без зазначеної властивості, скопіювавши всі властивості, окрім тієї, яку потрібно видалити.
Синтаксис object.assign():
const { age, ...rest } = Object.assign({}, details);>приклад:
Наведений нижче код реалізує метод Object.assign() для видалення властивості з об’єкта.
Javascript const details = { name: 'Alex', age: 30, country: 'Canada' }; console.log('orignal object', details) const { age, ...rest } = Object.assign({}, details); console.log(rest);> Вихід
orignal object { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> Пояснення :
- The
Object.assign({}, details)>метод створює поверхневу копіюdetails>об'єкт. Це запобігає модифікації оригіналуdetails>об'єкт. - Потім використовується деструктуризація об’єкта, щоб отримати властивість віку зі скопійованого об’єкта та призначити його
age>змінна. Решта властивостей збираються в новий об’єкт під назвоюrest>. - В результаті,
rest>об'єкт містить усі властивості оригіналуdetails>об'єкт, за винятком властивості вік. - The
rest>потім об’єкт реєструється на консолі, показуючи об’єкт без властивості віку.
5. Використання Object.fromEntries() і Object.entries()
The Object.entries() використовуватиметься для перетворення об’єкта в масив пар ключ-значення. Потім використовуємо Array.filter() щоб виключити пару ключ-значення з указаним ключем. Нарешті, ми використовуємо Object.fromEntries(), щоб перетворити відфільтрований масив назад в об’єкт.
приклад:
Наведений нижче код реалізує описані вище методи видалення ключа з об’єкта в JavaScript.
Javascript const details = { name: 'Alex', age: 30, country: 'Canada' }; const { age, ...rest } = Object.fromEntries( Object.entries(details).filter(([key]) =>ключ !== 'вік')); console.log(rest);> Вихід
{ name: 'Alex', country: 'Canada' }> Пояснення:
Object.entries(details)>перетворюєdetails>об’єкт у масив пар ключ-значення..filter(([key]) =>ключ !== 'вік')>відфільтровує пари ключ-значення, де ключ не дорівнює «віку», фактично видаляючи властивість віку.Object.fromEntries()>перетворює відфільтрований масив пар ключ-значення назад в об’єкт.- Нарешті, деструктуризація об’єкта використовується для вилучення властивості віку з результату, який присвоюється
age>змінна, тоді як решта властивостей збираються в новий об’єкт під назвоюrest>. - The
rest>потім об’єкт реєструється на консолі, показуючи об’єкт без властивості віку.
6. Використання методу _.omit бібліотеки Underscore.js для видалення ключа з об’єкта
The underscore.js це бібліотека JavaScript, яку можна включити в HTML-документ через посилання CDN, а потім ви зможете використовувати її вбудовані функції.
Синтаксис методу _.omit бібліотеки Underscore.js:
objName = _.omit(objName, 'ketToRemove');>
приклад:
Наведений нижче код пояснює використання _.omit() функція видалення ключа з об’єкта JavaScript.
HTML Видалити ключ із об’єкта JavaScript 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'>сценарій><script>let details = { ім'я: 'Алекс', вік: 30, країна: 'Канада' }; console.log('Об'єкт до видалення: ', деталі); деталі = _.omit(деталі, 'вік'); console.log('Об'єкт після видалення: ', деталі); script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Вихід:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-return-an-array-java">масив повернення java</a>
</blockquote> <p dir='ltr'> <img src='//techcodeview.com/img/javascript-object/32/how-remove-key-value-pair-from-javascript-object-2.webp' alt="вихід"></p> <p dir='ltr'> <b> <strong>Пояснення</strong> </b> <span>:</span></p> <ul><li value='1'><span>Бібліотека Underscore.js включена у файл HTML за допомогою тегу сценарію.</span></li><li value='2'><span>Всередині тегу сценарію об’єкт з назвою</span><code class='hljs'>details></code><span>визначається властивостями імені, віку та країни.</span></li><li value='3'><span>The</span><code class='hljs'>_.omit()></code><span>Функція з Underscore.js використовується для видалення ключа «age» з</span><code class='hljs'>details></code><span>об'єкт.</span></li><li value='4'><span>The</span><code class='hljs'>console.log()></code><span>оператори використовуються для друку об’єкта до та після видалення ключа «age».</span></li></ul><h2 id='usecase-of-remove-a-key-from-javascript-object'><span>Випадок використання Видалити ключ з об’єкта JavaScript</span></h2><h3><span>1.</span> <span>Метод JavaScript Object keys().</span> </h3><p dir='ltr'><span>The</span> <b><code class='hljs'> Object.keys()></code></b> <b> <strong>метод</strong> </b> <span>у JavaScript використовується для отримання масиву перелічуваних імен властивостей об’єкта. Він повертає масив, що містить ключі об’єкта.</span></p> <h3><span>2.</span> <span>Як видалити об'єкт із масиву об'єктів за допомогою JavaScript?</span> </h3><p dir='ltr'><span>Існує два підходи до вирішення цієї проблеми, які обговорюються нижче:</span></p> <ul><li value='1'> <span>Використання методу array.forEach().</span> </li><li value='2'> <span>Використання методу array.map().</span> </li></ul><h3><span>3.</span> <span>Як додавати та видаляти властивості об’єктів у JavaScript?</span> </h3><ul><li value='1'><span>Для додавання будь-якої властивості можна використати або</span> <i> <em>object_name.property_name = значення</em> </i> <b> <strong> </strong> </b> <span>(або)</span> <i> <em>object_name[property_name] = значення</em> </i> <span>.</span></li><li value='2'><span>Для видалення будь-якої властивості можна легко скористатися</span> <i> <em>видалити object_name.property_name (</em> </i> <span>або)</span> <i> <em>видалити object_name[property_name]</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="">Категорія</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/html-dom/">Html-Dom</a> </li><li> <a href="/javascript-object/">Javascript-Об'єкт</a> </li><li> <a href="/c-functions/">C-Функції</a> </li><li> <a href="/cpp-destructor/">Cpp-Руйнівник</a> </li><li> <a href="/c-string/">Рядок C#</a> </li><li> <a href="/linux-man-pages/">Сторінки Керівництва Linux</a> </li><li> <a href="/programs/">Програми</a> </li><li> <a href="/circles/">Круги</a> </li><li> <a href="/python-numpy-random-sampling/">Python Numpy - Випадкова Вибірка</a> </li><li> <a href="/python-datatype/">Тип Даних Python</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">101 чудове те чи інше запитання, щоб розважити вас</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Шукаєте легку партійну гру? Перегляньте наш список найкращих тих чи інших питань.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/101-great-this-that-questions-keep-you-entertained-131400"> <i class="fa fa-external-link"></i> Читати Далі</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Цікаві Статті</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/insertion-sort-algorithm">Алгоритм сортування вставкою</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-sat-evidence-based-reading-1311112">Що таке SAT Evidence-Based Reading and Writing?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-compare-dates">Javascript Порівняти дати</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-bios">Що таке BIOS?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-get-input-from-user-java">Як отримати дані від користувача в Java</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">Популярні Пости</h2>
<div class="content">
<ul class="list"> <li><a href="/selenium-tutorial">навчальний посібник із селену</a>
</li><li><a href="/java-convert-string-char">як перетворити рядок на char</a>
</li><li><a href="/how-sort-an-array-java">масив сортування в java</a>
</li><li><a href="/typescript-foreach">машинопис кожн</a>
</li><li><a href="/gimp-save-image-jpeg">gimp зберегти як jpeg</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 Всі Права Захищені | <a href="//es.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Відмова Від Відповідальності</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Про Нас</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Політика Конфіденційності</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>