オブジェクト内のフィールドを削除する js メソッド

オブジェクト内のフィールドを削除する js メソッド

この記事では主に、オブジェクト内のフィールドを削除するための js の実装を紹介し、次のように共有します。

// 次のメソッドは元のオブジェクトを変更しません。let item = {
    名前:「張三」
    年齢:'18',
    性別: '男性'
   };
   console.log(item) // {年齢: "18",性別: "男性",名前: "張三"}


   { 年齢、...パラメータ } = 項目とします。
   console.log(item) // {年齢: "18",性別: "男性",名前: "張三"}
   console.log(typeof params.age) // 未定義
   console.log(params) // {gender: "男",name: "张三"}

   // 次のメソッドはオブジェクトを直接変更します。let item1 = {
    名前:「張三」
    年齢:'18',
    性別: '男性'
   };
   console.log(item1) // {年齢: "18",性別: "男性",名前: "張三"}
   item1.name を削除します。
   console.log(typeof item1.name) // 未定義
   console.log(item1) // // {年齢: "18",性別: "男性"}

一般に信じられていることとは反対に、削除演算子はメモリを直接解放することには何の関係もありません。メモリ管理は参照を分割することによって間接的に行われます。詳細については、メモリ管理ページを参照してください。

delete 演算子は、指定されたプロパティをオブジェクトから削除します。削除が成功した場合は true を返し、失敗した場合は false を返します。

ただし、次のような状況では重要な考慮が必要です。

削除しようとしているプロパティが存在しない場合は、削除しても効果はありませんが、true が返されます。
オブジェクトのプロトタイプ チェーンに、削除するプロパティと同じ名前のプロパティがある場合、プロパティを削除した後、オブジェクトはプロトタイプ チェーン上のプロパティを使用します (つまり、削除操作は自身のプロパティに対してのみ機能します)。
var で宣言されたプロパティは、グローバル スコープまたは関数のスコープから削除することはできません。
この場合、削除操作では、グローバル スコープ内の関数を削除できません (関数が関数宣言からのものか関数式からのものかに関係なく)。
削除できないグローバル スコープ内の関数を除き、オブジェクト内の関数は delete 操作を使用して削除できます。
let または const で宣言されたプロパティは、宣言されたスコープから削除することはできません。
構成できないプロパティは削除できません。つまり、Math、Array、Object などの組み込みオブジェクトのプロパティや、Object.defineProperty() メソッドを使用して設定不可に設定されたプロパティは削除できません。

次のコード ブロックは簡単な例を示しています。

var 従業員 = {
 年齢: 28歳
 名前: 'abc',
 指定: 「開発者」
}

console.log(delete Employee.name); // true を返します
console.log(delete Employee.age); // true を返します

// 存在しない属性を削除しようとすると // これも true を返します
console.log(delete Employee.salary); // true を返します

設定できないプロパティ

プロパティが設定不可に設定されている場合、削除操作は効果がなく、false を返します。厳密モードでは、SyntaxError がスローされます。

var 従業員 = {};
Object.defineProperty(従業員、'名前'、{構成可能: false});

console.log(delete Employee.name); // false を返します

var、let、const によって作成された設定不可能なプロパティは、削除操作では削除できません。

var nameOther = 'XYZ';

// 次のメソッドを通じてグローバル プロパティを取得します。
Object.getOwnPropertyDescriptor(ウィンドウ、'nameOther');

// 出力: オブジェクト {値: "XYZ",
// 書き込み可能: true、
// 列挙可能: true、
// 設定可能: false}

// 「nameOther」はvarキーワードを使用して追加されるため、
// 設定不可に設定されています
nameOther を削除します。 // false を返します

厳密モードでは、このような操作は例外をスローします。

厳密モードと非厳密モード

厳密モードでは、変数、関数パラメータ、または関数名への直接参照に対して削除操作を使用すると、構文エラー (SyntaxError) がスローされます。したがって、厳密モードで構文エラーを回避するには、delete object.property または delete object['property'] の形式で delete 演算子を使用する必要があります。

Object.defineProperty(globalThis, 'variable1', { 値: 10, 構成可能: true, });
Object.defineProperty(globalThis, 'variable2', { 値: 10, 構成可能: false, });

console.log(変数1を削除); // true

// 厳密モードでは SyntaxError が発生します。
console.log(変数2を削除); // false

関数func(param) {
 // 厳密モードでは SyntaxError が発生します。
 console.log(パラメータを削除); // false
}

// 厳密モードでは SyntaxError が発生します。
console.log(delete func); // false

var で宣言された変数はすべて設定不可としてマークされます。次の例では、給与は設定できず、削除もできません。非厳密モードでは、次の削除操作は false を返します。

関数 Employee() {
 給与を削除します。
 var 給与;
}

従業員();

同じコードが厳密モードでどのように動作するかを見てみましょう。 false を返す代わりに、SyntaxError をスローします。
「厳密な使用」;

関数 Employee() {
 給与を削除します。 // 構文エラー
 var 給与;
}

// 同様に、任意の関数で delete 演算子を直接使用すると、構文エラーが発生します。

関数DemoFunction() {
 //コード
}

DemoFunction を削除します。 // 構文エラー


// グローバル スコープに adminName 属性を作成します。adminName = 'xyz';

// グローバル スコープで empCount プロパティを作成します // var を使用したため、構成不可としてマークされます。同様に、let や const も設定できません。
var empCount = 43;

従業員の詳細 = {
 名前: 'xyz',
 年齢: 5,
 指定: 「開発者」
};

// adminName はグローバル スコープのプロパティです。
// var で作成されていないため、削除できます。
// したがって、設定可能です。
adminName を削除します。 // true を返します

// 対照的に、empCount は構成できません。
// 作成時に var が使用されたためです。
delete empCount; // false を返す

// delete はオブジェクトの属性を削除するために使用できます delete EmployeeDetails.name; // true を返します

// プロパティが存在しない場合でも、「true」を返します
EmployeeDetails.salary を削除します。 // true を返します

// 削除は組み込みの静的プロパティには影響しません delete Math.PI; // false を返します

// EmployeeDetails はグローバル スコープのプロパティです。
// 「var」なしで定義されているため、構成可能としてマークされます。
EmployeeDetails を削除します。 // true を返します

関数f(){
 var z = 44;

 // 削除はローカル変数名には影響しません delete z; // false を返します
}

削除とプロトタイプチェーン

次の例では、プロトタイプ チェーンで同じ名前のプロパティが使用可能な場合に、オブジェクト自体のプロパティを削除します。

関数Foo() {
 このバー = 10;
}

Foo.プロトタイプ.バー = 42;

var foo = new Foo();

// 削除されたプロパティは foo オブジェクト自身のプロパティなので true を返します。delete foo.bar;

// foo.bar はプロトタイプ チェーン上で使用可能なので、引き続き使用可能です。
コンソールログ(foo.bar); //42

// プロトタイプからプロパティを削除します delete Foo.prototype.bar; //true

// 「bar」プロパティは削除されたため、Foo から継承できなくなりました。
console.log(foo.bar); //未定義

配列要素の削除

配列要素を削除しても、配列の長さは影響を受けません。配列の最後の要素を削除した場合でも同様です。

delete 演算子を使用して配列要素を削除すると、削除された要素は配列に属しなくなります。次の例では、deleteを使用してツリーを削除します[3]。

