Heim > Web-Frontend > js-Tutorial > Hauptteil

So löschen Sie Attribute in einem Objekt in Javascript

醉折花枝作酒筹
Freigeben: 2023-01-06 11:17:05
Original
24425 Leute haben es durchsucht

In js können Sie das Schlüsselwort delete verwenden, um Attribute im Objekt zu löschen. Das Syntaxformat lautet „Objekt.Attribut löschen“. Der Löschoperator wird verwendet, um ein Attribut eines Objekts zu löschen. Wenn der Löschoperator „true“ zurückgibt, bedeutet dies, dass es gelöscht werden kann, und wenn er „false“ zurückgibt, bedeutet dies, dass es nicht gelöscht werden kann.

So löschen Sie Attribute in einem Objekt in Javascript

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Der semantisch korrekte Weg, eine Eigenschaft aus einem Objekt zu löschen, ist die Verwendung des Schlüsselworts delete. 🔜 Optimieren Sie es sehr stark. Eine andere Möglichkeit, dies zu tun, beispielsweise wenn Sie eine große Anzahl von Objekten in einer Schleife bearbeiten, besteht darin, die Eigenschaft auf undefiniert zu setzen.

Aufgrund seiner Natur ist die Leistung des Löschens viel langsamer als die einfache Neuzuweisung zu undefiniert, bis zu 50-mal langsamer.

Beachten Sie jedoch, dass die Eigenschaft nicht vom Objekt entfernt wird. Sein Wert wird gelöscht, aber wenn Sie über das Objekt iterieren, ist es immer noch vorhanden:

So löschen Sie Attribute in einem Objekt in Javascript

Die Verwendung von „Delete“ ist immer noch sehr schnell. Sie sollten solche Leistungsprobleme nur untersuchen, wenn Sie einen guten Grund dafür haben, andernfalls wird dies immer vorgezogen haben eine klarere Semantik und Funktionalität.

Attribute löschen, ohne das Objekt zu verändern

Erweiterte Informationen:

Der Löschoperator wird verwendet, um ein Attribut des Objekts zu löschen.

Syntax:


Löschoperator direkt verwenden

const car = {
  color: 'blue',
  brand: 'Ford'
}
Nach dem Login kopieren

Zum Beispiel:

delete car.brand
Nach dem Login kopieren

Rückgabewert:

Der Löschoperator hat einen Rückgabewert. Der Rückgabewert ist ein boolescher Wert, der in allen Fällen wahr ist, auch wenn er löscht etwas, das nicht existiert Das Attribut gibt auch true zurück, oder der obige Code, warum nicht den Rückgabewert ausdrucken und sehen

delete car['brand']
delete car.brand
delete newCar['brand']
Nach dem Login kopieren
Aber es gibt Ausnahmen (Rückgabe von false), wenn das Attribut ein nicht konfigurierbares Attribut ist (für das Konzept). Für nicht konfigurierbare Attribute können Sie sich auf Object.defineProperty beziehen (ich war etwas verwirrt, als ich zum ersten Mal von diesem Konzept hörte). Im nicht-strikten Modus wird false zurückgegeben, und im strikten Modus wird eine Syntaxfehlerausnahme ausgelöst.

Spezifische Verwendung

1. Das Objektattribut existiert nicht

Wenn Sie ein Attribut löschen, das im Objekt nicht vorhanden ist, ist das Löschen ungültig, aber der Rückgabewert ist immer noch wahr

2 Das Attribut Wenn der Operator das Attribut mit demselben Namen erfolgreich löscht, ist es in der Prototypenkette vorhanden. Wenn jedoch das Attribut mit demselben Namen in der Prototypenkette des Objekts vorhanden ist, erbt das Objekt Attribut mit demselben Namen aus der Prototypenkette. Aber es hat nichts mit dem Speicher zu tun. Der Löschoperator kann die Speicherverwaltung nicht durchführen und hat auch nichts damit zu tun. Speicherverwaltung empfiehlt diesen MDN-Artikel

delete object.property 或 delete object['property']
Nach dem Login kopieren
rrree

Es ​​ist also ersichtlich, dass der Löschvorgang nur für seine eigenen Attribute funktioniert. Hier können Sie „Zhang San“ trösten, was der Grund dafür ist, dass die Instanz selbst dies nicht tut über dieses Attribut verfügt, wird geprüft, ob sein Prototyp das gleichnamige Attribut hat.

3. Var-Deklaration verwenden

