Ecco il mio oggetto letterale:

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

Come posso aggiungere il campo key3con value3l'oggetto?

Esistono due modi per aggiungere nuove proprietà a un oggetto:

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

Usando la notazione punto:

obj.key3 = "value3";

Usando la notazione parentesi quadra:

obj["key3"] = "value3";

Il primo modulo viene utilizzato quando si conosce il nome della proprietà. Il secondo modulo viene utilizzato quando il nome della proprietà viene determinato in modo dinamico. Come in questo esempio:

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

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

Un vero array JavaScript può essere costruito usando:

La notazione letterale Array:

var arr = [];

Notazione del costruttore dell'array:

var arr = new Array();

Anno 2017 risposta: Object.assign()

Object.assign (dest, src1, src2, ...) unisce gli oggetti.

Sovrascrive destcon proprietà e valori di (comunque molti) oggetti sorgente, quindi ritorna dest.

Il Object.assign()metodo viene utilizzato per copiare i valori di tutte le proprietà proprie enumerabili da uno o più oggetti di origine in un oggetto di destinazione. Restituirà l'oggetto di destinazione.

Esempio dal vivo

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

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

Risposta dell'anno 2018: operatore diffusione oggetti {...}

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

Da MDN :

Copia le proprie proprietà enumerabili da un oggetto fornito su un nuovo oggetto.

La clonazione superficiale (escluso il prototipo) o l'unione di oggetti è ora possibile utilizzando una sintassi più breve di Object.assign().

Si noti che Object.assign()innesca setter mentre la sintassi di diffusione no.

Esempio dal vivo

Funziona con l'attuale Chrome e l'attuale Firefox. Dicono che non funziona con Edge corrente.

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

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

Risposta dell'anno 2019

Operatore di assegnazione oggetto += :

obj += {key3: "value3"};

Oops ... Mi sono lasciato trasportare. Il contrabbando di informazioni dal futuro è illegale. Debitamente oscurato!

Mi sono affezionato a LoDash / Underscore quando ho scritto progetti più grandi.

Aggiungendo da obj['key']o obj.keysono tutte solide risposte JavaScript pure. Tuttavia, entrambe le librerie LoDash e Underscore offrono molte utili funzioni aggiuntive quando si lavora con oggetti e array in generale.

.push()è per array , non per oggetti .

A seconda di ciò che stai cercando, ci sono due funzioni specifiche che possono essere utili da utilizzare e che offrono funzionalità simili a quelle dell'atmosfera arr.push(). Per maggiori informazioni consulta i documenti, hanno alcuni ottimi esempi lì.

_.merge (solo Lodash)

Il secondo oggetto verrà sovrascritto o aggiunto all'oggetto base. undefinedi valori non vengono copiati.

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

Il secondo oggetto verrà sovrascritto o aggiunto all'oggetto base. undefinedsarà copiato.

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

Il secondo oggetto contiene impostazioni predefinite che verranno aggiunte all'oggetto base se non esistono. undefinedi valori verranno copiati se la chiave esiste già.

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

Inoltre, potrebbe essere utile menzionare jQuery.extend, funziona in modo simile a _.merge e potrebbe essere un'opzione migliore se si sta già utilizzando jQuery.

Il secondo oggetto verrà sovrascritto o aggiunto all'oggetto base. undefinedi valori non vengono copiati.

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 ()

Potrebbe valere la pena menzionare ES6 / ES2015 Object.assign, funziona in modo simile a _.merge e potrebbe essere l'opzione migliore se si sta già utilizzando un polyfill ES6 / ES2015 come Babel se si desidera eseguire il polyfill da soli .

Il secondo oggetto verrà sovrascritto o aggiunto all'oggetto base. undefinedsarà copiato.

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}

È possibile utilizzare uno di questi (a condizione che key3 sia la chiave acutal che si desidera utilizzare)

arr[ 'key3' ] = value3;

o

arr.key3 = value3;

Se key3 è una variabile, allora dovresti fare:

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

Dopo questo, la richiesta arr.a_keyrestituirebbe il valore di value3, un valore letterale 3.

arr.key3 = value3;

perché il tuo arr non è davvero un array ... È un oggetto prototipo. Il vero array sarebbe:

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

ma non è ancora giusto. In realtà dovrebbe essere:

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

Semplicemente aggiungendo proprietà:

E vogliamo aggiungere prop2 : 2a questo oggetto, queste sono le opzioni più convenienti:

1. Operatore punto: object.prop2 = 2;
2. parentesi quadre: object['prop2'] = 2;

Quindi quale usiamo allora?

L'operatore punto è una sintassi più pulita e deve essere utilizzata come impostazione predefinita (imo). Tuttavia, l'operatore punto non è in grado di aggiungere chiavi dinamiche a un oggetto, il che può essere molto utile in alcuni casi. Ecco un esempio:

