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

https://stackoverflow.com/questions/1168807

19-09-2019
|

Question

Voici mon littéral d'objet:

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

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

La solution

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

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

Utilisation notation par points:

obj.key3 = "value3";

Utilisation de la notation crochets:

obj["key3"] = "value3";

La première forme est utilisée lorsque vous connaissez le nom de la propriété. La seconde forme est utilisée lorsque le nom de la propriété est déterminée dynamiquement. Comme dans cet exemple:

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

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

real array JavaScript peut être construit en utilisant soit:

La notation littéral de tableau:

var arr = [];

La notation constructeur Array:

var arr = new Array();

Autres conseils

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

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

Il remplace dest propriétés et valeurs des objets source (mais beaucoup), puis retourne dest.

La méthode de Object.assign() est utilisé pour copier les valeurs de toutes les propriétés propres dénombrables d'un ou plusieurs objets de source à un objet cible. Il retourne 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 propagation objet `{...}`

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

De MDN:

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

Shallow-clonage (hors prototype) ou la fusion d'objets est désormais possible en utilisant une syntaxe plus courte que Object.assign() .

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

Exemple en direct

Il fonctionne dans Chrome et Firefox en cours en cours. Ils disent que cela ne fonctionne pas dans le bord courant.

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"};~~

Oops ... Je me suis laissé emporter. L'information contre la contrebande de l'avenir est illégal. Dûment obscurci!

Je aime la croissance LoDash / Underscore lors de l'écriture des projets plus importants.

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

.push() est pour les tableaux , pas .

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

_.merge (Lodash seulement)

Le deuxième objet va écraser ou ajouter à l'objet de base. Les valeurs de undefined ne sont pas copiés.

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 va écraser ou ajouter à 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 deuxième objet contient par défaut qui sera ajoutée à l'objet de base si elles n'existent pas. Les valeurs de undefined 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 semblable à _.merge et peut être une meilleure option si vous utilisez déjà jQuery.

Le deuxième objet va écraser ou ajouter à l'objet de base. Les valeurs de undefined ne sont pas copiés.

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'ES6 / ES2015 Object.assign, il fonctionne similaire à _.merge et peut être la meilleure option si vous utilisez déjà un ES6 / ES2015 polyfill comme Babel si vous voulez polyfill vous.

Le deuxième objet va écraser ou ajouter à 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'une de ces (fourni key3 est la clé acutal que vous voulez utiliser)

arr[ 'key3' ] = value3;

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, la demande arr.a_key retournerait la valeur de value3, un 3 littéral.

arr.key3 = value3;

parce que votre arr est pas vraiment un tableau ... Il est un objet prototype. Le tableau réel serait:

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

mais il est toujours pas droit. Il devrait en fait être:

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 ya déjà une réponse acceptée pour cela, mais je pensais que je documente mon idée quelque part. S'il vous plaît [les gens] se sentent libres de faire des trous dans cette idée, comme je ne suis pas sûr que ce soit 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'utiliser de cette façon:

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

Depuis, la fonction prototype est de retour this vous pouvez continuer à la chaîne .push de la fin de votre variable obj: obj.push(...).push(...).push(...);

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

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éation d'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 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. Fonctionne pour moi.

Il suffit d'ajouter des propriétés:

Et nous voulons ajouter prop2 : 2 à cet objet, ce sont les options les plus pratiques:

opérateur Dot: object.prop2 = 2;
crochets: object['prop2'] = 2;

Alors que l'on utilise-t-on alors?

L'opérateur point est une syntaxe plus propre et doit être utilisé comme défaut (imo). Cependant, l'opérateur point n'est pas capable d'ajouter des touches dynamiques à un objet, 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);

objets fusion:

Quand on veut fusionner les propriétés de 2 objets tels sont les options les plus pratiques:

Object.assign(), prend un objet cible comme un argument, et un ou plusieurs objets source et les fusionner ensemble. Par exemple:

const object1 = {
  a: 1,
  b: 2,
};

const object2 = Object.assign({
  c: 3,
  d: 4
}, object1);

console.log(object2);

opérateur propagation 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 bavard et a doit être utilisé comme défaut imo. Ne pas oublié de transpile cette syntaxe à la syntaxe qui est pris en charge par tous les navigateurs, car il est relativement nouveau.
Object.assign() est plus dynamique parce que nous avons accès à tous les objets qui sont passés comme arguments et peuvent les manipuler avant qu'ils ne soient affectés au nouvel objet.

