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

推薦する

MySQL 学習 (VII): Innodb ストレージ エンジン インデックスの実装原理の詳細説明

概要データベースでは、ツリー ディレクトリと同様に、インデックスを使用してデータ検索を高速化します。...

MySQL 5.7.21 解凍版のインストールと設定方法のグラフィックチュートリアル

私は頻繁にシステムをインストールするので、インストールのたびにいくつかのソフトウェアを再インストール...

iOS、Android、ミニプログラムアプリの敷居の低い開発のためのフロントエンドフレームワークを詳しく解説

現在、クロスプラットフォーム開発技術はもはや新しい話題ではありません。市場にはいくつかのオープンソー...

ウェブサイトのパフォーマンスを向上させるためのウェブサーバーの改善

<br />このシリーズの最初のセクションでは、Web サイトのパフォーマンスを向上させ...

Viteの新しい体験の詳細な説明

Vite とは何ですか? (フロントエンドの新しいおもちゃです) Vite は、ネイティブ ES モ...

MySQL で誕生日から年齢を計算する複数の方法

以前はMySQLをあまり使用していなかったため、MySQLの機能にあまり詳しくありませんでした。この...

Mac での MySql の詳細なインストールと構成

1.ダウンロードしてインストールする公式ウェブサイトからコミュニティ エディションの dmg インス...

JavaScriptで計算機機能を実現するプロセスの詳細な説明

目次1. 電卓機能の紹介2. 計算機ページのデザイン1. ナビゲーションバー2. データ部分3. i...

MySQLデータベースのマスタースレーブレプリケーションの原理と機能の分析

目次1. データベースのマスター/スレーブ分類: 2. MySQL マスタースレーブの紹介3. マス...

axiosリクエストをvueでカプセル化する方法

実際、Vueでaxiosをカプセル化するのは非常に簡単ですまず、srcパスにhttpフォルダを作成し...

CSSスタイルのカスケーディングルールの詳細な説明

CSS スタイル ルール構文スタイルは、CSS の基本単位です。各スタイル ルールは、セレクターと宣...

Node.js コード実行をバイパスするためのヒントのまとめ

目次1. 子プロセス2. nodejsでのコマンド実行2.1 16進数エンコード2.2 ユニコードエ...

MySQL で特定の日、月、または年のデータをクエリするためのコードの詳細な説明

今日 テーブル名から * を選択します。ここで、to_days(時間フィールド名) = to_day...

10分でCSS3グリッドレイアウトを理解する

基本的な紹介前回の記事では、CSS3 のフレックスボックスを紹介しました。今日は、CSS3 のもう ...

mysql5.7.19 zip 詳細なインストールプロセスと構成

MySQL v5.7.19 正式版(32/64 ビットインストール版および zip 解凍版) 1. ...