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

推薦する

JSは写真の自動再生効果を実現します

この記事では、写真の自動再生効果を実現するためのJSの具体的なコードを参考までに紹介します。具体的な...

CSSの2つの特別な値は、カスケードの継承と初期メソッドを制御するために使用されます。

カスケードを制御するために CSS の任意のプロパティに割り当てることができる特別な値が 2 つあり...

ウェブデザインの教育または学習プログラム

セクションコース内容営業時間1 ウェブデザインの概要2 2 HTML 基本タグとフォーマットタグ 2...

Linux での UDP について学ぶ

目次1. UDPとLinuxの基礎の紹介2. 各機能の使い方1. ソケット機能の使用2. バインド機...

Windows Server 2012 リモート デスクトップ ライセンス サーバーがライセンスを提供できず、リモート セッションが切断される

本日、会社の内部サーバーにログインしたところ、リモートアクセスができませんでした。エラー メッセージ...

three.js で 3D ダイナミック テキスト効果を実現する方法

序文みなさんこんにちは。CSS ウィザードの alphardex です。以前、海外のウェブサイトを閲...

Docker swarm の簡単なチュートリアル

3つの仮想マシン132、133、134を群がらせる1. クラスターを初期化し、自分自身をクラスターに...

JS を使用して航空機戦争の小さなゲームを実装する

この記事の例では、参考のために航空機戦争ゲームを実装するためのJSの具体的なコードを共有しています。...

HTML ファイルにファイルの内容を含める方法の概要

フォーラムでは、ネットユーザーから「HTML ファイル内の別の HTML ファイルの内容を読み取るこ...

1 つの記事で Vuex を理解する

目次概要Vuex の 4 つの主要オブジェクト状態の使用突然変異の使用ゲッターの使用アクションの使用...

TOM.COMのホームページリニューアルの経験

<br />何の警告もなく、cnBeta で TOM.COM の Web サイトが再設計...

VUEはトークンログイン認証を実装

この記事では、トークンログイン認証を実装するためのVUEの具体的なコードを例として紹介します。具体的...

k8s に ingress-nginx をデプロイする手順

目次序文1. Ingressの展開と構成2. httpsを使用する序文k8sクラスタサービスがデプロ...

MySQL 5.5.27 インストール グラフィック チュートリアル

1. MYSQLのインストール1. ダウンロードしたMySQLインストールファイルmysql-5.5...

冗長カーネルを削除するLinuxディープインの実装方法

前の記事では、deepin linux に新しいカーネルを手動でインストールする方法について説明しま...