JavaScript オブジェクトは、以下を組み合わせた強力なデータ構造です。 キー そして 価値観 。場合によっては、オブジェクトから特定の Key-Value を削除する必要があります。これは、以下に示すアプローチを使用して実行できます。
JavaScript オブジェクトから Key-Value を削除するにはどうすればよいですか?
JavaScript オブジェクトからキーを削除するために使用できるメソッドがいくつかあります。
目次
- reduce() メソッドと filter() メソッドの使用
- 削除演算子の使用
- REST 演算子を使用した分解
- Object.assign() の使用
- Object.fromEntries() と Object.entries() の使用
- Underscore.jsライブラリの_.omitメソッドを使用する
- JavaScript オブジェクトからキーを削除するユースケース
1.reduce() メソッドと filter() メソッドの使用
の 減らす（） そしてその フィルター（） JavaScript のメソッドを組み合わせて使用すると、JavaScript オブジェクトからキーを削除できます。
reduce() メソッドと filter() メソッドの構文:
Object.keys(object_name).filter(()=>{}).reduce(()=>{});>>例：
CSSで画像を中央揃えにする
以下のコード例では、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] = 詳細[key]; return newObj; }, {} ); console.log(詳細);>> 出力
Original Object: { name: 'Alex', age: 30, country: 'Canada' } { name: 'Alex', country: 'Canada' }> 説明 :
- オリジナル
details>オブジェクトには、名前、年齢、国のプロパティが含まれています。 - の
Object.keys(details)>メソッドは、キーを含む配列を返します。details>物体。 - の
.filter()>メソッドは、キーの配列から age プロパティをフィルターで除外します。 - の
.reduce()>メソッドは新しいオブジェクトを作成します (newObj>) フィルタリングされたキーを反復処理し、それらを新しいオブジェクトに割り当てます。 - 最後に、age プロパティのない新しいオブジェクトが再び割り当てられます。
details>変数であり、コンソールに記録されます。
2. 削除演算子の使用
の 削除演算子 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>オブジェクトには、名前、年齢、国のプロパティが含まれています。 - の
delete>演算子は、年齢プロパティを削除するために使用されます。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;>から age プロパティを抽出します。details>オブジェクトを作成し、それをage>変数。残りのプロパティは、という新しいオブジェクトに収集されます。rest>。 - その結果、
rest>オブジェクトには元のプロパティがすべて含まれていますdetails>age プロパティを除くオブジェクト。 - の
rest>その後、オブジェクトがコンソールに記録され、age プロパティのないオブジェクトが表示されます。
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' }> 説明 :
- の
Object.assign({}, details)>メソッドは、の浅いコピーを作成しますdetails>物体。これにより、オリジナルの改変が防止されますdetails>物体。 - 次に、オブジェクトの構造化を使用して、コピーされたオブジェクトから age プロパティを抽出し、それを
age>変数。残りのプロパティは、という新しいオブジェクトに収集されます。rest>。 - その結果、
rest>オブジェクトには元のプロパティがすべて含まれていますdetails>age プロパティを除くオブジェクト。 - の
rest>その後、オブジェクトがコンソールに記録され、age プロパティのないオブジェクトが表示されます。
5. Object.fromEntries() と Object.entries() の使用
の 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]) =>キー !== '年齢'));コンソール.ログ(残り);>> 出力
{ name: 'Alex', country: 'Canada' }> 説明：
Object.entries(details)>を変換しますdetails>オブジェクトをキーと値のペアの配列に変換します。.filter(([key]) =>キー !== '年齢')>>キーが「年齢」と等しくないキーと値のペアをフィルターで除外し、実質的に年齢プロパティを削除します。Object.fromEntries()>フィルタリングされたキーと値のペアの配列をオブジェクトに変換します。- 最後に、オブジェクトの構造化を使用して結果から age プロパティを抽出し、これを
age>変数、残りのプロパティは という新しいオブジェクトに収集されます。rest>。 - の
rest>その後、オブジェクトがコンソールに記録され、age プロパティのないオブジェクトが表示されます。
6. Underscore.jsライブラリの_.omitメソッドを使用してオブジェクトからキーを削除する
の アンダースコア.js は、CDN リンクを通じて HTML ドキュメントに組み込むことができる JavaScript ライブラリであり、その組み込み関数を使用することができます。
Underscore.js ライブラリの _.omit メソッドの構文:
objName = _.omit(objName, 'ketToRemove');>
例：
以下のコードは、 _.省略() 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 詳細 = { 名前: 「アレックス」、年齢: 30、国: 「カナダ」 }; console.log('削除前のオブジェクト: ', 詳細); 詳細 = _.省略(詳細, '年齢'); console.log('削除後のオブジェクト: ', 詳細); スクリプト>本文>html>>></pre> </code> <p dir='ltr'> <b> <strong>出力：</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="出力"></p> <p dir='ltr'> <b> <strong>説明</strong> </b> <span>:</span></p> <ul><li value='1'><span>Underscore.js ライブラリは、script タグを使用して HTML ファイルに組み込まれます。</span></li><li value='2'><span>script タグ内には、</span><code class='hljs'>details></code><span>名前、年齢、国のプロパティで定義されます。</span></li><li value='3'><span>の</span><code class='hljs'>_.omit()></code><span>Underscore.js の関数を使用して、「age」キーを削除します。</span><code class='hljs'>details></code><span>物体。</span></li><li value='4'><span>の</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 オブジェクトの key() メソッド</span> </h3><p dir='ltr'><span>の</span> <b><code class='hljs'> Object.keys()></code></b> <b> <strong>方法</strong> </b> <span>JavaScript では、オブジェクトの列挙可能なプロパティ名の配列を取得するために使用されます。オブジェクトのキーを含む配列を返します。</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/base64-decoding-javascript">jsでbase64デコードする</a>
</blockquote> <h3><span>2.</span> <span>JavaScriptを使用してオブジェクトの配列からオブジェクトを削除するにはどうすればよいですか?</span> </h3><p dir='ltr'><span>この問題を解決するには、以下で説明する 2 つのアプローチがあります。</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>オブジェクト名.プロパティ名 = 値</em> </i> <b> <strong> </strong> </b> <span>（または）</span> <i> <em>オブジェクト名[プロパティ名] = 値</em> </i> <span>。</span></li><li value='2'><span>プロパティを削除するには、簡単に使用できます</span> <i> <em>オブジェクト名.プロパティ名を削除 (</em> </i> <span>または）</span> <i> <em>オブジェクト名[プロパティ名]を削除します</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="">カテゴリ</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/latex-tutorial/">ラテックスのチュートリアル</a> </li><li> <a href="/dbms-relational-algebra/">Dbms - 関係代数</a> </li><li> <a href="/python-pandas/">Python-パンダ</a> </li><li> <a href="/process-synchronization/">プロセスの同期</a> </li><li> <a href="/java-operators/">Java オペレーター</a> </li><li> <a href="/java-timer-class/">Java タイマー クラス</a> </li><li> <a href="/kafka-tutorial/">カフカのチュートリアル</a> </li><li> <a href="/geometric-lines/">幾何学的な線</a> </li><li> <a href="/linux-basic-commands/">Linuxの基本コマンド</a> </li><li> <a href="/chatgpt/">チャットGpt</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">Javaのオブジェクトクラス</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Java のオブジェクト クラスは java.lang パッケージに存在します。</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/object-class-in-java"> <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="/find-shortest-distance-from-a-guard-in-a-bank">銀行内の警備員からの最短距離を求める</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/static-methods-vs-instance-methods-java">Java の静的メソッドとインスタンス メソッド</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/fundamental-6-pisces-traits-131560">魚座の基本的な6つの特徴を解説</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/apache-ant-tutorial/">Apache Ant チュートリアル</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-update-npm">NPMを更新するにはどうすればよいですか?</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="/how-find-array-length-java">Java 配列の len</a>
</li><li><a href="/java-string-substring">文字列javaの部分文字列</a>
</li><li><a href="/greatandhra-reviews">グレートアンドラ</a>
</li><li><a href="/gimp-heal-tool">修復ツール gimp</a>
</li><li><a href="/python-constructor">Pythonコンストラクター</a>
</li><li><a href="/computer-network-types">ネットワークの種類</a>
</li><li><a href="/how-see-blocked-number">Androidでブロックされた番号を見つける方法</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="//hr.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>
<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>