JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでオブジェクトのプロパティを削除する方法をわかりやすく解説

JavaScriptでオブジェクトのプロパティを削除するには、delete演算子を使用します。delete演算子は、指定したオブジェクトからプロパティそのものを取り除き、削除に成功した場合はtrueを返します。

以下に、オブジェクトのプロパティを削除するサンプルコードを示します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScriptでオブジェクトのプロパティを削除する</h1>
<div class="sample">削除前 <br /></div>
<div style="color: green;" class="result">削除後<br /></div>
<button class="btn">ここをクリック</button>
<h3>
上のボタンをクリックすると、オブジェクトのプロパティが削除されます
</h3>
<script>
    let btnEle = document.querySelector(".btn");
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let obj = {
        firstName: "Rohan",
        lastName: "Sharma",
        welcome() {
            return "Welcome " + this.firstName + " " + this.lastName;
        },
    };
    function beforeDelete() {
        sampleEle.innerHTML += "obj.firstName = " + obj.firstName + "<br>";
        sampleEle.innerHTML += "obj.lastName = " + obj.lastName + "<br>";
        sampleEle.innerHTML += "obj.welcome() = " + obj.welcome() + "<br>";
    }
    beforeDelete();
    btnEle.addEventListener("click", () => {
        delete obj.firstName;
        delete obj.lastName;
        delete obj.welcome;
        resEle.innerHTML += "obj.firstName = " + obj.firstName + "<br>";
        resEle.innerHTML += "obj.lastName = " + obj.lastName + "<br>";
        try {
            resEle.innerHTML += "obj.welcome() = " + obj.welcome() + "<br>";
        }
        catch (err) {
            resEle.innerHTML += err;
        }
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、まず削除前の状態として以下の情報が画面に表示されます。

  • obj.firstName = Rohan
  • obj.lastName = Sharma
  • obj.welcome() = Welcome Rohan Sharma

「ここをクリック」ボタンを押すと、delete演算子によってfirstName、lastName、welcomeの3つのプロパティがすべて削除されます。その結果、obj.firstNameとobj.lastNameはundefinedとなり、すでに存在しないwelcome()メソッドを呼び出そうとした時点でTypeErrorが発生してエラーメッセージが表示されます。

delete演算子を使う際のポイント

  • 戻り値：削除に成功するとtrue、失敗するとfalseを返します。
  • 変数や関数宣言は削除不可：varやlet、constで宣言した変数は削除できません。
  • パフォーマンスへの影響：deleteを頻繁に使うと、JavaScriptエンジンの最適化が妨げられる場合があります。

代替手段：分割代入とレスト構文

元のオブジェクトを変更せずに、特定のプロパティを除いた新しいオブジェクトを作りたい場合は、分割代入とレスト構文を組み合わせる方法が推奨されます。

const { firstName, ...rest } = obj;
console.log(rest); // firstNameを除いたオブジェクト

この方法であれば、イミュータブルなデータ操作が可能になり、Reactなどのモダンな開発環境でも安全に扱えます。用途に応じてdelete演算子と使い分けるとよいでしょう。

  1. JavaScriptでプロパティにアクセスする3つの方法｜ドット記法・角括弧・分割代入の使い分け

    JavaScriptでオブジェクトのプロパティにアクセスする3つの方法 JavaScriptには、オブジェクトが持つプロパティ（キーと値のペア）を参照するための方法が主に3つあります。どれも同じ値を取得できますが、それぞれ特徴や向いている場面が異なるため、正しく使い分けられるとコードの可読性と保守性が大きく向上します。 ドット記法：object.property 角括弧記法：object[property] 分割代入：let {property} = object 1. ドット記法（object.property） 最もシンプルで読みやすい記法です。obj.a のようにピリオドでつなぐだけ

  2. 文字列をJavaScriptオブジェクトに変換する方法【JSON.parse()の使い方】

    JavaScriptでJSON形式の文字列をオブジェクトに変換するには、JSON.parse()メソッドを使用します。このメソッドは、引数に渡された文字列を解析（パース）し、対応するJavaScriptオブジェクトを返します。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Docum