JavaScriptでオブジェクトの属性を削除する方法

醉折花枝作酒筹
リリース: 2023-01-06 11:17:05
オリジナル
24272 人が閲覧しました

js では、delete キーワードを使用してオブジェクト内の属性を削除できます。構文形式は「delete object.attribute」です。 delete 演算子は、オブジェクトの属性を削除するために使用されます。delete 演算子が true を返した場合は削除できることを意味し、false を返した場合は削除できないことを意味します。

JavaScriptでオブジェクトの属性を削除する方法

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

オブジェクトから属性を削除する意味的に正しい方法は、delete キーワードを使用することです。

指定されたオブジェクト

const car = {
  color: 'blue',
  brand: 'Ford'
}
ログイン後にコピー

次のコマンドを使用して、このオブジェクトからプロパティを削除できます。

delete car.brand
ログイン後にコピー

JavaScriptでオブジェクトの属性を削除する方法

その仕組みは次のとおりです。

delete car['brand']
delete car.brand
delete newCar['brand']
ログイン後にコピー

プロパティを未定義に設定します。

ループ内の多数のオブジェクトを操作する場合など、非常に最適化された方法でこれを行う必要がある場合、別の選択肢は、プロパティを未定義に設定することです。

削除の性質上、削除のパフォーマンスは、単純に unknown に再割り当てするよりも大幅に遅くなり、最大 50 倍遅くなります。

ただし、プロパティはオブジェクトから削除されないことに注意してください。その値は消去されますが、オブジェクトを反復処理するとまだ存在します:

delete の使用は依然として非常に高速です。そうする正当な理由がある場合にのみ、この種のパフォーマンスを検討する必要があります。それ以外の場合は、より明確なセマンティクスと機能を持つことが常に優先されます。

オブジェクトを変更せずに属性を削除する

拡張情報:

削除演算子は、オブジェクトの属性を削除するために使用されます。

構文:

削除演算子を直接使用します

delete object.property 或 delete object['property']
ログイン後にコピー

例:

var person = {
    name: 'abc'
    age: 18
}

delete person.name

console.log(person) // {age: 18}
ログイン後にコピー

戻り値:

削除演算子にはreturn value の場合、戻り値はブール値であり、すべての場合に true です。存在しない属性を削除した場合でも、true が返されます。それでも上記と同じコードです。戻り値を出力して確認してみてはいかがでしょうか

console.log(delete person.name) //true
console.log(delete person.job) //即使删除对象不存在的属性依然返回true
ログイン後にコピー

ただし、例外もあります。(false を返す)、プロパティが構成不可能なプロパティの場合 (構成不可能なプロパティの概念については、Object.defineProperty を参照できます。)、私は少し混乱しました。この概念については初めて聞きました)、非厳密モードでは false が返され、厳密モードでは構文エラー例外がスローされます。

具体的な用途

1. オブジェクトの属性が存在しない

前述したように、オブジェクトに存在しない属性を削除する場合、削除は無効ですが、戻り値は true のままです

2. 同じ名前のプロパティがプロトタイプ チェーン上に存在します

削除演算子がプロパティを正常に削除すると、そのプロパティは存在しません。オブジェクトのプロトタイプチェーン上に同名のプロパティが存在する場合、そのオブジェクトはプロトタイプチェーンから削除され、同名のプロパティはプロトタイプチェーン上に継承されます。メモリ管理は削除オペレーターが操作できるものではなく、メモリとは何の関係もありません。メモリ管理では、この MDN 記事を推奨しています

// 构造函数
function Person() {
    this.name = "张三",
    this.job = "工程师"
}

Person.prototype.name = "李四"
// 创建实例对象
var p = new Person();
// 只删除p实例的name属性
delete p.name;
console.log(p) => // 通过打印如下图,name属性成功删除
ログイン後にコピー
接下来看: 
console.log(p.name) => // '李四' 依然可以访问到
ログイン後にコピー

したがって、削除操作は独自の属性に対してのみ機能することがわかります。ここでは、スコープ チェーンの理由である「Zhang San」をコンソールできます。インスタンス自体には属性がありません。この属性が見つかると、そのプロトタイプに同じ名前の属性があるかどうかが検索されます。

3. var 宣言を使用します

var を使用して宣言された属性 (関数を含む) は、グローバル スコープまたは関数スコープから削除できません

グローバル スコープで宣言されています属性:

// 声明属性
var a = 1; // 等同于window.a
delete a  // 严格模式下抛出语法异常 SyntaxError
console.log(a); // 1 非严格模式下
console.log(delete a); // 非严格模式下false
ログイン後にコピー
// 声明函数
var fn = function () {
    console.log(1);
}
delete fn // 严格模式下抛出语法异常  SyntaxError
fn() // 1 非严格模式下delete失效, 函数依然存在

// 另外, 除字面量定义外,匿名函数定义函数效果也是一样
ログイン後にコピー

関数スコープでの属性の宣言 (効果はグローバル スコープでの場合と同じです):

// 局部作用域声明属性
funtion fn() {
    var a = 1;
    delete a; // 严格模式下抛出语法异常 SyntaxError
    console.log(a); // 1
    console.log(delete a); // 非严格模式下false
}

fn();
ログイン後にコピー
// 局部作用域声明函数
var fn = function() {
    var fn2 = function() {
        console.log(1);
    };
    delete fn2 // 严格模式下抛出语法异常 SyntaxError 
    console.log(delete fn2); // false 非严格模式下
    fn2(); // 1
}
fn();
ログイン後にコピー

さらに、オブジェクトで定義された関数は削除できることにも注意してください。

var person = {
    name: '张三',
    showName: function () {
        console.log(this.name);
    }
}
delete person.showName
console.log(person.showName) // undefined
ログイン後にコピー

4 などの属性として let および const で宣言された属性

let または const で宣言された属性は、それが宣言されているスコープから削除することはできません。 var と同じです。現時点ではこれしか分かりません。マスターをご存知の方、アドバイスをお願いします。

5. 設定できない属性

Math、Array、Object などは、組み込みオブジェクトのプロパティは削除できません

console.log(Array.length); // 1
delete Array.length
console.log(Array.from); 0
ログイン後にコピー
delete Array.prototype //严格模式下抛出异常
console.log(Array.prototype) // 非严格模式下,prototype依然存在, 可以自己试试了,自己动手,丰衣足食
console.log(Array.prototype.join); // 非严格模式下,join方法依然存在
ログイン後にコピー

これらの組み込みオブジェクトのプロパティのみを削除でき、次のような組み込みオブジェクトのメソッドも削除できることに注意してください。

console.log(Array.forEach); // 内置函数
delete Array.forEach // 不用区分严格模式与否
console.log(Array.forEach); // undefined
ログイン後にコピー

Object.defineProperty()の設定 設定不可プロパティのため削除できません

var person = {};
Object.defineProperty(person, 'name', {
    value: '张三',
    configurable: false
})
delete person.name // 严格模式下,抛出异常
console.log(person.name); // 张三
console.log(delete person.name); // 非严格模式false
ログイン後にコピー

var、let、constで作成した設定不可プロパティは削除操作では削除できません

var a = 'abc'; // 属于window 等同于window.a
var aVal = Object.getOwnPropertyDescriptor(window, 'a'); 
console.log(aVal);
//  aVal输入如下   
//    {
//       value: 2,
//         writable: true, 
//         enumerable: true, 
//         configurable: false // 由于是var声明的属性,所以为false
//     }
ログイン後にコピー
var a = 'abc'; // 属于window 等同于window.a
delete a // 严格模式下抛出异常
var aVal = Object.getOwnPropertyDescriptor(window, 'a'); 
console.log(aVal);
console.log(delete a); //false
//  非严格模式下,aVal输入如下   
//    {
//       value: 2,
//         writable: true, 
//         enumerable: true, 
//         configurable: false // 由于是var声明的属性,所以为false
//     }
ログイン後にコピー

まだ読んでいない場合は、Object.defineProperty を見てみましょう。理解している場合は、直接スキップできます。

6. 配列の削除

delete 演算子を使用して配列の要素を削除すると、削除された要素は配列から削除されますが、配列の長さは変わりません。

var arr = [1, 2, 3];
delete arr[1]
console.log(arr); // [1, undefined × 1, 2]
console.log(delete arr[1]) // true
console.log(arr[1]); // undefined
ログイン後にコピー

しかし、ここに問題があります

console.log(1 in arr) // false
ログイン後にコピー

したがって、配列内の項目を未定義に割り当てたい場合は、削除演算子を使用せず、次の代入を直接使用する必要があります

arr[1] = undefined;
// 这样就可以解决上面的问题 
console.log(1 in arr) // true
ログイン後にコピー

[推奨学習: JavaScript 上級チュートリアル]

以上がJavaScriptでオブジェクトの属性を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!