javascript-objects élément - Comment supprimer une propriété d'un objet JavaScript?




tableau delete (25)

const myObject = {
        "ircEvent": "PRIVMSG",
        "method": "newURI",
        "regex": "^http://.*"
    };

const { regex, ...other } = myObject;

console.log(myObject)
console.log(regex)
console.log(other)

Dites que je crée un objet comme suit:

var myObject = {
    "ircEvent": "PRIVMSG",
    "method": "newURI",
    "regex": "^http://.*"
};

Quel est le meilleur moyen de supprimer la propriété regex pour obtenir le nouveau myObject comme suit?

var myObject = {
    "ircEvent": "PRIVMSG",
    "method": "newURI"
};

Vous pouvez simplement supprimer n'importe quelle propriété d'un objet en utilisant le deletemot - clé.

Par exemple:

var obj = {key1:"val1",key2:"val2",key3:"val3"}

Par exemple, pour supprimer une propriété, key1utilisez le deletemot clé suivant:

delete obj.key1

Ou vous pouvez également utiliser une notation de type tableau:

delete obj[key1]

Réf: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… .


Envisagez de créer un nouvel objet sans la "regex"propriété, car l'objet d'origine pourrait toujours être référencé par d'autres parties de votre programme. Ainsi, vous devriez éviter de le manipuler.

const myObject = {
    "ircEvent": "PRIVMSG",
    "method": "newURI",
    "regex": "^http://.*"
};

const { regex, ...newMyObject } = myObject;

console.log(newMyObject);


Utilisation de ES6:

(Opérateur Destructuring + Spread)

    const myObject = {
      regex: "^http://.*",
      b: 2,
      c: 3
    };
    const { regex, ...noRegex } = myObject;
    console.log(noRegex); // => { b: 2, c: 3 }

Utiliser lodash

import omit from 'lodash/omit';

const prevObject = {test: false, test2: true};
// Removes test2 key from previous object
const nextObject = omit(prevObject, 'test2');

Utiliser Ramda

R.omit(['a', 'd'], {a: 1, b: 2, c: 3, d: 4}); //=> {b: 2, c: 3}

Essayez la méthode suivante. Attribuez la Objectvaleur de la propriété à undefined. Puis stringifyl'objet et parse.

 var myObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};

myObject.regex = undefined;
myObject = JSON.parse(JSON.stringify(myObject));

console.log(myObject);


Si vous souhaitez supprimer une propriété profondément imbriquée dans l'objet, vous pouvez utiliser la fonction récursive suivante avec chemin d'accès à la propriété comme second argument:

var deepObjectRemove = function(obj, path_to_key){
    if(path_to_key.length === 1){
        delete obj[path_to_key[0]];
        return true;
    }else{
        if(obj[path_to_key[0]])
            return deepObjectRemove(obj[path_to_key[0]], path_to_key.slice(1));
        else
            return false;
    }
};

Exemple:

var a = {
    level1:{
        level2:{
            level3: {
                level4: "yolo"
            }
        }
    }
};

deepObjectRemove(a, ["level1", "level2", "level3"]);
console.log(a);

//Prints {level1: {level2: {}}}

ECMAScript 2015 (ou ES6) est venu avec un objet Reflect intégré . Il est possible de supprimer une propriété d'objet en appelant la fonction Reflect.deleteProperty() avec l'objet cible et la clé de propriété comme paramètres:

Reflect.deleteProperty(myJSONObject, 'regex');

ce qui équivaut à:

delete myJSONObject['regex'];

Mais si la propriété de l'objet n'est pas configurable, elle ne peut être supprimée ni avec la fonction deleteProperty ni avec l'opérateur delete:

let obj = Object.freeze({ prop: "value" });
let success = Reflect.deleteProperty(obj, "prop");
console.log(success); // false
console.log(obj.prop); // value

