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

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

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

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

指定されたオブジェクト

const car = {
  color: 'blue',
  brand: 'Ford'
}

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

delete car.brand

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

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 サイトの他の関連記事を参照してください。