Mit Var deklarierte Attribute (einschließlich Funktionen) können nicht aus dem globalen Bereich oder Funktionsbereich gelöscht werden

Attribute im globalen Bereich deklarieren:

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

delete person.name

console.log(person) // {age: 18}
Nach dem Login kopieren
console.log(delete person.name) //true
console.log(delete person.job) //即使删除对象不存在的属性依然返回true
Nach dem Login kopieren

Attribute im Funktionsbereich deklarieren (Die Auswirkung ist). das gleiche wie im globalen Bereich):

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

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

Darüber hinaus ist zu beachten, dass im Objekt definierte Funktionen gelöscht werden können, genau wie Attribute, wie z. B.

// 声明属性
var a = 1; // 等同于window.a
delete a  // 严格模式下抛出语法异常 SyntaxError
console.log(a); // 1 非严格模式下
console.log(delete a); // 非严格模式下false
Nach dem Login kopieren

4. Mit let und const deklarierte Attribute

Jedes deklarierte Attribut mit let oder const kann es nicht aus dem Bereich gelöscht werden, in dem es deklariert ist, und es hat den gleichen Effekt wie var. Ich kann das im Moment nur verstehen, bitte geben Sie mir einen Rat. Nicht einstellbare Eigenschaften

Math-, Array-, Objekt- und andere integrierte Objekteigenschaften können nicht gelöscht werden

// 声明函数
var fn = function () {
    console.log(1);
}
delete fn // 严格模式下抛出语法异常  SyntaxError
fn() // 1 非严格模式下delete失效, 函数依然存在

// 另外, 除字面量定义外,匿名函数定义函数效果也是一样
Nach dem Login kopieren
// 局部作用域声明属性
funtion fn() {
    var a = 1;
    delete a; // 严格模式下抛出语法异常 SyntaxError
    console.log(a); // 1
    console.log(delete a); // 非严格模式下false
}

fn();
Nach dem Login kopieren

Es ist zu beachten, dass nur die Eigenschaften dieser integrierten Objekte nicht gelöscht werden können, die Methoden integrierter Objekte jedoch schon gelöscht, wie zum Beispiel:

// 局部作用域声明函数
var fn = function() {
    var fn2 = function() {
        console.log(1);
    };
    delete fn2 // 严格模式下抛出语法异常 SyntaxError 
    console.log(delete fn2); // false 非严格模式下
    fn2(); // 1
}
fn();
Nach dem Login kopieren

Object.defineProperty() ist auf eine nicht einstellbare Eigenschaft festgelegt und kann nicht gelöscht werden

var person = {
    name: '张三',
    showName: function () {
        console.log(this.name);
    }
}
delete person.showName
console.log(person.showName) // undefined
Nach dem Login kopieren

Von var, let und const erstellte nicht einstellbare Eigenschaften können nicht durch den Löschvorgang gelöscht werden

console.log(Array.length); // 1
delete Array.length
console.log(Array.from); 0
Nach dem Login kopieren
delete Array.prototype //严格模式下抛出异常
console.log(Array.prototype) // 非严格模式下,prototype依然存在, 可以自己试试了,自己动手,丰衣足食
console.log(Array.prototype.join); // 非严格模式下,join方法依然存在
Nach dem Login kopieren

Falls nicht Lesen Sie es zuerst und werfen Sie einen Blick auf Object.defineProperty. Wenn Sie es verstanden haben, können Sie es direkt überspringen.

6. Ein Array löschen

Wenn Sie den Löschoperator verwenden, um ein Element des Arrays zu löschen, wird das gelöschte Element aus dem Array gelöscht, aber die Länge des Arrays ändert sich nicht

console.log(Array.forEach); // 内置函数
delete Array.forEach // 不用区分严格模式与否
console.log(Array.forEach); // undefined
Nach dem Login kopieren

Aber es gibt ein Problem hier

var person = {};
Object.defineProperty(person, 'name', {
    value: '张三',
    configurable: false
})
delete person.name // 严格模式下,抛出异常
console.log(person.name); // 张三
console.log(delete person.name); // 非严格模式false
Nach dem Login kopieren

Wenn Sie also ein Element im Array undefiniert zuweisen möchten, sollten Sie nicht den Löschoperator verwenden, sondern direkt die folgende Zuweisung verwenden

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
//     }
Nach dem Login kopieren
[Lernempfehlung:

Javascript-Tutorial für Fortgeschrittene

]

Das obige ist der detaillierte Inhalt vonSo löschen Sie Attribute in einem Objekt in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage