Comment supprimer des attributs dans un objet en javascript

Dans js, vous pouvez utiliser le mot-clé delete pour supprimer des attributs dans un objet, et le format de syntaxe est "delete object.attribute". L'opérateur delete est utilisé pour supprimer un attribut d'un objet. Lorsque l'opérateur delete renvoie vrai, cela signifie qu'il peut être supprimé, et lorsqu'il renvoie false, cela signifie qu'il ne peut pas être supprimé.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

La manière sémantiquement correcte de supprimer une propriété d'un objet est d'utiliser le mot-clé delete.

Étant donné un objet

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

vous pouvez supprimer les propriétés de cet objet en utilisant la commande suivante

delete car.brand

son fonctionnement est également représenté as :

delete car['brand']
delete car.brand
delete newCar['brand']

Définissez la propriété sur undefined

Si vous devez le faire de manière très optimisée, par exemple lorsque vous travaillez sur un grand nombre d'objets dans une boucle, un autre Le choix est de définir la propriété sur non défini.

En raison de sa nature, les performances de suppression sont beaucoup plus lentes que la simple réaffectation à undefined , jusqu'à 50 fois plus lente.

Gardez cependant à l’esprit que cette propriété n’est pas supprimée de l’objet. Sa valeur est effacée, mais si vous parcourez l'objet il existe toujours :

L'utilisation de delete est toujours très rapide, vous ne devriez vous pencher sur ce genre de performances que si vous avez une bonne raison de le faire question, sinon une sémantique et des fonctionnalités plus claires sont toujours préférées.

Supprimer des attributs sans modifier l'objet

Informations étendues :

L'opérateur de suppression est utilisé pour supprimer un attribut d'un objet.

Syntaxe :

Utiliser directement l'opérateur de suppression

delete object.property 或 delete object['property']

Par exemple :

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

delete person.name

console.log(person) // {age: 18}

Valeur de retour :

L'opérateur de suppression a un valeur de retour, la valeur de retour est une valeur booléenne, qui est vraie dans tous les cas, même si vous supprimez un attribut inexistant, elle retournera vrai. C'est toujours le même code que ci-dessus. Pourquoi ne pas imprimer la valeur de retour et voir.

console.log(delete person.name) //true
console.log(delete person.job) //即使删除对象不存在的属性依然返回true

Mais il y a des exceptions. (renvoie faux), si la propriété est une propriété non configurable (pour la notion de propriétés non configurables, vous pouvez vous référer à Object.defineProperty, j'étais un peu confus quand J'ai entendu parler de ce concept pour la première fois), en mode non strict, renvoie false, En mode strict, une exception d'erreur de syntaxe sera levée.

Utilisation spécifique

1. L'attribut de l'objet n'existe pas

Comme mentionné ci-dessus, si vous supprimez un attribut qui n'existe pas dans l'objet, la suppression n'est pas valide, mais la valeur de retour est toujours vraie

2. L'attribut du même nom existe sur la chaîne prototype

Si l'opérateur de suppression réussit à supprimer l'attribut, l'attribut n'existera jamais, mais si le attribut du même nom existe sur la chaîne prototype de l'objet, l'objet sera supprimé de La propriété du même nom est héritée sur la chaîne prototype. Mais cela n'a rien à voir avec la mémoire. La gestion de la mémoire n'est pas quelque chose que l'opérateur de suppression peut opérer, et cela n'a rien à voir du tout. La gestion de la mémoire recommande cet article 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) => // '李四' 依然可以访问到

On peut donc voir que l'opération de suppression ne fonctionnera que sur ses propres attributs. Ici, vous pouvez consoler 'Zhang San', ce qui est la raison de la chaîne de portée. l'instance elle-même n'en a pas. Lorsque cet attribut est trouvé, elle recherchera si son prototype possède l'attribut du même nom.

3. Utilisez les déclarations var

Les attributs (y compris les fonctions) déclarés à l'aide de var ne peuvent pas être supprimés de la portée globale ou de la portée de la fonction

Déclarés dans la portée globale Attributs :

// 声明属性
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失效, 函数依然存在

// 另外， 除字面量定义外，匿名函数定义函数效果也是一样

Déclaration des attributs dans le scope de la fonction (l'effet est le même que dans le scope global) :

// 局部作用域声明属性
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();

De plus, il est à noter que les fonctions définies dans l'objet peuvent être supprimées, de même comme attributs, tels que

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

4. Attributs déclarés avec let et const

Tout attribut déclaré avec let ou const ne peut pas être supprimé de la portée dans laquelle il est déclaré. D'accord, c'est bon. a le même effet que var. Je ne peux comprendre cela que pour le moment. Si vous le savez, donnez-moi quelques conseils

5 Attributs non définis

Math, Array, Object, etc. -in Les propriétés des objets ne peuvent pas être supprimées

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方法依然存在

Il est à noter que seules les propriétés de ces objets intégrés ne peuvent pas être supprimées, et les méthodes des objets intégrés peuvent être supprimées, telles que :

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

Paramètre Object.defineProperty() C'est un attribut indéfinissable et ne peut pas être supprimé

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

Les attributs indéfinissables créés par var, let et const ne peuvent pas être supprimés par l'opération de suppression

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
//     }

Si vous ne l'avez pas lu au début, jetons un coup d'œil à Object DefinProperty. Si vous comprenez, vous pouvez l'ignorer directement.

6. Supprimer un tableau

Lorsque vous utilisez l'opérateur delete pour supprimer un élément d'un tableau, l'élément supprimé sera supprimé du tableau, mais la longueur du tableau ne changera pas

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

Mais il y a un problème ici

console.log(1 in arr) // false

Donc, si vous souhaitez attribuer un élément du tableau à undefined, vous ne devez pas utiliser l'opérateur de suppression, mais utiliser directement l'affectation suivante

arr[1] = undefined;
// 这样就可以解决上面的问题 
console.log(1 in arr) // true

[Apprentissage recommandé : Tutoriel JavaScript avancé]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!