var trees = ["レッドウッド","ベイ","シダー","オーク","メープル"];
木を削除する[3]
if (木に3つ) {
  // これは実行されません}

配列要素を存在させながら undefined の値を保持したい場合は、delete を使用する代わりに、要素に undefined を割り当てることができます。次の例では、trees[3]にundefinedの値が割り当てられていますが、要素はまだ存在しています。

var trees = ["レッドウッド","ベイ","シダー","オーク","メープル"];
木[3] = 未定義;
if (木に3つ) {
  // これが実行されます}

配列の内容を変更して配列要素を削除する場合は、splice() メソッドを使用します。次の例では、splice()を使用してtrees[3]を配列から削除します。

var trees = ['レッドウッド', 'ベイ', 'シダー', 'オーク', 'メープル'];
木を繋ぎます(3,1);
console.log(trees); // ["レッドウッド", "ベイ", "シダー", "メープル"]

js でオブジェクト内のフィールドを削除する方法についての記事はこれで終わりです。js でオブジェクト内のフィールドを削除する方法についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript でオブジェクトのプロパティを削除する方法
  • JSでオブジェクト内のプロパティを削除する場合の詳細な説明
  • jsはオブジェクト/配列内のnull、未定義、空のオブジェクト、空の配列を削除します
  • js delete の使用方法 (オブジェクトのプロパティと変数を削除する)
  • JavaScript でオブジェクトを動的に追加、変更、削除するためのプロパティとメソッドの詳細な説明
  • JavaScriptはオブジェクトの不要なプロパティを削除します

<<:  jQueryはショッピングカートの完全な機能を実現します

>>:  11 の素晴らしい JavaScript コード リファクタリングのベスト プラクティスの概要

推薦する

CSS セレクタの 4 つのカテゴリ: 基本、組み合わせ、属性、疑似クラス

セレクターとは何ですか?セレクターの役割は、セレクターを介して要素を見つけ、CSS スタイルを要素に...

ウェブページのフォント設定についての簡単な説明

サイト全体のフォントを設定することは、常にシンプルでありながら難しい作業です。深く掘り下げていくと、...

フローティング要素が親要素の高さを崩す原因と解決策の詳細な説明

フローティング要素は、親要素の高さを縮小します。要素を float float:left/right...

親要素に対する CSS 子要素の固定配置ソリューションの詳細な説明

基本概念絶対配置: 絶対配置に設定された要素ボックスはドキュメント フローから完全に削除され、その包...

Vueの計算プロパティの詳細な説明

1. 計算属性とは何ですか? 簡単に言えば、計算された結果が属性に保存されるもので、キャッシュとして...

仮想マシンに Windows Server 2008 オペレーティング システムをインストールする

この記事では、Windows Server オペレーティング システムのインストールと企業でのそのア...

Angular 依存性注入の説明

目次概要1. 依存性注入2. Angularの依存性注入フレームワーク概要依存性注入: デザインパタ...

easycomモードでUNI-APPコンポーネントを呼び出す際に習得する必要がある実践的なスキル

この記事は議論の出発点となることを目的としています。詳細なドキュメントと easycom の仕様につ...

div の幅が width:100% に設定されていて、パディングまたはマージンが親要素を超えてしまう問題の解決方法

序文この記事では、div の幅を 100% に設定し、親要素を超えてパディングまたはマージンを設定す...

Vue+Spring Bootで検証コード機能を実現

この記事では、検証コード機能を実装するためのvue+spring bootの具体的なコードを例として...

Docker ビルド PHP 環境チュートリアル詳細説明

Dockerのインストール公式インストールスクリプトを使用して最新バージョンのDockerをインスト...

シェアしたい絶妙なApple風無料アイコン素材18セット

Apple マグカップのアイコンと追加機能 HD ストレージボックス – アドオンパックセイバースノ...

docker nginxコンテナの起動とローカルへのマウントの詳細な説明

まず、nginx コンテナ内の構造:コンテナを入力します: docker exec -it b511...

Vue の基本リスナーの詳細な説明

目次Vueのリスナーとは何かリスナーの使い方vue リスナーウォッチVue リスナー - ディープリ...

Vue の this.$router と this.$route の違いと push() メソッド

公式文書には次のように記されている。ルーターを挿入することで、どのコンポーネントでも this.$r...