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

JavaScriptでオブジェクトのプロパティを削除する方法【delete演算子の使い方を解説】

JavaScriptでオブジェクトのプロパティを削除するには、delete演算子を使用します。delete演算子は、ドット記法とブラケット記法のどちらの方法とも組み合わせて使うことができます。

構文（syntax）

delete object.property;

ブラケット記法を使う場合は、次のように記述します。

delete object["property"];

使用例

次の例では、まずネストされたオブジェクト内のプロパティ「country」にアクセスすると、その値「England」が出力されます。しかし、delete演算子を使ってこのプロパティを削除した後にもう一度アクセスすると、「England」の代わりにundefinedが表示されます。

<html>
<body>
<script>
    var txt = "";
    var person = {
        "name":"Ram",
        "age":27,
        "address": {
            "houseno" : 123,
            "streetname" : "Baker street",
            "country": "England"
        }
    }
    document.write("Before deletion :" + " "+ person.address.country);
    delete person.address.country;
    document.write("</br>");
    document.write("After deletion :" + " "+ person.address.country);
</script>
</body>
</html>

実行結果

Before deletion : England
After deletion : undefined

このように、削除後のプロパティにアクセスすると「undefined」が返されることが確認できます。

delete演算子を使う際の注意点

  • 戻り値について： delete演算子は削除に成功するとtrue、失敗するとfalseを返します。ただし、strictモードでは構成不可能（configurable: false）なプロパティを削除しようとするとエラーになります。
  • 変数には使用できない： varやletで宣言された変数、および関数宣言はdeleteで削除できません。deleteはあくまでオブジェクトのプロパティに対して機能します。
  • 配列への影響： 配列の要素をdeleteで削除しても配列のlengthは変わりません。削除された箇所はundefinedになり、要素番号に「穴」が空いた状態となります。配列から要素を完全に取り除きたい場合はsplice()メソッドを使用しましょう。
  • プロトタイプチェーン： プロトタイプから継承されたプロパティをインスタンス側でdeleteしても、プロトタイプ自体のプロパティは削除されません。

なお、元のオブジェクトを変更せずに特定のプロパティを除外したい場合は、スプレッド構文や分割代入のrest構文（const { country, ...rest } = obj;）を使った新しいオブジェクトの生成も有効な選択肢です。用途に応じて使い分けるとよいでしょう。

  1. JavaScriptでインポートしたオブジェクトを分割代入（デストラクチャリング）する方法

    JavaScriptでは、ESモジュールからインポートしたオブジェクトに対して分割代入（デストラクチャリング）を使うことで、必要なプロパティだけを個別の変数として簡潔に取り出すことができます。ここでは、import で読み込んだオブジェクトを分割代入する具体的な手順とコード例を紹介します。 ポイント：分割代入の基本構文 オブジェクトの分割代入は、次のように波括弧 { } の中に取り出したいプロパティ名を並べて記述します。let {プロパティ1, プロパティ2, プロパティ3} = オブジェクト;この構文は、インポートされたデフォルトエクスポートのオブジェクトにもそのまま適用できます。 コード例

  2. JavaScriptで多次元オブジェクトを作成する方法【サンプルコード付き】

    はじめに JavaScriptでは、オブジェクトのプロパティの値として別のオブジェクトを持たせることで、多次元（ネストされた）オブジェクトを作成できます。この構造を活用すると、氏名や学校情報、住所のように階層関係のあるデータを、直感的かつ整理された形で表現することが可能です。 サンプルコード 以下は、多次元JavaScriptオブジェクトを作成し、コンソールに表示するためのコード例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /