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

推薦する

Vue3の一般的なAPIの使用方法の紹介

目次ライフサイクルの変化反応的な参照vue2.x では ref を使用して要素タグを取得します。vu...

mysql バックアップ スクリプトを作成し、7 日間保存します。

スクリプトの要件: MySQL データベースを毎日バックアップし、スクリプトを 7 日間保存します。...

nginx + fastcgi を使用して画像認識サーバーを実装する

背景ディープラーニング モデルの推論には、特定のデバイスが使用されます。マシンは、モデルの読み込み、...

ZabbixはPSK共有キーを使用してサーバーとエージェント間の通信を暗号化します。

Zabbix バージョン 3.0 以降、Zabbix サーバー、Zabbix プロキシ、Zabbi...

Dockerレジストリイメージ同期の実装アイデア

はじめに以前は、Docker イメージは Azure のコンテナー レジストリに保存されていました。...

Svelte の Defer Transition を Vue で実装する方法

最近、Rich Harris の <Rethinking Reactivity> ビデオ...

SQL 集計、グループ化、並べ替え

目次1. 集計クエリ1. COUNT関数2. SUM関数3. AVG関数4. MAX関数とMIN関数...

Windows に MySQL 5.7.18 の解凍バージョンをインストールするチュートリアル

1. インストールプロセスMySQL バージョン: 5.7.18 1. my.ini ファイル(簡易...

MySQLデータベースでゼロ値を含む日付の問題について簡単に説明します

デフォルトでは、MySQL は日付に 0 値を挿入することを受け入れますが、実際には日付の 0 値に...

HTML ページ共通スタイル (推奨)

以下のように表示されます。 XML/HTML コードコンテンツをクリップボードにコピーbody、di...

LinuxベースのLVMシームレスディスク水平拡張の詳細な説明

環境名前財産CPU 5650 円メモリ4Gディスク20G+4TB この時点で、サーバーにはすでに次の...

jar パッケージを Docker コンテナに変換する方法

jar パッケージを Docker コンテナに変換する方法1.まずJavaイメージをダウンロードする...

Nginx における accept lock の仕組みと実装の詳細な説明

序文nginx はマルチプロセス モデルを使用します。リクエストが届くと、システムはプロセスをロック...

インデックススキャンを使用したMySQLソート

目次sakilaをインストールするインデックススキャンソートテーブル構造インデックススキャンをソート...

CSS を使用して、左側に固定幅、右側に適応幅を持つ 2 列レイアウトを実装する複数の方法

CSS を使用して、左側に固定幅、右側に適応幅を持つ 2 列レイアウトを実装する 7 つの方法。コー...