Supprimer dynamiquement une propriété d'objet JavaScript

Question

J'ai le code suivant pour obtenir une clé pour un objet donné. Ainsi, pour l'objet {"hello": {"data": {"a": "world", "b": "random"}}} si la clé transmise est hello.data.a , le résultat serait world .

(object, key) => {
    const keyParts = key.split(".");
    let returnValue = object;
    keyParts.forEach((part) => {
        if (returnValue) {
            returnValue = returnValue[part];
        }
    });
    return returnValue;
}

J'essaie de comprendre comment je peux supprimer une propriété dynamiquement de la même manière. Je voudrais savoir comment je peux supprimer une propriété dynamiquement de la même manière. {"hello": {"data": {"b": "random"}}} .

En fait, je veux que le même comportement comme delete object.hello.data.a . Mais le problème, c'est que le hello.data.a est une chaîne dynamique transmise. Bien sûr, quelque chose comme delete object[key] ne fonctionnerait pas car la clé a des niveaux imbriqués. Cela fonctionnerait s'il n'y a qu'un seul niveau, mais ne fonctionnerait pas pour les éléments imbriqués.

Une autre remarque importante est que la performance est extrêmement importante dans ce cas. Ainsi, même si la création d'un nouvel objet et la copie de toutes les propriétés à l'exception de celle que je veux supprimer pourrait mais j'ai de sérieuses inquiétudes quant à l'impact sur les performances de cette solution par rapport à l'utilisation d'un système d'information. delete mot-clé.

En raison d'autres facteurs externes, je ne souhaite pas non plus que la valeur de la propriété soit fixée à null o undefined . Je veux que la clé soit effectivement retirée de l'objet.

Comment y parvenir ?

Answer 1

Pour supprimer, .pop() de la dernière clé pour identifier le bien à supprimer. Si vous souhaitez éviter l'utilisation de la fonction delete vous voudrez également remplacer le dernier objet sur lequel cette touche est présente, plutôt que de la muter, donc .pop() de l'avant-dernière touche également.

Ensuite, utilisez votre méthode actuelle (ou .reduce ) pour accéder au dernier objet extérieur . Pour supprimer l'une de ses touches :

• Muter avec delete En utilisant la touche sauvegardée, utilisez delete[nextLastKey][lastKey]

• Pour créer un objet entièrement nouveau mais sans la clé enregistrée, utilisez la syntaxe restante pour l'exclure lastKey lors de la création d'un nouvel objet, puis assigner le nouvel objet à la fonction nextLastKey de l'objet parent :

  const fn = (object, key) => { const keys = key.split("."); const lastKey = keys.pop(); const nextLastKey = keys.pop(); const nextLastObj = keys.reduce((a, key) => a[key], object);

  // delete version:
  // delete nextLastObj[nextLastKey][lastKey]
  
  // non-delete version:
  const { [lastKey]: _, ...rest } = nextLastObj[nextLastKey];
  nextLastObj[nextLastKey] = rest;
  return object;

  }

  const obj = {"hello": {"data": {"a": "world", "b": "random"}}}; const result = fn(obj, 'hello.data.a'); console.log(result);

Answer 2

En fait, la réponse se trouve juste là, dans l'extrait de code que vous avez fourni. Il suffit de le modifier un peu, comme suit :

const delProp = (object, key) => {
    const keyParts = key.split(".");
    let returnValue = object;

    let parent, lastKey;  // added
    keyParts.forEach((part) => {
        if (returnValue) {
            parent = returnValue; // added
            lastKey = part;  // added
            returnValue = parent[lastKey];
        }
    });

    if(parent) {
      delete parent[lastKey];  // added
    }

    return returnValue;
}

const obj = {"hello": {"data": {"a": "world", "b": "random"}}};

console.log(delProp(obj, 'hello.data.a'));
console.log(obj)

Notez également qu'en JS for Les boucles sont essentiellement plus efficace que forEach Fonction de tableau. Je modifierais donc la partie correspondante comme suit :

for (const i = 0, i = keyParts.length; i++) {
    // ...
}

Answer 3

Vous pouvez toujours effacer en utilisant la syntaxe des crochets.

J'ai ajouté un autre exemple puisque les opposants semblent penser que c'est impossible. Tant que vous connaissez l'objet de base, cela ne devrait pas faire de différence. Je laisserai la division par "." comme simple exercice ici, car elle ne fait pas partie de la question centrale.

var thing = {"hello": {"data": {"a": "world", "b": "random"}}};
delete thing.hello.data["a"];
console.log(thing);

var thing2 = {"hello": {"data": {"a": "world", "b": "random"}}};
delete thing2["hello"]["data"]["a"];
console.log(thing2);