Object.freeze() rend toutes les propriétés de l'objet non configurables (à part d'autres choses). deletePropertyfunction (ainsi que l' developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… ) est renvoyé falselorsque tente de supprimer l'une de ses propriétés. Si la propriété est configurable, elle retourne true, même si la propriété n'existe pas.

La différence entre deleteet deletePropertyest lorsque vous utilisez le mode strict:

"use strict";

let obj = Object.freeze({ prop: "value" });
Reflect.deleteProperty(obj, "prop"); // false
delete obj["prop"];
// TypeError: property "prop" is non-configurable and can't be deleted

2 (ES6)

À qui en a besoin ...

Pour compléter @Koen answer dans ce fil de discussion, si vous souhaitez supprimer une variable dynamique à l'aide de la syntaxe spread, procédez comme suit:

const key = 'a';

const { [key]: foo, ...rest } = { a: 1, b: 2, c: 3 };

console.log(rest); // { b: 2, c: 3 }

* foosera une nouvelle variable avec la valeur de a(qui est 1).


UPDATE :
Il existe peu de moyens courants de supprimer une propriété d'un objet.
Chacun a ses avantages et ses inconvénients ( cochez cette comparaison de performances ):

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Readable and short, mais ce n'est peut-être pas le meilleur choix si vous travaillez sur un grand nombre d'objets, car ses performances ne sont pas optimisées.

delete obj[key];


Reassignment
Plus de 2 fois plus rapide quedelete, toutefois, la propriété n'estpassupprimée et peut être itérée.

obj[key] = null;
obj[key] = false;
obj[key] = undefined;


Opérateur Spread
CetES6opérateur nous permet de renvoyer un nouvel objet, excluant toute propriété, sans modifier l'objet existant. L'inconvénient est qu'il présente les performances les plus mauvaises parmi ce qui précède et qu'il n'est pas recommandé de l'utiliser lorsque vous devez supprimer plusieurs propriétés à la fois.

{ [key]: val, ...rest } = obj;

Il y a beaucoup de bonnes réponses ici, mais je veux juste dire que lorsque vous utilisez delete pour supprimer une propriété en JavaScript, il est souvent sage de vérifier d'abord si cette propriété existe pour éviter les erreurs.

Par exemple

var obj = {"property":"value", "property2":"value"};

if (obj && obj.hasOwnProperty("property2")) {
  delete obj.property2;
} else {
  //error handling
}

En raison de la nature dynamique de JavaScript, il arrive souvent que vous ne sachiez tout simplement pas si la propriété existe ou non. En vérifiant si obj existe avant le &&, vous vous assurez également de ne pas générer d'erreur en appelant la fonction hasOwnProperty () sur un objet non défini.

Désolé si cela n’a pas été ajouté à votre cas d’utilisation spécifique, mais j’estime qu’il s’agit d’une bonne conception à adapter lors de la gestion des objets et de leurs propriétés.


Comme ça:

delete myObject.regex;
// or,
delete myObject['regex'];
// or,
var prop = "regex";
delete myObject[prop];

Démo

var myObject = {
    "ircEvent": "PRIVMSG",
    "method": "newURI",
    "regex": "^http://.*"
};
delete myObject.regex;

console.log(myObject);

kangax utilisateur de , a écrit un article de blog d'une profondeur incroyable sur la déclaration de delete de son blog, Comprendre la suppression . C'est fortement recommandé.



Bonjour vous pouvez essayer cette simple une sorte

var obj = [];

obj.key1 = {name: "John", room: 1234};
obj.key2 = {name: "Jim", room: 1234};

delete(obj.key1);

Très simple:

var myObject = {
    "ircEvent": "PRIVMSG",
    "method": "newURI",
    "regex": "^http://.*"
};

delete myObject.regex;

Mise à jour 2018-07-21: Pendant longtemps, cette réponse me gênait. Je pense donc qu'il est temps que je retouche un peu. Juste un petit commentaire, des éclaircissements et un formatage pour aider à accélérer la lecture des parties inutilement longues et compliquées de cette réponse.

LA VERSION COURTE

La réponse réelle à la question

Comme d’autres l’ont dit, vous pouvez utiliser delete .

obj // {"foo": "bar"}
delete obj["foo"]
obj // {}
obj["foo"] // undefined

Équivalent tableau

Ne delete pas d'un tableau. Utilisez Array.prototype.splice place.

arr // [1,2,3,4,5]
arr.splice(3,1); // 4
arr // [1,2,3,5]

LA VERSION LONGUE

JavaScript est un langage POO, donc tout est un objet, y compris les tableaux . Ainsi, j’estime nécessaire de signaler une mise en garde particulière.

Dans les tableaux, contrairement aux anciens objets ordinaires, l’utilisation de la delete déchets sous la forme de null , ce qui crée un "trou" dans le tableau.

var array = [1, 2, 3, 4];
delete array[2];
/* Expected result --> [1, 2, 4]
 * Actual result   --> [1, 2, null, 4]
 */

Comme vous pouvez le constater, la delete ne fonctionne pas toujours comme prévu. La valeur est écrasée, mais la mémoire n'est pas réaffectée. C'est-à-dire que array[4] n'est pas déplacé vers array[3] . Ce qui est différent de Array.prototype.unshift , qui insère un élément au début du tableau et décale tout vers le haut ( array[0] devient array[1] , etc.)

Honnêtement, mis à part le fait de rendre null plutôt qu'indéfini - ce qui est légitimement étrange - ce comportement ne devrait pas être surprenant, puisque delete est un opérateur unaire, comme typeof , qui se typeof dure dans la langue et n'est pas censé s'en soucier. sur le type d'objet sur lequel il est utilisé, alors que Array est une sous-classe d' Object avec des méthodes spécialement conçues pour travailler avec des tableaux. Il n'y a donc aucune raison valable de delete un cas particulier pour redistribuer le tableau, car cela ralentirait les choses avec un travail inutile. Rétrospectivement, mes attentes étaient irréalistes.

Bien sûr, cela m'a surpris. Parce que j'ai écrit ceci pour justifier ma croisade contre "null garbage":

Ignorant les dangers et les problèmes inhérents à null , ainsi que le gaspillage d’espace, cela peut poser problème si le tableau doit être précis.

Ce qui est une justification terrible pour se débarrasser de la valeur null s-- null n’est dangereux que s’il est utilisé à mauvais escient, et cela n’a rien à voir avec la "précision". La vraie raison pour laquelle vous ne devriez pas delete d'un tableau est parce que laisser des structures de données désordonnées et désordonnées est désordonné et sujet aux bogues.

Ce qui suit est un scénario artificiel qui prend du temps, vous pouvez donc passer directement à la section, La solution , si vous le souhaitez. La seule raison pour laquelle je laisse cette section est parce que je pense que certaines personnes pensent probablement que c'est drôle, et je ne veux pas être "ce type" qui publie une réponse "drôle" et en supprime ensuite tous les "drôle" .

... C'est stupide, je sais.

Le scénario PDP-11 artificiel et long

Par exemple, supposons que vous créez une application Web qui utilise la sérialisation JSON pour stocker un tableau utilisé pour les "onglets" dans une chaîne (dans ce cas, localStorage ). Supposons également que le code utilise les index numériques des membres du tableau pour les "titrer" lors du tracé à l'écran. Pourquoi faites-vous cela plutôt que de simplement stocker le "titre"? Parce que ... raisons .

D'accord, disons simplement que vous essayez d'économiser de la mémoire à la demande de cet utilisateur qui exploite un mini-ordinateur PDP-11 des années 1960 sous UNIX et a écrit sa propre imprimante compatible avec JavaScript, basée sur Elinks navigateur parce que X11 est hors de question .

Scénario de plus en plus stupide en dehors des cas, l’utilisation de delete sur ledit tableau aura pour conséquence une pollution null du tableau, et probablement la création de bugs dans l’application ultérieurement. Et si vous vérifiez la valeur null , il sautera directement les nombres et les onglets seront rendus comme [1] [2] [4] [5] ...

if (array[index] == null)
    continue;
else
    title = (index + 1).toString();
/* 0 -> "1"
 * 1 -> "2"
 * 2 -> (nothing)
 * 3 -> "4"
 */

Oui, ce n'est certainement pas ce que tu voulais.

Vous pouvez maintenant garder un deuxième itérateur, comme j , pour incrémenter uniquement lorsque des valeurs valides sont lues dans le tableau. Mais cela ne résoudrait pas exactement le problème de null , et vous devez quand même faire plaisir à cet utilisateur du PDP-11 de Troll . Hélas, son ordinateur ne dispose pas de suffisamment de mémoire pour contenir le dernier entier (ne lui demandez pas comment il gère un tableau de largeur variable ...) .

Alors, il vous envoie un email en colère:

Hey, your webapp broke my browser! I checked my localStorage database after your stupid code made my browser segfault, and this is what I found:

>"tabs:['Hello World', 'foo bar baz', null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, ... ]"

After clearing my precious data, it segfaulted again, and I did a backtrace, and what do I find? WHAT DO I FIND!? YOU USE TOO MANY VARIABLES!

>var i = index;
>var j = 1;

Grr, I am angry now.
-Troll Davidson

À propos de maintenant, vous êtes à la fin de votre esprit. Ce mec se plaint sans cesse de votre application et vous voulez lui dire de se taire et d'avoir un meilleur ordinateur.

La solution: Array.prototype.splice

Heureusement, les tableaux ont une méthode spécialisée pour supprimer des index et Array.prototype.splice() mémoire: Array.prototype.splice() . Vous pourriez écrire quelque chose comme ceci:

Array.prototype.remove = function(index){
  this.splice(index,1);
}
...
array = [1, 2, 3, 4];
array.remove(2);
// Result -> [1, 2, 4]

Et juste comme ça, vous avez plu à M. PDP-11. Hourra! (Je lui dis toujours quand même ...)

Array.prototype.splice vs Array.prototype.slice

Je pense qu'il est important de souligner la différence entre ces deux fonctions portant le même nom, car elles sont toutes deux très utiles.

Array.prototype.splice (début, n)

.splice() modifie le tableau et renvoie les index supprimés. Le tableau est découpé à partir de l'index, du start et n éléments sont découpés. Si n n'est pas spécifié, l'ensemble du tableau après le start est n = array.length - start tranches ( n = array.length - start ).

let a = [5,4,3,2,1];
let chunk = a.splice(2,2);

// a     [5,4,3,2,1]
// start  0 1 2 - -
// n      - - 1 2 -

chunk; // [3,2]
a;     // [5,4,1]

Array.prototype.slice (début, fin)

.slice() est non destructif et retourne un nouveau tableau contenant les index indiqués du start à la end . Si end n'est pas spécifiée à end , le comportement est identique à celui de .splice() ( end = array.length ). Le comportement est un peu délicat car, pour une raison quelconque, finissez les index de 1 au lieu de 0. Je ne sais pas pourquoi, mais c'est comme ça. De plus, si end <= start , le résultat est un tableau vide.

let a = [5,4,3,2,1];
let chunks = [
    a.slice(2,0),
    a.slice(2,2),
    a.slice(2,3),
    a.slice(2,5) ];

// a             [5,4,3,2,1]
// start          0 1 2 - -
// end, for...    - - - - -
//   chunks[0]  0 - - - - -   
//   chunks[1]    1 2 - - -
//   chunks[2]    1 2 3 - -
//   chunks[3]    1 2 3 4 5

chunks; // [ [], [], [3], [3,2,1] ]
a;      // [5,4,3,2,1]

Ce n'est en fait pas ce qui se passe, mais il est plus facile de penser de cette façon. Selon MDN, voici ce qui se passe réellement:

// a             [5,4,3,2,1]
// start          0 1 2 - - -
// end, for...    - - - - - -
//   chunks[0]    0 - - - - -
//   chunks[1]    0 1 2 - - -
//   chunks[2]    0 1(2)3 - -
//   chunks[3]    0 1(2 3 4)5

L'index spécifié par end est simplement exclu de la tranche. Les index entre parenthèses indiquent ce qui doit être découpé. Quoi qu'il en soit, le comportement n'est pas intuitif et il est voué à son lot d'erreurs différentes. Il peut donc être utile de créer une fonction wrapper pour imiter de plus près le comportement de .splice() :

function ez_slice(array, start = 0, n = null){
    if(!Array.isArray(array) || !is_number(start))
        return null;

    if(is_number(n))
        return array.slice(start, start + n);

    if(n === null)
        return array.slice(start);

    return null;
}

ez_slice([5,4,3,2,1], 2, 1) // [3]
ez_slice([5,4,3,2,1], 2)    // [3,2,1]

/* Fun fact: isNaN is unreliable.
 * [NaN, [], {}, 0, 1, Infinity, undefined, null, "Hi"].filter(isNaN)
 * [NaN, {}, undefined, "Hi"]
 *
 * What we want is...
 *
 * [NaN, [], {}, 0, 1, Infinity, undefined, null, "Hi"].filter(is_nan)
 * [NaN]
 */
function is_nan(num){
    return typeof num === "number"
        && num !== num;
}

function is_number(num){
    return !is_nan(num)
        && typeof num === "number"
        && isFinite(num);
}

Notez que la fonction wrapper est conçue pour être très stricte à propos des types, et retournera null si quelque chose est désactivé. Cela inclut la mise dans une chaîne comme "3" . Il appartient au programmeur de faire preuve de diligence à propos de ses types. Ceci est d'encourager de bonnes pratiques de programmation.

Mise à jour concernant is_array()

C'est à propos de cet extrait (maintenant supprimé):

function is_array(array){
    return array !== null
        && typeof array === "object"
        && typeof array.length !== "undefined"
        && array.__proto__ === Array.prototype;
}

En fait, il existe donc un moyen intégré de déterminer si un tableau est vraiment un tableau: il s'agit de Array.isArray() , introduit dans ECMAScript 5 (décembre 2009). J'ai trouvé ceci en cherchant à voir s'il y avait une question concernant la distinction entre les tableaux et les objets, pour voir s'il existait une solution meilleure que la mienne, ou pour ajouter la mienne s'il n'y en avait pas. Ainsi, si vous utilisez une version de JavaScript antérieure à ECMA 5, vous disposez de votre polyfill. Cependant, je recommande fortement de ne pas utiliser ma fonction is_array() , car continuer à prendre en charge les anciennes versions de JavaScript signifie continuer à prendre en charge les anciens navigateurs qui les implémentent, ce qui signifie encourager l'utilisation de logiciels non sécurisés et exposer les utilisateurs à des programmes malveillants. Alors s'il vous plaît, utilisez Array.isArray() . Utilisez let et const . Utilisez les nouvelles fonctionnalités ajoutées à la langue. N'utilisez pas les préfixes du vendeur. Supprimer cette merde polyfill IE à partir de votre site web. Supprimez cette <!CDATA[[... merde <!CDATA[[... XHTML - aussi - nous sommes passés à HTML5 en 2014. Plus tôt tout le monde supprime la prise en charge de ces anciens navigateurs / ésotériques, plus tôt les éditeurs de navigateurs suivront la norme Web et adopteront les nouvelle technologie, et plus vite nous pourrons passer à un site Web plus sécurisé.


Ce message est très ancien et je le trouve très utile. J'ai donc décidé de partager la fonction non définie que j'ai écrite au cas où quelqu'un d'autre verrait ce message et se demanderait pourquoi ce n'est pas aussi simple que dans PHP non défini.

La raison d’écrire cette nouvelle unsetfonction est de conserver l’index de toutes les autres variables dans ce hash_map. Regardez l'exemple suivant et voyez comment l'index de "test2" n'a pas changé après la suppression d'une valeur de hash_map.

function unset(unsetKey, unsetArr, resort){
  var tempArr = unsetArr;
  var unsetArr = {};
  delete tempArr[unsetKey];
  if(resort){
    j = -1;
  }
  for(i in tempArr){
    if(typeof(tempArr[i]) !== 'undefined'){
      if(resort){
        j++;
      }else{
        j = i;
      }
      unsetArr[j] = tempArr[i];
    }
  }
  return unsetArr;
}

var unsetArr = ['test','deletedString','test2'];

console.log(unset('1',unsetArr,true)); // output Object {0: "test", 1: "test2"}
console.log(unset('1',unsetArr,false)); // output Object {0: "test", 2: "test2"}

Essaye ça

delete myObject['key'];

Le terme que vous avez utilisé dans le titre de votre question Remove a property from a JavaScript object peut être interprété de différentes manières. L’une consiste à l’enlever pour l’ensemble de la mémoire et la liste des clés d’objet ou l’autre à l’effacer. Comme il a été mentionné dans d'autres réponses, le mot clé delete est la partie principale. Disons que vous avez votre objet comme:

myJSONObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};

Si tu fais:

console.log(Object.keys(myJSONObject));

le résultat serait:

["ircEvent", "method", "regex"]

Vous pouvez supprimer cette clé spécifique de vos clés d’objet comme suit:

delete myJSONObject["regex"];

Ensuite, la clé de vos objets utilisant Object.keys(myJSONObject) serait:

["ircEvent", "method"]

Mais le fait est que si vous vous souciez de la mémoire et que vous voulez que tout l'objet soit supprimé de la mémoire, il est recommandé de le définir sur null avant de supprimer la clé:

myJSONObject["regex"] = null;
delete myJSONObject["regex"];

L'autre point important ici est de faire attention à vos autres références au même objet. Par exemple, si vous créez une variable comme:

var regex = myJSONObject["regex"];

Ou ajoutez-le comme un nouveau pointeur sur un autre objet tel que:

var myOtherObject = {};
myOtherObject["regex"] = myJSONObject["regex"];

Ensuite, même si vous le supprimez de votre objet myJSONObject , cet objet spécifique ne sera pas supprimé de la mémoire, car la variable regex et myOtherObject["regex"] ont toujours leurs valeurs. Alors, comment pourrions-nous supprimer l’objet de la mémoire à coup sûr?

La solution serait de supprimer toutes les références que vous avez dans votre code, de pointer sur cet objet même et de ne pas utiliser les instructions var pour créer de nouvelles références à cet objet . Ce dernier point concernant les instructions var est l’un des problèmes les plus cruciaux auquel nous sommes généralement confrontés, car l’utilisation des instructions var empêcherait la création de l’objet créé.

Cela signifie que dans ce cas, vous ne pourrez pas supprimer cet objet car vous avez créé la variable regex via une instruction var , et si vous le faites:

delete regex; //False

Le résultat serait false , ce qui signifie que votre instruction delete n'a pas été exécutée comme prévu. Mais si vous n'aviez pas créé cette variable auparavant et que vous myOtherObject["regex"] que ma dernière référence existante, myOtherObject["regex"] , vous auriez pu le faire simplement en l'enlevant comme myOtherObject["regex"] :

myOtherObject["regex"] = null;
delete myOtherObject["regex"];

En d'autres termes, un objet JavaScript est tué dès qu'il ne reste aucune référence dans votre code pointé sur cet objet.

Mise à jour: Merci à @AgentME:

Définir une propriété sur null avant de la supprimer n'apporte rien (sauf si l'objet a été scellé par Object.seal et que la suppression échoue. Ce n'est généralement pas le cas, à moins que vous n'essayiez spécifiquement).

Pour obtenir plus d'informations sur Object.seal: Object.seal()


La delete opérateur est trop lente!

Regardez le benchmark .

Supprimer est le seul véritable moyen de supprimer les propriétés de l'objet sans laisser de reste, mais il fonctionne environ 100 fois plus lentement que son "alternative", en définissant object[key] = undefined .

Cette alternative n'est pas la bonne réponse à cette question! Mais si vous l'utilisez avec précaution, vous pouvez considérablement accélérer certains algorithmes. Si vous utilisez la delete dans les boucles et que vous rencontrez des problèmes de performances, lisez l'explication détaillée.

Quand faut-il utiliser delete et quand la valeur est undefined sur undefined ?

Un objet peut être vu comme un ensemble de paires clé-valeur. Ce que j'appelle une "valeur" est une primitive ou une référence à un autre objet, connecté à cette "clé".

Utilisez delete lorsque vous transmettez l'objet de résultat au code sur lequel vous n'avez pas le contrôle (ou lorsque vous n'êtes pas sûr de votre équipe ou de vous-même).

Il supprime la clé de la table de hachage .

 var obj = {
     field: 1     
 };
 delete obj.field;

Utilisez le paramètre sur undefined lorsque vous vous souciez des performances. Cela peut donner un sérieux coup de pouce à votre code.

La clé reste à sa place dans la table de hachage , seule la valeur est remplacée par undefined . Comprenez que for..in boucle for..in toujours sur cette clé.

 var obj = {
     field: 1     
 };
 obj.field = undefined;

En utilisant cette méthode, tous les moyens de déterminer l'existence d'une propriété ne fonctionneront pas comme prévu.

Cependant, ce code:

object.field === undefined

se comportera de manière équivalente pour les deux méthodes.

Des tests

Pour résumer, les différences concernent toutes les manières de déterminer l’existence de la propriété, et à propos de la boucle.

 console.log('* -> "Takes prototype inheritance into consideration, that means it lookups all over prototype chain too."');

 console.log(obj.field === undefined, 'obj.field === undefined', 'You get "undefined" value when querying for "field" in object-hashmap. *');

 console.log(obj["field"] === undefined, 'obj["field"] === undefined', 'Just another way to query (equivalent). *');

 console.log(typeof obj.field === "undefined", 'typeof obj.field === "undefined"', 'Get the value attached to "field" key, and check it\'s type is "undefined". *');

 console.log("field" in obj, '"field" in obj', 'This statement returns true if "field" key exists in the hashmap. False otherwise. *');

 console.log(obj.hasOwnProperty("field"), 'obj.hasOwnProperty("field")', 'This statement returns true if \'field\' key exists in the hashmap. The ONLY way NOT to lookup for property in the prototype chain!');
 //Object.keys().indexOf() is an overkill that runs much slower :)

 var counter = 0,
     key;
 for (key in obj) {
     counter++;
 }
 console.assert(counter === 0, 'counter === 0', '"field" is not iterated using "for .. in" loop. *');

Méfiez-vous des fuites de mémoire!

Bien obj[prop] = undefined soit plus rapide que d' delete obj[prop] , il est également important de obj[prop] = undefined que obj[prop] = undefined n'est peut-être pas toujours approprié. delete obj[prop] supprime prop de obj et l'efface de mémoire alors que obj[prop] = undefined définit simplement la valeur de prop sur undefined ce qui laisse cette prop immobile en mémoire. Par conséquent, dans les cas où de nombreuses clés sont créées et supprimées, utiliser obj[prop] = undefined peut forcer une réconciliation coûteuse en mémoire (provoquant le gel de la page) et éventuellement une erreur de mémoire insuffisante. Examinez le code suivant.

"use strict";
var theNodeList=[], i, current, numberOfNodes=65536, body=document.body, nodeRecords=[];
for (i = 0; i !== numberOfNodes; i++) {
    nodeRecords[i] = [];
    current = theNodeList[i] = document.createElement("div");
    current.textContent = i;
    document.body.appendChild( current );
}
var lastTime = -1;
requestAnimationFrame(function recordUpdates(){
    var currentTime = Math.round( performance.now()*1000 )
    for (i = 0; i !== numberOfNodes; i++) {
        if (lastTime !== -1) {
            // the previously collected data is no longer in use
            /*************************************************/
            /****/ nodeRecords[i][lastTime] = undefined; /****/
            /*************************************************/
        }
        nodeRecords[i][currentTime] = theNodeList[i].outerHTML;
    }
    lastTime = currentTime;
    requestAnimationFrame( recordUpdates );
});

Dans le code ci-dessus, faites simplement nodeRecords[i][lastTime] = undefined; provoquera une fuite de mémoire massive parce que chaque image d'animation. Chaque trame, tous les 65536 éléments DOM occupera 65536 emplacements supplémentaires, mais les 65536 précédents ne seront réglés que sur undefined, ce qui les laissera en suspens dans la mémoire. Allez-y, essayez d'exécuter le code ci-dessus dans la console et voyez par vous-même. Après avoir forcé une erreur de mémoire insuffisante, essayez de l'exécuter à nouveau, sauf avec la version suivante du code qui utilise l'opérateur de delete place.

"use strict";
var theNodeList=[], i, current, numberOfNodes=65536, body=document.body, nodeRecords=[];
for (i = 0; i !== numberOfNodes; i++) {
    nodeRecords[i] = [];
    current = theNodeList[i] = document.createElement("div");
    current.textContent = i;
    document.body.appendChild( current );
}
var lastTime = -1;
requestAnimationFrame(function recordUpdates(){
    var currentTime = Math.round( performance.now()*1000 )
    for (i = 0; i !== numberOfNodes; i++) {
        if (lastTime !== -1) {
            // the previously collected data is no longer in use
            /********************************************/
            /****/ delete nodeRecords[i][lastTime]; /****/
            /********************************************/
        }
        nodeRecords[i][currentTime] = theNodeList[i].outerHTML;
    }
    lastTime = currentTime;
    requestAnimationFrame( recordUpdates );
});

Comme indiqué dans l'extrait de code ci-dessus, il existe quelques rares cas d'utilisation appropriés pour l'opérateur de delete . Cependant, ne vous inquiétez pas trop de ce problème. Cela ne deviendra un problème qu'avec les objets de longue durée de vie auxquels de nouvelles clés sont constamment ajoutées. Dans tous les autres cas (ce qui est presque toujours le cas dans la programmation en situation réelle), il est préférable d'utiliser obj[prop] = undefined . Le but principal de cette section est simplement de vous en parler afin que, dans les rares cas où cela devienne un problème dans votre code, vous pourrez alors plus facilement comprendre le problème et éviter de perdre du temps à disséquer votre code pour le localiser. et comprendre ce problème.

Ne pas toujours définir sur undefined

Le polymorphisme est un aspect important à prendre en compte. Le polymorphisme est lors de l’affectation de la même variable / type d’emplacement dans un objet, comme indiqué ci-dessous.

var foo = "str";
foo = 100;          // variable foo is now labeled polymorphic by the browser
var bar = ["Some", "example"];
bar[2] = "text";    // bar is a monomorphic array here because all its entries have the
                    // same type: string primitive
bar[1] = undefined; // bar is now a polymorphic array

Cependant, il existe deux problèmes majeurs non résolus avec les tableaux polymorphes:

  1. Ils sont lents et la mémoire inefficace. Lors de l'accès à un index spécifique, au lieu de simplement obtenir le type global du tableau, le navigateur doit obtenir le type pour chaque index, chaque index stockant les métadonnées supplémentaires de son type.
  2. Une fois polymorphe, toujours polymorphe. Lorsqu'un tableau est rendu polymorphe, le polymorphisme ne peut pas être annulé dans les navigateurs Webkit. Ainsi, même si vous restaurez un tableau polymorphe non polymorphe, il restera stocké par le navigateur en tant que tableau polymorphe.

On peut comparer le polymorphisme à une toxicomanie. À première vue, cela semble incroyablement lucratif: un joli code très moelleux. Ensuite, le codeur introduit son tableau au médicament du polymorphisme. Instantanément, la matrice polymorphe devient moins efficace et ne peut jamais devenir aussi efficace qu’avant car elle est droguée. Pour corréler de telles circonstances avec la vie réelle, une personne consommant de la cocaïne pourrait même ne pas être capable de gérer une simple poignée de porte et encore moins de pouvoir calculer les chiffres de PI. De même, un tableau sur le polymorphisme ne peut jamais être aussi efficace qu'un tableau monomorphe.

Mais, comment une analogie de sortie de drogue est-elle liée à l'opération de delete ? La réponse hérite de la dernière ligne de code de l'extrait ci-dessus. Laissez-le donc réexaminer, cette fois avec une torsion.

var bar = ["Some", "example"];
bar[2] = "text";    // bar is not a polymorphic array here because all its entries have the
                    // same type: string primitive
bar[1] = "";        // bar is still a monomorphic array
bar[1] = undefined; // bar is now a polymorphic array

Observer. bar[1] = "" ne contraint pas le polymorphisme alors que bar[1] = undefined fait. Par conséquent, il convient de toujours, autant que possible, utiliser le type correspondant à leurs objets afin de ne pas provoquer accidentellement de polymorphisme. Une de ces personnes peut utiliser la liste suivante comme référence générale pour les lancer. Cependant, veuillez ne pas utiliser explicitement les idées ci-dessous. Au lieu de cela, utilisez ce qui fonctionne bien pour votre code.

  • Lorsque vous utilisez un tableau / une variable typée dans la primitive booléenne, utilisez false ou undefined comme valeur vide. Bien qu'il soit bon d'éviter un polymorphisme inutile, réécrire tout votre code pour l'interdire explicitement entraînera probablement une baisse des performances. Utilisez le jugement commun!
  • Lorsque vous utilisez un tableau / une variable typée dans la primitive numérique, utilisez 0 comme valeur vide. Notez qu’en interne, il existe deux types de nombres: les entiers rapides (2147483647 à -2147483648 inclus) et les doubles à virgule flottante lente (autre que ceux comprenant NaN et Infinity ). Lorsqu'un entier est rétrogradé en un double, il ne peut pas être promu de nouveau en un entier.
  • Lorsque vous utilisez un tableau / une variable typée dans la primitive de chaîne, utilisez "" comme valeur vide.
  • Lorsque vous utilisez un symbole, attendez, pourquoi utilisez-vous un symbole?!?! Les symboles sont mauvais pour la performance. Tout ce qui est programmé pour utiliser les symboles peut être reprogrammé pour ne pas utiliser de symboles, permettant ainsi un code plus rapide sans symboles. Les symboles ne sont que des méta-sucres super inefficaces.
  • Si vous utilisez autre chose, utilisez null .

Cependant, soyez prudent! Ne commencez pas soudainement à faire cela avec tout votre code préexistant, car cela casserait probablement ce code préexistant et / ou introduirait des bogues étranges. Une telle pratique efficace doit plutôt être mise en œuvre dès le départ et lors de la conversion de code préexistant, il est recommandé de vérifier toutes les lignes relatives à cela, car il est possible d'essayer de mettre à niveau l'ancien code vers cette nouvelle pratique. aussi risqué que gratifiant.


L'affirmation de Dan selon laquelle "supprimer" est très lente et le point de repère qu'il a publié ont été mis en doute. J'ai donc moi-même effectué le test sous Chrome 59. Il semble que la suppression soit environ 30 fois plus lente:

var iterationsTotal = 10000000;  // 10 million
var o;
var t1 = Date.now(),t2;
for (let i=0; i<iterationsTotal; i++) {
   o = {a:1,b:2,c:3,d:4,e:5};
   delete o.a; delete o.b; delete o.c; delete o.d; delete o.e;
}
console.log ((t2=Date.now())-t1);  // 6135
for (let i=0; i<iterationsTotal; i++) {
   o = {a:1,b:2,c:3,d:4,e:5};
   o.a = o.b = o.c = o.d = o.e = undefined;
}
console.log (Date.now()-t2);  // 205

Notez que j'ai volontairement effectué plus d'une opération de «suppression» dans un cycle de boucle afin de minimiser l'effet provoqué par les autres opérations.



Supposons que vous ayez un objet qui ressemble à ceci:

var Hogwarts = {
    staff : [
        'Argus Filch',
        'Filius Flitwick',
        'Gilderoy Lockhart',
        'Minerva McGonagall',
        'Poppy Pomfrey',
        ...
    ],
    students : [
        'Hannah Abbott',
        'Katie Bell',
        'Susan Bones',
        'Terry Boot',
        'Lavender Brown',
        ...
    ]
};

Suppression d'une propriété d'objet

Si vous voulez utiliser tout le stafftableau, la bonne façon de le faire serait de faire ceci:

delete Hogwarts.staff;

Alternativement, vous pouvez aussi faire ceci:

delete Hogwarts['staff'];

De même, supprimer le tableau entier des étudiants se ferait en appelant delete Hogwarts.students;ou endelete Hogwarts['students']; .

Suppression d'un index de tableau

Désormais, si vous souhaitez supprimer un seul membre du personnel ou un étudiant, la procédure est un peu différente, car les deux propriétés sont des tableaux eux-mêmes.

Si vous connaissez l'index de votre membre du personnel, vous pouvez simplement faire ceci:

Hogwarts.staff.splice(3, 1);

Si vous ne connaissez pas l'index, vous devrez également effectuer une recherche dans l'index:

Hogwarts.staff.splice(Hogwarts.staff.indexOf('Minerva McGonnagall') - 1, 1);

Remarque

Bien que vous puissiez techniquement utiliser deleteun tableau, son utilisation entraînerait des résultats incorrects lors de l'appel Hogwarts.staff.lengthultérieur, par exemple . En d'autres termes, deletesupprimerait l'élément, mais ne mettrait pas à jour la valeur de la lengthpropriété. Utiliser deletegâcherait également votre indexation.

Ainsi, lors de la suppression de valeurs d'un objet, commencez toujours par déterminer s'il s'agit de propriétés d'objet ou de valeurs de tableau, puis choisissez la stratégie appropriée en fonction de celle-ci.

Si vous voulez expérimenter cela, vous pouvez utiliser ce violon comme point de départ.


Enlèvement de propriété en JavaScript

Cette page contient de nombreuses options différentes, non pas parce que la plupart d'entre elles sont incorrectes - ou parce que les réponses sont des doublons - mais parce que la technique appropriée dépend de la situation dans laquelle vous vous trouvez et des objectifs des tâches que vous et / ou vous avez. équipe essaie de remplir. Pour répondre à votre question sans équivoque, il faut savoir:

  1. La version d'ECMAScript que vous ciblez
  2. La gamme de types d'objet sur lesquels vous souhaitez supprimer des propriétés et le type de noms de propriété que vous devez pouvoir omettre (chaînes uniquement? Symboles? Références faibles mappées à partir d'objets arbitraires?) Ces types de pointeurs de propriétés sont en JavaScript depuis des années )
  3. Ethos / modèles de programmation que vous et votre équipe utilisez. Préférez-vous les approches fonctionnelles et la mutation est-elle verbotée sur votre équipe, ou utilisez-vous des techniques orientées objet mutatives de type far west?
  4. Souhaitez-vous y parvenir en JavaScript pur ou souhaitez-vous utiliser une bibliothèque tierce?

