Question Comment puis-je ajouter une paire clé / valeur à un objet JavaScript?


Voici mon objet littéral:

var obj = {key1: value1, key2: value2};

Comment puis-je ajouter {key3: value3} à l'objet?


974
2017-07-22 23:21


origine


Réponses:


Il y a deux façons d'ajouter de nouvelles Propriétés à un objet:

var obj = {
    key1: value1,
    key2: value2
};

En utilisant la notation par points:

obj.key3 = "value3";

Utilisation de la notation en crochets:

obj["key3"] = "value3";

Le premier formulaire est utilisé lorsque vous connaissez le nom de la propriété. La deuxième forme est utilisée lorsque le nom de la propriété est déterminé dynamiquement. Comme dans cet exemple:

var getProperty = function (propertyName) {
    return obj[propertyName];
};

getProperty("key1");
getProperty("key2");
getProperty("key3");

UNE réal Le tableau JavaScript peut être construit en utilisant:

La notation littérale de tableau:

var arr = [];

La notation du constructeur Array:

var arr = new Array();

1654
2017-07-22 23:25



Année 2017 réponse: Object.assign()

Object.assign (dest, src1, src2, ...) fusionne des objets.

Il écrase dest avec les propriétés et les valeurs des objets source (mais nombreux), puis retourne dest.

le Object.assign() La méthode est utilisée pour copier les valeurs de toutes les propriétés propres énumérables d'un ou plusieurs objets source vers un objet cible. Cela renverra l'objet cible.

Exemple en direct

var obj = {key1: "value1", key2: "value2"};
Object.assign(obj, {key3: "value3"});

document.body.innerHTML = JSON.stringify(obj);

Année 2018 réponse: opérateur de propagation d'objet {...}

obj = {...obj, ...pair};

De MDN:

Il copie ses propres propriétés énumérables d'un objet fourni sur un nouvel objet.

Le clonage peu profond (hors prototype) ou la fusion d'objets est maintenant possible en utilisant une syntaxe plus courte que Object.assign().

Notez que Object.assign() déclencheurs setters alors que la syntaxe de propagation ne le fait pas.

Exemple en direct

Cela fonctionne dans Chrome actuel et Firefox actuel. Ils disent que cela ne fonctionne pas dans Edge actuel.

var obj = {key1: "value1", key2: "value2"};
var pair = {key3: "value3"};
obj = {...obj, ...pair};

document.body.innerHTML = JSON.stringify(obj);

Année 2019 réponse

Opérateur d'affectation d'objets  +=:

obj += {key3: "value3"};


81
2017-11-04 23:51



J'ai aimé le LoDash / Souligner lors de l'écriture de projets plus importants.

Ajouter par obj['key'] ou obj.key sont toutes des réponses JavaScript solides et pures. Cependant, les deux bibliothèques LoDash et Underscore fournissent de nombreuses autres fonctions pratiques lorsque vous travaillez avec des objets et des tableaux en général.

.push() est pour les tableaux, pas pour objets.

Selon ce que vous cherchez, il y a deux fonctions spécifiques qui peuvent être agréables à utiliser et qui offrent des fonctionnalités similaires à la sensation de arr.push(). Pour plus d'informations consultez les docs, ils ont quelques bons exemples là-bas.

_.fusionner (Lodash seulement)

Le deuxième objet écrasera ou ajoutera à l'objet de base. undefined les valeurs ne sont pas copiées.

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
_.merge(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3"} 

_.extend / _.assign

Le deuxième objet écrasera ou ajoutera à l'objet de base. undefined sera copié.

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
_.extend(obj, obj2);
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3", key4: undefined}

_.defaults

Le second objet contient les valeurs par défaut qui seront ajoutées à l'objet de base si elles n'existent pas. undefined les valeurs seront copiées si la clé existe déjà.

var obj = {key3: "value3", key5: "value5"};
var obj2 = {key1: "value1", key2:"value2", key3: "valueDefault", key4: "valueDefault", key5: undefined};
_.defaults(obj, obj2);
console.log(obj);
// → {key3: "value3", key5: "value5", key1: "value1", key2: "value2", key4: "valueDefault"}

$ .extend

En outre, il peut être utile de mentionner jQuery.extend, il fonctionne comme _.merge et peut être une meilleure option si vous utilisez déjà jQuery.

Le deuxième objet écrasera ou ajoutera à l'objet de base. undefined les valeurs ne sont pas copiées.

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
$.extend(obj, obj2); 
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3"}

Object.assign ()

Il peut être utile de mentionner l'Object.assign ES6 / ES2015, il fonctionne comme _.merge et peut être la meilleure option si vous utilisez déjà un polyfill ES6 / ES2015 comme Babel si tu veux polyfill vous.

Le deuxième objet écrasera ou ajoutera à l'objet de base. undefined sera copié.

var obj = {key1: "value1", key2: "value2"};
var obj2 = {key2:"value4", key3: "value3", key4: undefined};
Object.assign(obj, obj2); 
console.log(obj);
// → {key1: "value1", key2: "value4", key3: "value3", key4: undefined}

77
2017-11-24 18:11



Vous pouvez utiliser l'un ou l'autre (à condition que key3 soit la clé acutale que vous voulez utiliser)

arr[ 'key3' ] = value3;

ou

arr.key3 = value3;

Si key3 est une variable, alors vous devriez faire:

var key3 = 'a_key';
var value3 = 3;
arr[ key3 ] = value3;

Après cela, demander arr.a_key retournerait la valeur de value3, un littéral 3.


62
2017-07-22 23:22



arr.key3 = value3;

parce que ton arr n'est pas vraiment un tableau ... C'est un objet prototype. Le tableau réel serait:

var arr = [{key1: value1}, {key2: value2}];

mais ce n'est toujours pas correct. Cela devrait être:

var arr = [{key: key1, value: value1}, {key: key2, value: value2}];

26
2017-07-22 23:25



var employees = []; 
employees.push({id:100,name:'Yashwant',age:30});
employees.push({id:200,name:'Mahesh',age:35});

23
2017-10-27 17:49



Je sais qu'il y a déjà une réponse acceptée pour cela mais je pensais documenter mon idée quelque part. S'il vous plaît [les gens] ne hésitez pas à faire des trous dans cette idée, car je ne suis pas sûr si c'est la meilleure solution ... mais je viens de mettre cela ensemble il y a quelques minutes:

Object.prototype.push = function( key, value ){
   this[ key ] = value;
   return this;
}

Vous l'utiliseriez de cette manière:

var obj = {key1: value1, key2: value2};
obj.push( "key3", "value3" );

Depuis, la fonction prototype revient this vous pouvez continuer à enchaîner .pushest à la fin de votre obj variable: obj.push(...).push(...).push(...);

Une autre caractéristique est que vous pouvez passer un tableau ou un autre objet comme valeur dans les arguments de la fonction push. Voir mon violon pour un exemple de travail: http://jsfiddle.net/7tEme/


8
2018-06-26 18:34



Vous pouvez créer un cours avec la réponse de @ Ionuţ G. Stan

function obj(){
    obj=new Object();
    this.add=function(key,value){
        obj[""+key+""]=value;
    }
    this.obj=obj
}

Créer un nouvel objet avec la dernière classe:

my_obj=new obj();
my_obj.add('key1', 'value1');
my_obj.add('key2', 'value2');
my_obj.add('key3','value3');

Impression de l'objet

console.log(my_obj.obj) // Return {key1: "value1", key2: "value2", key3: "value3"} 

Impression d'une clé

console.log(my_obj.obj["key3"]) //Return value3

Je suis novice en javascript, les commentaires sont les bienvenus. Travaille pour moi.


8
2017-12-28 01:34



Votre exemple montre un objet, pas un tableau. Dans ce cas, le moyen préféré d'ajouter un champ à un objet est de l'assigner, comme ceci:

arr.key3 = value3;

6
2017-07-22 23:25