Votre exemple montre un objet, pas un tableau. Dans ce cas, la meilleure façon d'ajouter un champ à un objet est de simplement lui attribuer, comme ceci:

arr.key3 = value3;

Deux façons 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é utilise 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 voulez avoir plus de contrôle tout en définissant la propriété. Propriété définie peut être réglée comme dénombrable, configurable et modifiable par l'utilisateur.

Dans le cas où vous avez plusieurs littéraux anonymes d'objets à l'intérieur d'un objet et que vous voulez ajouter un autre objet contenant des paires clé / valeur, faites ceci:

Firebug l'objet:

console.log(Comicbook);

renvoie:

[Object {name = "Spiderman", value = "11"}, {Object name = "Marsipulami", value = "18"}, {Object name = "Garfield", value = "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

Soit obj['key3'] = value3 ou obj.key3 = value3 ajoutera la nouvelle paire au obj.

Cependant, je sais que jQuery n'a pas été mentionné, mais si vous l'utilisez, vous pouvez ajouter l'objet à travers $.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. étendre (target [, object1] [, objectN]) fusions le contenu de deux ou plusieurs objets ensemble dans le premier objet.

Et il permet aussi ajoute récursive / modifications 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>

Vous pouvez ajouter cette façon:

arr['key3'] = value3;

ou de cette façon:

arr.key3 = value3;

Les réponses suggérant la saisie dans l'objet avec la key3 variable ne fonctionnent que si la valeur de key3 était 'key3'.

Selon Propriété accesseurs défini dans la norme ECMA-262 ( http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf , P67), il y a deux façons que vous pouvez faire pour ajouter des propriétés à un objet existe. Tous ces deux voies, le moteur Javascript les traitera même.

La première consiste à utiliser la notation de points:

obj.key3 = value3;

Mais de cette façon, vous devez utiliser un IdentifierName après la notation par points.

La seconde façon consiste à utiliser une notation entre:

obj["key3"] = value3;

et une autre forme:

var key3 = "key3";
obj[key3] = value3;

De cette façon, vous pouvez utiliser expression (include IdentifierName ) dans la notation de support.

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 } ]

prise en charge par la plupart des navigateurs, et il vérifie si la clé d'objet disponible ou non que vous souhaitez ajouter, si disponible il overides valeur clé existante et pas disponible il ajouter 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" 
//            }   
//       }

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);
 }

A courte distance et élégante suivant spécification Javascript (stade candidat 3) est la suivante:

obj = { ... obj, ... { key3 : value3 } }

Une discussion plus approfondie peut être trouvée dans propagation objet vs Object.assign et Dr. Axel Rauschmayers le site .

Il fonctionne déjà dans Node.js depuis la version 8.6.0.

Vivaldi, Chrome, Opera et Firefox à jour les versions connaissent cette fonctionnalité aussi, mais Mirosoft ne le font pas jusqu'à aujourd'hui, ni dans Internet Explorer, ni Edge.

préfixer une paire clé-valeur d'un objet de sorte que le en fonctionne avec cet élément d'abord faire ceci:

    var nwrow = {'newkey': 'value' };
    for(var column in row){
        nwrow[column] = row[column];
    }
    row = nwrow;

La meilleure façon d'atteindre même est indiqué ci-dessous:

function getKey(key) {
  return `${key}`;
}

var obj = {key1: "value1", key2: "value2", [getKey('key3')]: "value3"};

//console.log(obj);

Depuis sa question du passé, mais le problème de la présente. Je vous conseille une autre solution. Il suffit de passer la clé et les valeurs de la fonction et vous obtiendrez un objet carte

var map = {};
function addValueToMap(key, value) {
map[key] = map[key] || [];
map[key].push(value);
}

arr.push({key3: value3});

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow

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

Utilisation notation par points:

Utilisation de la notation crochets:

La notation littéral de tableau:

La notation constructeur Array:

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

Exemple en direct

Année 2018 Réponse: opérateur propagation objet {...}

Exemple en direct

Année 2019 réponse

_.merge (Lodash seulement)

_.extend / _.assign

_.defaults

$ .extend

Object.assign ()

Il suffit d'ajouter des propriétés:

objets fusion:

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

Année 2018 Réponse: opérateur propagation objet `{...}`