Une fois que ces quatre requêtes ont été traitées, il existe essentiellement quatre catégories de "suppression de propriétés" en JavaScript parmi lesquelles choisir afin de répondre à vos objectifs. Elles sont:

Suppression de propriété d'objet mutatif, non sécurisée

Cette catégorie permet d'opérer sur des littéraux d'objet ou des instances d'objet lorsque vous souhaitez conserver / continuer à utiliser la référence d'origine et que vous n'utilisez pas les principes fonctionnels sans état dans votre code. Un exemple de syntaxe dans cette catégorie:

'use strict'
const iLikeMutatingStuffDontI = { myNameIs: 'KIDDDDD!', [Symbol.for('amICool')]: true }
delete iLikeMutatingStuffDontI[Symbol.for('amICool')] // true
Object.defineProperty({ myNameIs: 'KIDDDDD!', 'amICool', { value: true, configurable: false })
delete iLikeMutatingStuffDontI['amICool'] // throws

Cette catégorie est la catégorie la plus ancienne, la plus directe et la plus largement prise en charge de la suppression de propriété. Il supporte les Symbolindex de tableau en plus des chaînes et fonctionne dans toutes les versions de JavaScript, à l'exception de la toute première version. Cependant, c'est la mutation qui viole certains principes de programmation et a des implications sur les performances. Cela peut également entraîner des exceptions non capturées lorsqu'il est utilisé sur developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… .

Omission de propriété de chaîne basée sur le repos

Cette catégorie est destinée aux opérations sur des instances d'objet ou de tableau simples dans les nouvelles versions ECMAScript lorsqu'une approche non mutante est souhaitée et que vous n'avez pas besoin de prendre en compte les clés Symbol:

const foo = { name: 'KIDDDDD!', [Symbol.for('isCool')]: true }
const { name, ...coolio } = foo // coolio doesn't have "name"
const { isCool, ...coolio2 } = foo // coolio2 has everything from `foo` because `isCool` doesn't account for Symbols :(

Suppression de propriété d'objet mutatif, sûr

Cette catégorie permet d'opérer sur des littéraux d'objet ou des instances d'objet lorsque vous souhaitez conserver / continuer à utiliser la référence d'origine tout en évitant que des exceptions ne soient générées sur des propriétés non configurables:

'use strict'
const iLikeMutatingStuffDontI = { myNameIs: 'KIDDDDD!', [Symbol.for('amICool')]: true }
Reflect.deleteProperty(iLikeMutatingStuffDontI, Symbol.for('amICool')) // true
Object.defineProperty({ myNameIs: 'KIDDDDD!', 'amICool', { value: true, configurable: false })
Reflect.deleteProperty(iLikeMutatingStuffDontI, 'amICool') // false

En outre, bien que la mutation d'objets sur place ne soit pas sans état, vous pouvez utiliser la nature fonctionnelle de Reflect.deletePropertyl'application partielle et d'autres techniques fonctionnelles impossibles avec les deleteinstructions.

Omission de propriété de chaîne basée sur la syntaxe

Cette catégorie est destinée aux opérations sur des instances d'objet ou de tableau simples dans les nouvelles versions ECMAScript lorsqu'une approche non mutante est souhaitée et que vous n'avez pas besoin de prendre en compte les clés Symbol:

const foo = { name: 'KIDDDDD!', [Symbol.for('isCool')]: true }
const { name, ...coolio } = foo // coolio doesn't have "name"
const { isCool, ...coolio2 } = foo // coolio2 has everything from `foo` because `isCool` doesn't account for Symbols :(

Omission de propriété basée sur une bibliothèque

Cette catégorie permet généralement une plus grande flexibilité fonctionnelle, notamment la comptabilisation des symboles et l’omission de plusieurs propriétés dans un seul énoncé:

const o = require("lodash.omit")
const foo = { [Symbol.for('a')]: 'abc', b: 'b', c: 'c' }
const bar = o(foo, 'a') // "'a' undefined"
const baz = o(foo, [ Symbol.for('a'), 'b' ]) // Symbol supported, more than one prop at a time, "Symbol.for('a') undefined"

En utilisant ramda#dissoc vous obtiendrez un nouvel objet sans l'attribut suivant regex:

const newObject = R.dissoc('regex', myObject);
// newObject !== myObject

Vous pouvez également utiliser d'autres fonctions pour obtenir le même effet - omettre, choisir, ...


http://rhaboo.org est une couche de sucre LocalStorage qui vous permet d'écrire des choses comme celle-ci:

var store = Rhaboo.persistent('Some name');
store.write('count', store.count ? store.count+1 : 1);
store.write('somethingfancy', {
  one: ['man', 'went'],
  2: 'mow',
  went: [  2, { mow: ['a', 'meadow' ] }, {}  ]
});
store.somethingfancy.went[1].mow.write(1, 'lawn');

Il n'utilise pas JSON.stringify / parse car cela serait inexact et lent sur les gros objets. Au lieu de cela, chaque valeur de terminal a sa propre entrée localStorage.

Vous pouvez probablement deviner que je pourrais avoir quelque chose à voir avec rhaboo ;-)

Adrian.







javascript javascript-objects object-properties