オブジェクト内のフィールドを削除する 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 コード リファクタリングのベスト プラクティスの概要

推薦する

JavaScript のシングルトン デザイン パターン

目次1. デザインパターンとは何ですか? 2. デザインパターンの5つの設計原則(SOLID) 3....

Linux ターミナルでドメイン IP アドレスを見つけるコマンド (5 つの方法)

このチュートリアルでは、Linux ターミナルでドメイン名またはコンピューター名の IP アドレスを...

MySQLのスロークエリの詳細な説明

MySQL操作情報のクエリ show status -- すべての MySQL 操作情報を表示します...

Saltstack に Zabbix サービスをデプロイする方法を説明します

目次SaltstackがZabbixサービスを導入httpd、mysql、phpをインストールするh...

フレックスレイアウトの改行スペースでの align-content の使用

1. この記事で実装した効果図は以下のとおりです。レイアウトの右側に Flex レイアウトを使用し、...

24 の実用的な JavaScript 開発のヒント

目次1.配列を初期化する2. 配列の合計、最大値、最小値3. エラー値をフィルタリングする4. 論理...

MySQLカバーインデックスの利点

一般的な提案は、WHERE 条件のインデックスを作成することですが、これは実際には一方的です。インデ...

Windows環境でのMySQL 8.0.13無料インストールバージョンの設定チュートリアル

目次圧縮ファイルをダウンロードするアドレス: https://dev.mysql.com/downl...

MySQLカスタム関数とストアドプロシージャの詳細な説明

序文この記事では主にMySQLのカスタム関数とストアドプロシージャに関する関連コンテンツを紹介し、皆...

MySQLのint主キーの自己増分の問題を解決する

導入MySQL データベースを使用する場合、int を主キーとして使用し、自動インクリメントに設定す...

データベースを削除せずにMySQLのすべてのテーブルを素早く削除する方法

この記事では、例を使用して、データベースを削除せずに MySQL 内のすべてのテーブルをすばやく削除...

MybatisはSQLクエリのインターセプションと変更の詳細を実装します

序文インターセプターの機能の 1 つは、特定のメソッドの呼び出しをインターセプトできることです。イン...

Dreamweaver8を使用してウェブサイトのファイルをチェックして整理する方法

Dreamweaver8 を使用して独自の Web サイトを作成する目的は何ですか?インターネットに...

CSS と HTML とフロントエンド テクノロジーのレイヤー図

JavascriptとDOMの関係は非常に曖昧で、CSSやHTMLのフロントエンド技術層も理解してい...

MySQL マスタースレーブの原理と構成の詳細

MySQLのマスタースレーブ構成と原理、参考までに具体的な内容は以下のとおりです。 1. 環境の選択...