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

objet.attribuer(dest, src1, src2, ...) fusionne les objets.

Il écrase dest avec des propriétés et des valeurs de (cependant plusieurs) objets de source de, renvoie ensuite dest .

la méthode Object.assign() est utilisée pour copier les valeurs de toutes les propriétés propres dénombrables d'un ou plusieurs objets source vers un objet cible. Il de retour de l'objet cible.

Live exemple

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

à Partir de MDN :

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

Clonage superficiel (à l'exclusion du prototype) ou la fusion d'objets est maintenant possible en utilisant une syntaxe plus courte que Object.assign() .

notez que Object.assign() déclenche setters alors que la syntaxe spread ne le fait pas.

Live exemple

il fonctionne dans le Chrome actuel et Firefox actuel. Ils disent que ça ne marche pas dans Current Edge.

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 de cession D'objet += :

obj += {key3: "value3"};

Oops... Je suis emporté. La contrebande d'informations du futur est illégale. Dûment obscurci!

j'ai pris goût au LoDash / Underscore en écrivant des projets plus grands.

en Ajoutant par obj['key'] ou obj.key sont solide en pur JavaScript réponses. Cependant, les deux bibliothèques LoDash et Underscore offrent de nombreuses fonctions supplémentaires pratiques lorsqu'elles travaillent avec des objets et des tableaux en général.

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

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

_.fusionner (Lodash seulement)

le second objet écrira ou ajoutera à l'objet de base. Les valeurs undefined 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"} 

_.étendre._ / attribuer

le second objet écrira 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}

_.par défaut

le second objet contient des valeurs par défaut qui seront ajoutées à l'objet de base s'il n'existe pas. Les valeurs 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"}

$.étendre

en outre, il peut être intéressant de mentionner jQuery.l'étendre, c'fonctions similaires à celles d' _.fusionner et peut être une meilleure option si vous utilisez déjà jQuery.

le second objet écrira ou ajoutera à l'objet de base. Les valeurs undefined 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"}

objet.attribuer()

il peut être il vaut la peine de mentionner L'objet ES6/ ES2015.céder, c'fonctions similaires à celles d' _.fusionner et peut être la meilleure option si vous utilisez déjà un polyfill ES6/ES2015 comme Babel si vous voulez polyfill vous-même .

le second objet écrira 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 de ceux-ci (à condition que key3 soit la clé active que vous voulez utiliser)

arr[ 'key3' ] = value3;

ou

arr.key3 = value3;

si key3 est une variable, alors vous devez 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 .

arr.key3 = value3;

parce que votre arr n'est pas vraiment un tableau... Il s'agit d'un prototype de l'objet. Le vrai tableau serait:

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

mais ce n'est toujours pas juste. 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 y a déjà une réponse acceptée pour cela, mais j'ai pensé que je pourrais documenter mon idée quelque part. S'il vous plaît [les gens] n'hésitez pas à faire des trous dans cette idée, car je ne suis pas sûr que ce soit la meilleure solution... mais je viens de le faire 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 retourne this vous pouvez continuer à enchaîner .push 's à 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 /

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

Imprimer 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 débutant en javascript, les commentaires sont les bienvenus. Fonctionne pour moi.

Votre exemple montre un Objet, pas un Tableau. Dans ce cas, le moyen privilégié pour ajouter un champ à un Objet est simplement d'attribuer, comme:

arr.key3 = value3;

deux voies 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é est D'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 voulez avoir plus de contrôle tout en définissant la propriété. La propriété définie peut être définie comme énumérable, configurable et écrivable par l'utilisateur.

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

coupe-feu "L'objet:

console.log(Comicbook);

retourne:

[Object { nom="Spiderman", value="11"}, Objet { nom="Marsipulami", value="18"}, Objet { nom="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 à la 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 (cible[,objet1][,objectN]) fusionne le contenu de deux ou plusieurs objets ensemble dans la première objet.

et permet également des ajouts/modifications récursives 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 soit l'ajouter de cette façon:

arr['key3'] = value3;

ou par ici:

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' .

selon accesseurs de propriété défini dans ECMA-262 ( http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf , P67), il y a deux façons d'ajouter des propriétés à un objet existant. Tout cela dans les deux sens, le moteur Javascript les traitera de la même manière.

La première façon est d'utiliser la notation point:

obj.key3 = value3;

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

la deuxième façon est d'utiliser la notation de support:

obj["key3"] = value3;

et une autre forme:

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

de cette façon, vous pouvez utiliser une Expression (incluez IdentifierName ) dans la notation entre crochets.

une manière courte et élégante dans la prochaine spécification Javascript (étape candidate 3) est:

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

une discussion plus approfondie peut être trouvée dans objet étendu vs objet.assigner et sur Dr .Axel Rauschmayers site .

il fonctionne déjà dans le noeud.js depuis la version 8.6.0.

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

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

Nous pouvons le faire de cette manière.

var myMap = new Map();
myMap.set(0, 'my value1');
myMap.set(1, 'my value2');
 for (var [key, value] of myMap) {
  console.log(key + ' = ' + value);
 }

puisque c'est une question du passé mais le problème du présent. Suggérerait une solution de plus: il suffit de passer la clé et les valeurs à la fonction et vous obtiendrez un objet map.

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

pour préparer une paire de valeur de clé à un objet de sorte que le pour dans fonctionne avec cet élément faire en premier:

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

le meilleur moyen d'y parvenir est indiqué ci-dessous:

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

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

//console.log(obj);

simplement ajouter des propriétés:

et nous voulons ajouter prop2 : 2 à cet objet, ce sont les options les plus commodes:

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

alors lequel utilisons-nous?

de L'opérateur point est plus propre syntaxe et doit être utilisée comme valeur par défaut (omi). Cependant, l'opérateur dot n'est pas capable d'ajouter des touches 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);

la Fusion des objets:

quand nous voulons fusionner les propriétés de 2 objets ce sont les options les plus commodes:

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

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

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

console.log(object2);

2. Objet de la propagation de l'opérateur ...

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 verbeuse et doit être utilisée comme imo par défaut. N'oubliez pas de transposer cette syntaxe à la syntaxe qui est supportée par tous 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 assignés au nouvel objet.

arr.push({key3: value3});