const obj = {
  prop1: 1
}

const key = Math.random() > 0.5 ? 'key1' : 'key2';

obj[key] = 'this value has a dynamic key';

console.log(obj);

Unione di oggetti:

Quando vogliamo unire le proprietà di 2 oggetti queste sono le opzioni più convenienti:

1. Object.assign(), accetta un oggetto target come argomento e uno o più oggetti sorgente e li unirà insieme. Per esempio:

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

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

console.log(object2);

2. Operatore di diffusione oggetti ...

const obj = {
  prop1: 1,
  prop2: 2
}

const newObj = {
  ...obj,
  prop3: 3,
  prop4: 4
}

console.log(newObj);

Quale usiamo?

• La sintassi di diffusione è meno dettagliata e deve essere utilizzata come immagine predefinita. Non dimenticare di tradurre questa sintassi in sintassi supportata da tutti i browser perché è relativamente nuova.
• Object.assign() è più dinamico perché abbiamo accesso a tutti gli oggetti passati come argomenti e li possiamo manipolare prima che vengano assegnati al nuovo oggetto.

So che esiste già una risposta accettata per questo, ma ho pensato di documentare la mia idea da qualche parte. Per favore [gente] sentiti libero di creare buchi in questa idea, poiché non sono sicuro che sia la soluzione migliore ... ma ho appena messo insieme alcuni minuti fa:

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

Lo useresti in questo modo:

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

Poiché la funzione prototipo sta tornando this, puoi continuare a concatenare .pushfino alla fine della tua objvariabile:obj.push(...).push(...).push(...);

Un'altra caratteristica è che è possibile passare un array o un altro oggetto come valore negli argomenti della funzione push. Vedi il mio violino per un esempio funzionante: http://jsfiddle.net/7tEme/

Prestazione

Oggi 2020.01.14 eseguo test su MacO HighSierra 10.13.6 su Chrome v78.0.0, Safari v13.0.4 e Firefox v71.0.0, per le soluzioni scelte. Divido le soluzioni a mutable (prima lettera M) e immutabile (prima lettera I). Fornisco anche alcune soluzioni immutabili (IB, IC, ID / IE) non ancora pubblicate nelle risposte a questa domanda

conclusioni

• le soluzioni mutabili più veloci sono molto più veloci delle immutabili più veloci (> 10x)
• l'approccio classico mutabile come obj.key3 = "abc"(MA, MB) è il più veloce
• per soluzioni immutabili il {...obj, key3:'abc'}e Object.assign(IA, IB) sono i più veloci
• sorprendentemente ci sono soluzioni immutabili più veloci di alcune soluzioni mutabili per Chrome (MC-IA) e Safari (MD-IB)

Dettagli

Nello snippet di seguito sono presenti le soluzioni testate preselezionate, è possibile prefromare il test sulla macchina QUI

var o = {
    key1: true,
    key2: 3,
};

var log= (s,f)=> console.log(`${s} --> ${JSON.stringify(f({...o}))}`);



function MA(obj) {
  obj.key3 = "abc";
  return obj;
}

function MB(obj) {
  obj['key3'] = "abc";
  return obj;
}

function MC(obj) {
  Object.assign(obj, {key3:'abc'});
  return obj;
}

function MD(obj) {
  Object.defineProperty(obj, 'key3', {
    value: "abc",       // undefined by default
    enumerable: true,      // false by default
    configurable: true,    // false by default
    writable: true         // false by default
  });
  return obj;
}

function IA(obj) {
  return {...obj, key3:'abc'};
}

function IB(obj) {
  return Object.assign({key3:'abc'}, obj);
}

function IC(obj) {
  let ob= JSON.parse(JSON.stringify(obj))
  ob.key3 = 'abc';
  return ob;
}


function ID(obj) {
	let ob= Object.fromEntries(Object.entries(obj));
  ob.key3 = 'abc';
  return ob;
}

function IE(obj) {
	return Object.fromEntries(Object.entries(obj).concat([['key3','abc']]))
}



log('MA',MA);
log('MB',MB);
log('MC',MC);
log('MD',MD);
log('IA',IA);
log('IB',IB);
log('IC',IC);
log('ID',ID);
log('IE',IE);

This snippet only presents code - it not perform tests itself!

Puoi creare un corso con la risposta di @ Ionuț G. Stan

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

Creazione di un nuovo oggetto con l'ultima classe:

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

Stampa dell'oggetto

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

Stampa di una chiave

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

Sono novizio in JavaScript, i commenti sono benvenuti. Per me va bene.

Due modi più usati già menzionati nella maggior parte delle risposte

obj.key3 = "value3";

obj["key3"] = "value3";

Un altro modo per definire una proprietà è usare 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
});

Questo metodo è utile quando si desidera avere un maggiore controllo durante la definizione della proprietà. La proprietà definita può essere impostata come enumerabile, configurabile e scrivibile dall'utente.

Il tuo esempio mostra un oggetto, non una matrice. In tal caso, il modo preferito per aggiungere un campo a un Oggetto è semplicemente assegnarglielo, in questo modo:

arr.key3 = value3;

supportato dalla maggior parte dei browser, e controlla se chiave oggetto disponibile o non si desidera aggiungere, se disponibili si overides valore della chiave esistente e disponibile che aggiungere chiave con il valore

Esempio 1

let my_object = {};

// now i want to add something in it  

my_object.red = "this is red color";

// { red : "this is red color"}

esempio 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"} }

esempio 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" 
//            }   
//       }

Nel caso in cui ci siano più valori letterali di oggetti anonimi all'interno di un oggetto e si desidera aggiungere un altro oggetto contenente coppie chiave / valore, procedere come segue:

Firebug 'the Object:

console.log(Comicbook);

ritorna:

[Object {name = "Spiderman", value = "11"}, Object {name = "Marsipulami", value = "18"}, Object {name = "Garfield", value = "2"}]

Codice:

if (typeof Comicbook[3]=='undefined') {
    private_formArray[3] = new Object();
    private_formArray[3]["name"] = "Peanuts";
    private_formArray[3]["value"] = "12";
}

verrà aggiunto Object {name="Peanuts", value="12"}all'oggetto Comicbook

Sia obj['key3'] = value3o obj.key3 = value3aggiungerà la nuova coppia al obj.

Tuttavia, so che jQuery non è stato menzionato, ma se lo stai usando, puoi aggiungere l'oggetto $.extend(obj,{key3: 'value3'}). Per esempio:

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. estendere (target [, object1] [, objectN]) fonde il contenuto di due o più oggetti insieme nel primo oggetto.

E consente anche aggiunte / modifiche ricorsive con $.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>

Un modo breve ed elegante nella prossima specifica Javascript (fase 3 candidata) è:

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

Una discussione più approfondita è disponibile in Object spread vs Object.assign e sul sito del Dr. Axel Rauschmayers .

Funziona già in node.js dalla versione 8.6.0.

Vivaldi, Chrome, Opera e Firefox nelle versioni aggiornate conoscono anche questa funzione, ma Mirosoft non lo fa fino ad oggi, né in Internet Explorer né in 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);
    });

Uscita in questo modo: -

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

Puoi aggiungerlo in questo modo:

arr['key3'] = value3;

o in questo modo:

arr.key3 = value3;

Le risposte che suggeriscono di digitare l'oggetto con la variabile key3funzionerebbero solo se il valore di key3fosse 'key3'.

Secondo gli accessori di proprietà definiti in ECMA-262 ( http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf , P67), ci sono due modi in cui puoi fare per aggiungere proprietà a esiste un oggetto. In tutti e due i modi, il motore Javascript li tratterà allo stesso modo.

Il primo modo è usare la notazione punto:

obj.key3 = value3;

Ma in questo modo, dovresti usare un IdentifierName dopo la notazione punto.

Il secondo modo è usare la notazione parentesi:

obj["key3"] = value3;

e un'altra forma:

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

In questo modo, è possibile utilizzare un'espressione (includere IdentifierName ) nella notazione parentesi.

Possiamo farlo anche in questo modo.

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

Dal momento che è una questione di passato ma il problema del presente. Suggerirei un'altra soluzione: basta passare la chiave e i valori alla funzione e otterrai un oggetto mappa.

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

Per anteporre una coppia chiave-valore a un oggetto in modo che for in lavori con quell'elemento, per prima cosa procedi nel seguente modo:

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

Il modo migliore per ottenere lo stesso è indicato di seguito:

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

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

//console.log(obj);

È possibile creare un nuovo oggetto utilizzando la {[key]: value}sintassi:

const foo = {
  a: 'key',
  b: 'value'
}

const bar = {
  [foo.a]: foo.b
}

console.log(bar); // {key: 'value'}
console.log(bar.key); // value

const baz = {
  ['key2']: 'value2'
}

console.log(baz); // {key2: 'value2'}
console.log(baz.key2); // value2

Con la sintassi precedente ora puoi usare la sintassi diffusa {...foo, ...bar}per aggiungere un nuovo oggetto senza mutare il tuo vecchio valore:

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

const bar = {...foo, ...{['c']: 3}};

console.log(bar); // {a: 1, b: 2, c: 3}
console.log(bar.c); // 3