web-dev-qa-db-fra.com

Comment supprimer des objets d'un tableau associatif javascript?

Supposons que j'ai ce code:

var myArray = new Object();
myArray["firstname"] = "Bob";
myArray["lastname"] = "Smith";
myArray["age"] = 25;

Maintenant, si je voulais supprimer "nom de famille"? .... y at-il un équivalent de
myArray["lastname"].remove()?

(Il faut que l'élément disparaisse parce que le nombre d'éléments est important et que je veux garder les choses propres.)

javascriptarraysassociative-arrayassociative
568
Andrew

Utilisez le mot clé "delete" en Javascript.

delete myArray["lastname"];

MODIFIER:

Dans certains moteurs JavaScript, le mot clé delete peut nuire aux performances car il annule l'optimisation de la compilation/JIT.

http://www.html5rocks.com/en/tutorials/speed/v8/http://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient -javascript /

1062
Dennis C

Tous les objets en JavaScript sont implémentés sous forme de tables de hachage/tableaux associatifs. Donc, voici l'équivalent:

alert(myObj["SomeProperty"]);
alert(myObj.SomeProperty);

Et, comme déjà indiqué, vous "supprimez" une propriété d'un objet via le mot clé delete, que vous pouvez utiliser de deux manières:

delete myObj["SomeProperty"];
delete myObj.SomeProperty;

J'espère que l'info supplémentaire aide ...

74
Jason Bunting

Aucune des réponses précédentes n'aborde le fait que Javascript ne possède pas de tableaux associatifs pour commencer - il n'y a pas de type array en tant que tel, voir typeof .

Ce que Javascript a, sont des instances d'objet avec des propriétés dynamiques. Lorsque des propriétés sont confondues avec des éléments d'une instance d'objet Array, Bad Things ™ est inévitable:

Problème

var elements = new Array()

elements.Push(document.getElementsByTagName("head")[0])
elements.Push(document.getElementsByTagName("title")[0])
elements["prop"] = document.getElementsByTagName("body")[0]

console.log("number of elements: ", elements.length)   // returns 2
delete elements[1]
console.log("number of elements: ", elements.length)   // returns 2 (?!)

for (var i = 0; i < elements.length; i++)
{
   // uh-oh... throws a TypeError when i == 1
   elements[i].onmouseover = function () { window.alert("Over It.")}
   console.log("success at index: ", i)
}

Solution

Pour que la fonction de suppression universelle ne vous explose pas, utilisez:

Object.prototype.removeItem = function (key) {
   if (!this.hasOwnProperty(key))
      return
   if (isNaN(parseInt(key)) || !(this instanceof Array))
      delete this[key]
   else
      this.splice(key, 1)
};

//
// Code sample.
//
var elements = new Array()

elements.Push(document.getElementsByTagName("head")[0])
elements.Push(document.getElementsByTagName("title")[0])
elements["prop"] = document.getElementsByTagName("body")[0]

console.log(elements.length)                        // returns 2
elements.removeItem("prop")
elements.removeItem(0)
console.log(elements.hasOwnProperty("prop"))        // returns false as it should
console.log(elements.length)                        // returns 1 as it should
41
Saul

Cela supprime seulement supprime l'objet mais conserve toujours la même longueur de tableau.

Pour supprimer vous devez faire quelque chose comme:

array.splice(index, 1);
28
Bipin

Bien que la réponse acceptée soit correcte, il manque l'explication de son fonctionnement.

Tout d'abord, votre code doit refléter le fait que c'est NOT un tableau:

var myObject = new Object();
myObject["firstname"] = "Bob";
myObject["lastname"] = "Smith";
myObject["age"] = 25;

Notez que tous les objets (y compris Arrays) peuvent être utilisés de cette façon. Cependant, ne vous attendez pas à ce que les fonctions de tableau JS standard (pop, push, ...) fonctionnent sur des objets!

Comme indiqué dans la réponse acceptée, vous pouvez ensuite utiliser delete pour supprimer les entrées d'objets:

delete myObject["lastname"]

Vous devez choisir l’itinéraire que vous souhaitez emprunter - utilisez des objets (tableaux associatifs/dictionnaires) ou utilisez des tableaux (cartes). Ne mélangez jamais les deux.

14
johndodo

Utilisez la méthode splice pour supprimer complètement l'élément d'un tableau d'objets:

Object.prototype.removeItem = function (key, value) {
    if (value == undefined)
        return;

    for (var i in this) {
        if (this[i][key] == value) {
            this.splice(i, 1);
        }
    }
};

var collection = [
    { id: "5f299a5d-7793-47be-a827-bca227dbef95", title: "one" },
    { id: "87353080-8f49-46b9-9281-162a41ddb8df", title: "two" },
    { id: "a1af832c-9028-4690-9793-d623ecc75a95", title: "three" }
];

collection.removeItem("id", "87353080-8f49-46b9-9281-162a41ddb8df");
7
HarpyWar

Vous utilisez Object, vous ne rencontrez pas de tableau associatif pour commencer. Avec un tableau associatif, ajouter et supprimer des éléments se déroule comme suit:

    Array.prototype.contains = function(obj) 
    {
        var i = this.length;
        while (i--) 
        {
            if (this[i] === obj) 
            {
                return true;
            }
        }
        return false;
    }


    Array.prototype.add = function(key, value) 
    {
        if(this.contains(key))
            this[key] = value;
        else
        {
            this.Push(key);
            this[key] = value;
        }
    }


    Array.prototype.remove = function(key) 
    {
        for(var i = 0; i < this.length; ++i)
        {
            if(this[i] == key)
            {
                this.splice(i, 1);
                return;
            }
        }
    }



    // Read a page's GET URL variables and return them as an associative array.
    function getUrlVars()
    {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.Push(hash[0]);
            vars[hash[0]] = hash[1];
        }

        return vars;
    }



    function ForwardAndHideVariables() {
        var dictParameters = getUrlVars();

        dictParameters.add("mno", "pqr");
        dictParameters.add("mno", "stfu");

        dictParameters.remove("mno");



        for(var i = 0; i < dictParameters.length; i++)
        {
            var key = dictParameters[i];
            var value = dictParameters[key];
            alert(key + "=" + value);
        }
        // And now forward with HTTP-POST
        aa_post_to_url("Default.aspx", dictParameters);
    }


    function aa_post_to_url(path, params, method) {
        method = method || "post";

        var form = document.createElement("form");

        //move the submit function to another variable
        //so that it doesn't get written over if a parameter name is 'submit'
        form._submit_function_ = form.submit;

        form.setAttribute("method", method);
        form.setAttribute("action", path);

        for(var i = 0; i < params.length; i++)
        {
            var key = params[i];

            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }

        document.body.appendChild(form);
        form._submit_function_(); //call the renamed function
    }
5
Stefan Steiger

Comme d'autres réponses l'ont noté, ce que vous utilisez n'est pas un tableau Javascript, mais un objet Javascript, qui fonctionne presque comme un tableau associatif dans d'autres langues, sauf que toutes les clés sont converties en chaînes. Le nouveau Carte stocke les clés sous leur type d'origine.

Si vous avez un tableau et non un objet, vous pouvez utiliser la fonction . Filter du tableau pour renvoyer un nouveau tableau sans l'élément que vous souhaitez supprimer:

var myArray = ['Bob', 'Smith', 25];
myArray = myArray.filter(function(item) {
    return item !== 'Smith';
});

Si vous avez un navigateur plus ancien et jQuery, jQuery a une méthode $.grep qui fonctionne de la même manière:

myArray = $.grep(myArray, function(item) {
    return item !== 'Smith';
});
5
Dzeimsas Zvirblis

Il existe un moyen élégant dans Airbnb Style Guide de le faire (ES7):

const myObject = {
  a: 1,
  b: 2,
  c: 3
};
const { a, ...noA } = myObject;
console.log(noA); // => { b: 2, c: 3 }

Droits d'auteur: https://codeburst.io/use-es2015-object-rest-operator-to-omit-properties-38a3ecffe9

4
Pavel Druzhinin

Si, pour une raison quelconque, la touche Suppr ne fonctionne pas (comme si cela ne fonctionnait pas pour moi)

Vous pouvez le séparer, puis filtrer les valeurs non définies

// to cut out one element via arr.splice(indexToRemove, numberToRemove);
array.splice(key, 1)
array.filter(function(n){return n});

N'essayez pas de les chaîner car l'épissure renvoie les éléments supprimés;

3
Leon

Vous pouvez supprimer une entrée de votre carte en l'attribuant explicitement à "non défini". Comme dans votre cas:

myArray ["lastname"] = undefined;

3
Amytis

Nous pouvons aussi l'utiliser comme une fonction. Angular génère une erreur s’il est utilisé comme prototype. Merci @ HarpyWar. Cela m'a aidé à résoudre un problème.

var removeItem = function (object, key, value) {
    if (value == undefined)
        return;

    for (var i in object) {
        if (object[i][key] == value) {
            object.splice(i, 1);
        }
    }
};

var collection = [
    { id: "5f299a5d-7793-47be-a827-bca227dbef95", title: "one" },
    { id: "87353080-8f49-46b9-9281-162a41ddb8df", title: "two" },
    { id: "a1af832c-9028-4690-9793-d623ecc75a95", title: "three" }
];

removeItem(collection, "id", "87353080-8f49-46b9-9281-162a41ddb8df");
2
Omkar Kamale

C'est très simple si vous avez nderscore.js dépendance dans votre projet -

_.omit(myArray, "lastname")
2
vatsal

En utilisant le mot-clé "delete", il supprimera l'élément array de array en javascript.

Par exemple,

Considérez les déclarations suivantes.

var arrayElementToDelete = new Object();

arrayElementToDelete["id"]           = "XERTYB00G1"; 
arrayElementToDelete["first_name"]   = "Employee_one";
arrayElementToDelete["status"]       = "Active"; 

delete arrayElementToDelete["status"];

La dernière ligne du code supprimera l'élément du tableau dont la clé est "status" du tableau.

1
Ravindra Miyani
var myArray = newmyArray = new Object(); 
myArray["firstname"] = "Bob";
myArray["lastname"] = "Smith";
myArray["age"] = 25;

var s = JSON.stringify(myArray);

s.replace(/"lastname[^,}]+,/g,'');
newmyArray = JSON.parse(p);

Sans bouclage/itération nous obtenons le même résultat

0
Lalith kumar

Pour les "tableaux":

Si vous connaissez l'indice:

array.splice(index, 1);

Si vous connaissez la valeur:

function removeItem(array, value) {
    var index = array.indexOf(value);
    if (index > -1) {
        array.splice(index, 1);
    }
    return array;
}

La réponse la plus votée pour delete fonctionne bien pour les objets mais pas pour les tableaux réels. Si j'utilise delete cela supprime les éléments des boucles mais conserve l'élément en tant que empty et la longueur du tableau ne changera pas. Cela peut être un problème dans certains scénarios.

Par exemple, si je fais myArray.toString () sur myArray après sa suppression via delete, il crée une entrée vide, par exemple, ,

0
Arvind K.

La seule méthode de travail pour moi:

function removeItem (array, value) {
    var i = 0;
    while (i < array.length) {
        if(array[i] === value) {
            array.splice(i, 1);
        } else {
            ++i;
        }
    }
    return array;
}

usage:

var new = removeItem( ["Apple","banana", "orange"],  "Apple");
// ---> ["banana", "orange"]
0
T.Todua