ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript: 指定されたキーに対応するキーと値のペアをオブジェクトから削除するにはどうすればよいですか?

JavaScript: 指定されたキーに対応するキーと値のペアをオブジェクトから削除するにはどうすればよいですか?

PHPz
リリース: 2023-08-22 15:53:12
転載
3368 人が閲覧しました

JavaScript: 指定されたキーに対応するキーと値のペアをオブジェクトから削除するにはどうすればよいですか?

JavaScript では、キーと値のペアの形式でデータを保存するオブジェクトを作成できます。オブジェクト内のデータには、ドット表記 (obj.key) または括弧表記 (obj["key"]) を使用してアクセスできます。以下の例を参照してください。 -

let obj = { key1: "value1", key2: "value2", key3: "value" };
ログイン後にコピー
指定されたキーに対応するキーと値のペアをオブジェクトから削除できますが、削除する前に、これらのキーがオブジェクトに存在することを確認する必要があります。 このチュートリアルでは、3 つの方法を紹介します。

削除演算子の使用

削除演算子は、オブジェクトのプロパティを削除するために使用されます。 delete 演算子は変数自体を削除するのではなく、その値のみを削除します。

次の例を参照してください -

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      let obj = { key1: "value1", key2: "value2", key3: "value3" };
      delete obj.key2;
      document.getElementById("result").innerHTML = JSON.stringify(obj);
      console.log(obj)
   </script>
</body>
</html>
ログイン後にコピー

上の例からわかるように、削除演算子は値の

のみを削除します。 キーそのものではなく、キーです。

以下は、上記のコードの 1 行ずつの説明です。-

キーそのものではなくキーです。

以下は、上記のコードの 1 行ごとの説明です。-

let obj = { key1: "value1", key2: "value2", key3: "value3" };
ログイン後にコピー
ログイン後にコピー

3 つのキーと値のペアを含むオブジェクトを作成しました。

delete obj.key2;
ログイン後にコピー

delete 演算子は、キーが「key2」であるキーと値のペアを削除するために使用されます。

console.log(obj);
ログイン後にコピー
ログイン後にコピー

コンソール上の上記のコードの出力は次のようになります: { key1: "value1", key3: "value3" } キー「key2」のキーと値のペアがオブジェクトから削除されていることがわかります。

filter() メソッドの使用

filter() メソッドは、既存の配列から新しい配列を作成するために使用されます。以下の例を参照してください。

Example




   Examples


   
<script> let obj = { key1: &quot;value1&quot;, key2: &quot;value2&quot;, key3: &quot;value3&quot; }; let newObj = Object.keys(obj) .filter(key => key != "key2") .reduce((acc, key) => { acc[key] = obj[key]; return acc; }, {}); document.getElementById("result").innerHTML = JSON.stringify(newObj); console.log(newObj) </script>
ログイン後にコピー

上記の例からわかるように、filter() メソッドは、 キー自体ではなく、キーです。

以下は、上記のコードの 1 行ずつの説明です:

鍵は鍵そのものです。

以下は、上記のコードを 1 行ごとに説明したものです。

let obj = { key1: "value1", key2: "value2", key3: "value3" };
ログイン後にコピー
ログイン後にコピー

3 つのキーと値のペアを含むオブジェクトを作成しました。

let newObj = Object.keys(obj)
.filter(key => key != "key2")
.reduce((acc, key) => {
   acc[key] = obj[key];
   return acc;
}, {});
ログイン後にコピー

Object.keys() メソッドは、オブジェクト キーを含む配列を作成するために使用されます。 filter() メソッドは、既存の配列から新しい配列を作成するために使用されます。鍵となるのは 「key2」と比較してください。等しくない場合は、キーと値のペアを新しい配列に追加します reduce() メソッドは、配列をオブジェクトに縮小するために使用されます。

console.log(newObj);
ログイン後にコピー
上記のコードの出力は、

{ key1: "value1", key3: "value3" }

となります。ご覧のように、 キー「key2」を持つ削除されたキーと値のペアはオブジェクトから削除されました。

for...in ループを使用する

for...inループは、オブジェクトのプロパティを走査するために使用されます。

次の例を参照してください。-




   Examples


   
<script> let obj = { key1: &quot;value1&quot;, key2: &quot;value2&quot;, key3: &quot;value3&quot; }; for (let key in obj) { if (key == "key2") { delete obj[key]; } } document.getElementById("result").innerHTML = JSON.stringify(obj); console.log(obj) </script>
ログイン後にコピー

上の例からわかるように、for…in ループは、キーの値 キー自体ではありません。

上記のコードを 1 行ずつ説明します:

鍵そのものではありません。

以下は、上記のコードを 1 行ごとに説明したものです。

let obj = {key1: "value1", key2: "value2", key3: "value3"};
ログイン後にコピー

3 つのキーと値のペアを含むオブジェクトを作成しました。

for (let key in obj) {
   if (key == "key2") {
      delete obj[key];
   }
}
ログイン後にコピー

for…in ループを使用して、オブジェクトのプロパティを走査します。 key 変数は、オブジェクトのキーを格納するために使用されます。キーが「key2」の場合、オブジェクトからキーと値のペアを削除します。

console.log(obj);
ログイン後にコピー
ログイン後にコピー
上記のコードの出力は、

{ key1: "value1", key3: "value3" }

となります。ご覧のように、 キー名「key2」の削除されたキーと値のペアはオブジェクトから削除されました。

結論

このチュートリアルでは、キーと値のペアに対応するキーと値のペアを削除する 3 つの方法を紹介しました。 オブジェクトのキーを指定します。演算子、for...in ループ、filter() メソッドを削除します。

以上がJavaScript: 指定されたキーに対応するキーと値のペアをオブジェクトから削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:tutorialspoint.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート