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?
Il existe deux façons d'ajouter new properties à un objet:
var obj = {
key1: value1,
key2: value2
};
Utilisation de la notation par points:
obj.key3 = "value3";
Utilisation de la notation entre crochets:
obj["key3"] = "value3";
Le premier formulaire est utilisé lorsque vous connaissez le nom de la propriété. Le second formulaire est utilisé 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");
Un tableau JavaScript réel peut être construit en utilisant:
La notation littérale de tableau:
var arr = [];
La notation du constructeur Array:
var arr = new Array();
Année 2017 réponse: Object.assign()
Object.assign (dest, src1, src2, ...) fusionne les objets.
Il écrase dest avec les propriétés et les valeurs des objets source (quel que soit leur nombre), puis renvoie dest.
La méthode
Object.assign()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. Il retournera l'objet cible.
Exemple en direct
var obj = {key1: "value1", key2: "value2"};
Object.assign(obj, {key3: "value3"});
document.body.innerHTML = JSON.stringify(obj);Réponse à l'année 2018: opérateur de propagation d'objet {...}
obj = {...obj, ...pair};
De MDN :
Il copie ses propres propriétés énumérables d'un objet fourni dans un nouvel objet.
Le clonage superficiel (à l’exception du prototype) ou la fusion d’objets est désormais possible à l’aide d’une syntaxe plus courte que
Object.assign().Notez que
Object.assign()déclenche setters alors que la syntaxe de propagation ne le fait pas.
Exemple en direct
Cela fonctionne dans Chrome actuel et dans 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);Réponse de l'année 2019
opérateur d'assignation d'objet+=:
obj += {key3: "value3"};
Oups ... je me suis emporté. La contrebande d'informations de l'avenir est illégale. Dûment obscurci!
Je suis devenu friand de LoDash / nderscore lors de la rédaction de projets plus volumineux.
Ajouter par obj['key'] ou obj.key est une solide réponse en JavaScript pur. Toutefois, les bibliothèques LoDash et Underscore fournissent de nombreuses fonctions pratiques supplémentaires lors de l'utilisation d'objets et de tableaux en général.
.Push() est pour les tableaux , pas pour objets .
Selon ce que vous recherchez, il existe deux fonctions spécifiques qui peuvent être agréables à utiliser et qui offrent des fonctionnalités similaires à celles de arr.Push(). Pour plus d'informations, consultez la documentation, ils ont quelques exemples intéressants.
_. merge (Lodash uniquement)
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}
_. défaut
Le deuxième objet contient les valeurs par défaut qui seront ajoutées à l’objet de base s’ils 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 intéressant de mentionner jQuery.extend, il fonctionne de la même manière que _.merge et peut constituer 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 intéressant de mentionner le Object.assign ES6/ES2015, il fonctionne de la même façon que _.merge et peut être la meilleure option si vous utilisez déjà un polyfill ES6/ES2015 comme Babel si vous voulez - se polyfillent .
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}
Vous pouvez utiliser l'un ou l'autre (à condition que key3 soit la clé 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 renverrait la valeur de value3, un littéral 3.
arr.key3 = value3;
parce que votre arr n'est pas vraiment un tableau ... C'est un objet prototype. Le vrai tableau serait:
var arr = [{key1: value1}, {key2: value2}];
mais ce n'est toujours pas correct. Ce devrait être réellement:
var arr = [{key: key1, value: value1}, {key: key2, value: value2}];
var employees = [];
employees.Push({id:100,name:'Yashwant',age:30});
employees.Push({id:200,name:'Mahesh',age:35});
Je sais qu'il existe 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] sont libres de creuser cette idée, car je ne suis pas sûr que ce soit la meilleure solution ... mais je viens de l'assembler il y a quelques minutes:
Object.prototype.Push = function( key, value ){
this[ key ] = value;
return this;
}
Vous l'utiliseriez de cette façon:
var obj = {key1: value1, key2: value2};
obj.Push( "key3", "value3" );
Depuis, la fonction prototype renvoie this, vous pouvez continuer à enchaîner les .Push jusqu'à la fin de votre variable obj: obj.Push(...).Push(...).Push(...);.
Une autre caractéristique est que vous pouvez transmettre 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/
Ajouter simplement des propriétés:
Et nous voulons ajouter prop2 : 2 à cet objet, voici les options les plus pratiques:
- Opérateur de points:
object.prop2 = 2; - crochets:
object['prop2'] = 2;
Alors, lequel utilise-t-on alors?
L'opérateur point est une syntaxe plus propre et doit être utilisé par défaut (imo). Cependant, l'opérateur point n'est pas capable d'ajouter des clés dynamiques à un objet, ce qui peut être très utile dans certains cas. Voici un exemple:
const obj = {
prop1: 1
}
const key = Math.random() > 0.5 ? 'key1' : 'key2';
obj[key] = 'this value has a dynamic key';
console.log(obj);Fusion d'objets:
Lorsque nous voulons fusionner les propriétés de 2 objets, ce sont les options les plus pratiques:
Object.assign(), prend un objet cible en tant qu'argument et un ou plusieurs objets source et les fusionnera. Par exemple:
const object1 = {
a: 1,
b: 2,
};
const object2 = Object.assign({
c: 3,
d: 4
}, object1);
console.log(object2);- Opérateur de propagation d'objet
...
const obj = {
prop1: 1,
prop2: 2
}
const newObj = {
...obj,
prop3: 3,
prop4: 4
}
console.log(newObj);Lequel utilisons-nous?
- La syntaxe de propagation est moins détaillée et doit être utilisée comme imo par défaut. N'oubliez pas de transpiler cette syntaxe en syntaxe qui est supportée par tous les navigateurs, car elle est relativement nouvelle.
Object.assign()est plus dynamique car nous avons accès à tous les objets transmis en tant qu'arguments et pouvons les manipuler avant qu'ils ne soient affectés au nouvel objet.
Vous pouvez créer une classe 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');
Imprimer l'objet
console.log(my_obj.obj) // Return {key1: "value1", key2: "value2", key3: "value3"}
Imprimer une clé
console.log(my_obj.obj["key3"]) //Return value3
Je suis débutant en javascript, les commentaires sont les bienvenus. Travaille pour moi.
Deux manières les plus utilisées déjà mentionnées dans la plupart des réponses
obj.key3 = "value3";
obj["key3"] = "value3";
Une autre façon de définir une propriété consiste à utiliser Object.defineProperty ()
Object.defineProperty(obj, 'key3', {
value: "value3", // undefined by default
enumerable: true, // false by default
configurable: true, // false by default
writable: true // false by default
});
Cette méthode est utile lorsque vous souhaitez avoir plus de contrôle lors de la définition de la propriété. La propriété définie peut être définie comme énumérable, configurable et accessible en écriture par l'utilisateur.
Votre exemple montre un objet, pas un tableau. Dans ce cas, la méthode recommandée pour ajouter un champ à un objet consiste à lui assigner, comme suit:
arr.key3 = value3;
Si vous avez plusieurs littéraux d'objet anonymes dans un objet et souhaitez ajouter un autre objet contenant des paires clé/valeur, procédez comme suit:
Firebug 'l'objet:
console.log(Comicbook);
résultats:
[Objet {name = "Spiderman", valeur = "11"}, objet {name = "Marsipulami", valeur = "18"}, objet {name = "Garfield", valeur = "2"}]
Code:
if (typeof Comicbook[3]=='undefined') {
private_formArray[3] = new Object();
private_formArray[3]["name"] = "Peanuts";
private_formArray[3]["value"] = "12";
}
ajoutera Object {name="Peanuts", value="12"} à l'objet Comicbook
obj['key3'] = value3 ou obj.key3 = value3 ajoutera la nouvelle paire à la variable obj.
Cependant, je sais que jQuery n’a pas été mentionné, mais si vous l’utilisez, vous pouvez ajouter l’objet via $.extend(obj,{key3: 'value3'}). Par exemple.:
var obj = {key1: 'value1', key2: 'value2'};
$('#ini').append(JSON.stringify(obj));
$.extend(obj,{key3: 'value3'});
$('#ext').append(JSON.stringify(obj));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ini">Initial: </p>
<p id="ext">Extended: </p>jQuery. extend (cible [ objet1] [ objetN]) fusionne le contenu de deux objets ou plus dans le même premier objet.
Et cela permet aussi des ajouts/modifications récursifs avec $.extend(true,object1,object2);:
var object1 = {
Apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
$("#ini").append(JSON.stringify(object1));
$.extend( true, object1, object2 );
$("#ext").append(JSON.stringify(object1));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="ini">Initial: </p>
<p id="ext">Extended: </p>supporté par la plupart des navigateurs, et il vérifie si la clé d'objet est disponible ou non, vous souhaitez l'ajouter, si disponible le remplace la valeur de la clé existante et le non disponible le ajoute la clé avec la valeur
exemple 1
let my_object = {};
// now i want to add something in it
my_object.red = "this is red color";
// { red : "this is red color"}
exemple 2
let my_object = { inside_object : { car : "maruti" }}
// now i want to add something inside object of my object
my_object.inside_object.plane = "JetKing";
// { inside_object : { car : "maruti" , plane : "JetKing"} }
exemple 3
let my_object = { inside_object : { name : "abhishek" }}
// now i want to add something inside object with new keys birth , gender
my_object.inside_object.birth = "8 Aug";
my_object.inside_object.gender = "Male";
// { inside_object :
// { name : "abhishek",
// birth : "8 Aug",
// gender : "Male"
// }
// }
var arrOfObj = [{name: 'eve'},{name:'john'},{name:'jane'}];
var injectObj = {isActive:true, timestamp:new Date()};
// function to inject key values in all object of json array
function injectKeyValueInArray (array, keyValues){
return new Promise((resolve, reject) => {
if (!array.length)
return resolve(array);
array.forEach((object) => {
for (let key in keyValues) {
object[key] = keyValues[key]
}
});
resolve(array);
})
};
//call function to inject json key value in all array object
injectKeyValueInArray(arrOfObj,injectObj).then((newArrOfObj)=>{
console.log(newArrOfObj);
});
Sortie comme ceci: -
[ { name: 'eve',
isActive: true,
timestamp: 2017-12-16T16:03:53.083Z },
{ name: 'john',
isActive: true,
timestamp: 2017-12-16T16:03:53.083Z },
{ name: 'jane',
isActive: true,
timestamp: 2017-12-16T16:03:53.083Z } ]
Selon Accesseurs de propriété définis dans ECMA-262 ( http://www.ecma-international.org/publications/files/ECMA- ST/Ecma-262.pdf , P67), il existe deux façons d’ajouter des propriétés à un objet existant. Tous ces deux sens, le moteur Javascript les traitera de la même manière.
La première consiste à utiliser la notation par points:
obj.key3 = value3;
Mais de cette façon, vous devriez utiliser un IdentifierName après la notation par points.
La deuxième façon consiste à utiliser la notation entre crochets:
obj["key3"] = value3;
et une autre forme:
var key3 = "key3";
obj[key3] = value3;
De cette façon, vous pouvez utiliser une expression (inclure IdentifierName ) dans le notation entre crochets.
Vous pouvez soit l'ajouter de cette façon:
arr['key3'] = value3;
ou de cette façon:
arr.key3 = value3;
Les réponses suggérant de saisir l'objet avec la variable key3 ne fonctionneraient que si la valeur de key3 était 'key3'.
Une manière courte et élégante dans la prochaine spécification Javascript (candidat stage 3) est:
obj = { ... obj, ... { key3 : value3 } }
Une discussion plus approfondie peut être trouvée dans Object spread vs Object.assign et sur site du Dr Axel Rauschmayers .
Cela fonctionne déjà dans node.js depuis la version 8.6.0.
Vivaldi, Chrome, Opera et Firefox dans les versions les plus récentes connaissent également cette fonctionnalité, mais Mirosoft ne l’a pas encore fait aujourd’hui, ni dans Internet Explorer ni dans Edge.
Nous pouvons le faire de cette façon aussi.
var myMap = new Map();
myMap.set(0, 'my value1');
myMap.set(1, 'my value2');
for (var [key, value] of myMap) {
console.log(key + ' = ' + value);
}
Afin de préfixer une paire clé-valeur à un objet, le pour dans fonctionne avec cet élément en premier lieu, procédez comme suit:
var nwrow = {'newkey': 'value' };
for(var column in row){
nwrow[column] = row[column];
}
row = nwrow;
Le meilleur moyen d’obtenir la même chose est indiqué ci-dessous:
function getKey(key) {
return `${key}`;
}
var obj = {key1: "value1", key2: "value2", [getKey('key3')]: "value3"};
//console.log(obj);
Depuis que c'est une question du passé mais le problème du présent. Suggérerait une solution supplémentaire: il suffit de transmettre la clé et les valeurs à la fonction pour obtenir un objet de la carte.
var map = {};
function addValueToMap(key, value) {
map[key] = map[key] || [];
map[key].Push(value);
}