Come posso aggiungere una coppia chiave/valore a un oggetto JavaScript?

https://stackoverflow.com/questions/1168807

19-09-2019
|

Domanda

Qui è il mio oggetto letterale:

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

Come posso aggiungere {key3: value3} sull'oggetto?

Soluzione

Ci sono due modi per aggiungere nuove Proprietà per 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 è utilizzato quando si conosce il nome della proprietà. La seconda forma è utilizzata quando il nome della proprietà viene determinato dinamicamente. Come in questo esempio:

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

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

A reale array JavaScript può essere costruito utilizzando:

La notazione letterale di Array:

var arr = [];

La notazione di costruzione Array:

var arr = new Array();

Altri suggerimenti

Anno 2017 risposta: `Object.assign()`

Oggetto.assegnare(dest, src1, src2, ...) unisce gli oggetti.

Sovrascrive dest con le proprietà e i valori di (x) fonte oggetti, poi torna dest.

Il Object.assign() il metodo viene utilizzato per copiare i valori di tutti enumerabile proprietà di uno o più oggetti di origine di un oggetto di destinazione.Verrà restituito l'oggetto di destinazione.

L'esempio vivo

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

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

Anno 2018 risposta:oggetto di diffusione operatore `{...}`

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

Da MDN:

Copia proprio enumerabile proprietà da un oggetto a un oggetto nuovo.

Superficiale-la clonazione (escluso il prototipo) o la fusione di oggetti è ora possibile con un breve sintassi di Object.assign().

Nota che Object.assign() trigger setter considerando che la diffusione di sintassi non.

L'esempio vivo

Funziona in Chrome corrente e corrente di Firefox.Dicono che non funziona in corrente di Bordo.

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

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

Anno 2019 risposta

~~Oggetto operatore di assegnazione +=:~~

~~obj += {key3: "value3"};~~

Oops...Mi ha portato via.Il contrabbando di informazioni dal futuro è illegale.Debitamente oscurato!

Sono affezionato del LoDash / sottolineatura durante la scrittura di progetti di grandi dimensioni.

L'aggiunta da obj['key'] o obj.key sono tutti solidi risposte JavaScript puri. Tuttavia entrambe le librerie LoDash e sottolineatura forniscono molte comode funzioni aggiuntive quando si lavora con gli oggetti e array in generale.

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

A seconda che cosa state cercando, ci sono due funzioni specifiche che potrebbero essere piacevole da utilizzare e dare funzionalità simili a quelle la sensazione di arr.push(). Per maggiori informazioni controllare la documentazione, hanno alcuni grandi esempi lì.

_.merge (Lodash solo)

Il secondo oggetto sovrascriverà o aggiungere all'oggetto base. I valori undefined 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 sovrascriverà o aggiungere all'oggetto base. undefined verrà 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 le impostazioni predefinite che verranno aggiunti a oggetto di base se non esistono. valori undefined 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, può essere utile ricordare jQuery.extend, funziona simile a _.merge e può essere una scelta migliore se già si utilizza jQuery.

Il secondo oggetto sovrascriverà o aggiungere all'oggetto base. I valori undefined 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 ()

Può valere la pena menzionare l'ES6 / ES2015 Object.assign, esso funzioni simili a _.merge e può essere la migliore opzione se già si utilizza un / ES2015 polyfill ES6 come Babel se si desidera polyfill te stesso .

Il secondo oggetto sovrascriverà o aggiungere all'oggetto base. undefined verrà 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}

Si potrebbe utilizzare uno di questi (key3 fornite sono la chiave acutal che si desidera utilizzare)

arr[ 'key3' ] = value3;

arr.key3 = value3;

Se key3 è una variabile, allora si dovrebbe fare:

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

Dopo questo, chiedendo arr.a_key sarebbe restituire il valore di value3, un 3 letterale.

arr.key3 = value3;

perché il vostro arr non è in realtà una serie ... E 'un oggetto prototipo. La vera matrice potrebbe essere:

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

ma non è ancora a destra. Dovrebbe in realtà 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});

So che c'è già una risposta accettato per questo, ma ho pensato di documentare la mia idea da qualche parte. Si prega di [persone] si sentono liberi di colpire i fori in questa idea, come io non sono sicuro se è la soluzione migliore ... ma ho appena messo questo insieme pochi minuti fa:

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

Si potrebbe utilizzarlo in questo modo:

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

Dato che, la funzione prototipo è tornando this è possibile continuare a catena .push di alla fine della variabile obj: obj.push(...).push(...).push(...);

Un'altra caratteristica è che si può passare un array o un altro oggetto come il valore gli argomenti della funzione push. Vedere il mio violino per un esempio di lavoro: http://jsfiddle.net/7tEme/

È possibile creare una classe con la risposta di @ Ionuţ G. Stan

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

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

La stampa l'oggetto

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

Stampa di un tasto

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

Sono novizio in javascript, i commenti sono i benvenuti. Funziona per me.

La semplice aggiunta di proprietà:

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

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

Quindi, quale facciamo a usare allora?

L'operatore punto è sintassi più pulito e dovrebbe essere usato come un default (IMO). Tuttavia, l'operatore punto non è in grado di aggiungere chiavi dinamiche di un oggetto, 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);

Fusione oggetti:

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

Object.assign(), prende un oggetto di destinazione come argomento, e uno o più oggetti di origine e li fondono insieme. Ad esempio:

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

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

console.log(object2);

operatore oggetto diffusione ...

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

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

console.log(newObj);

Quale usiamo?

La sintassi diffusione è meno prolisso e ha dovrebbe essere utilizzato come default imo. Non ha dimenticato di transpile questa sintassi per la sintassi che è supportato da tutti i browser, perché è relativamente nuovo.
Object.assign() è più dinamico, perché abbiamo accesso a tutti gli oggetti che vengono passati come argomenti e possono manipolare loro prima di arrivare assegnati al nuovo oggetto.

Il tuo esempio mostra un oggetto, non un array. In questo caso, il modo preferito per aggiungere un campo a un oggetto è assegnare solo ad esso, in questo modo:

arr.key3 = value3;

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

obj.key3 = "value3";

obj["key3"] = "value3";

Un altro modo per definire una proprietà sta usando 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 di proprietà. definito proprietà può essere impostata come enumerabile, configurabile e scrivibile dall'utente.

Nel caso in cui si dispone di più letterali oggetto anonimo all'interno di un oggetto e si desidera aggiungere un altro oggetto che contiene coppie chiave / valore, fare questo:

Firebug' l'oggetto:

console.log(Comicbook);

restituisce:

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

aggiungerà Object {name="Peanuts", value="12"} all'Oggetto Comicbook

In entrambi i obj['key3'] = value3 o obj.key3 = value3 aggiungerà la nuova coppia al obj.

Tuttavia, so jQuery non è stato menzionato, ma se lo si usa, è possibile aggiungere l'oggetto attraverso $.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]) unioni il contenuto di due o più oggetti insieme nel primo oggetto.

E permette anche ricorsivo aggiunge / modifiche 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>

È possibile aggiungere in questo modo:

arr['key3'] = value3;

o in questo modo:

arr.key3 = value3;

Le risposte suggeriscono keying in oggetto con il key3 variabile sarebbe funzionano solo se il valore di key3 era 'key3'.

Secondo Proprietà accessor definito in ECMA-262 ( http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf , P67), ci sono due modi che potete fare per aggiungere proprietà ad un oggetto esiste. Tutte queste due vie, il motore Javascript tratterà loro lo stesso.

Il primo modo è quello di utilizzare la notazione dot:

obj.key3 = value3;

Ma in questo modo, si dovrebbe utilizzare un IdentifierName dopo notazione del punto.

Il secondo modo è quello di usare la notazione staffa:

obj["key3"] = value3;

e un'altra forma:

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

In questo modo, si potrebbe usare un L'espressione (comprendono IdentifierName ) nella notazione staffa.

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

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

supportato dalla maggior parte dei browser, e controlla se la chiave oggetto disponibile o non si desidera aggiungere, se disponibili è overides valore della chiave esistente e non disponibili è 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" 
//            }   
//       }

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

Un modo breve ed elegante nel prossimo specifica Javascript (stadio candidato 3) è:

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

Una discussione più approfondita può essere trovato in vs Object.assign e Dr. Axel Rauschmayers sito .

Si lavora già in node.js dalla release 8.6.0.

Vivaldi, Chrome, Opera e Firefox in un massimo di data di release sanno questa caratteristica anche, ma non lo fanno Mirosoft fino ad oggi, né in Internet Explorer né Edge.

Per prepend una coppia valore-chiave ad un oggetto in modo che il dal lavora con tale primo elemento fare questo:

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

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

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

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

//console.log(obj);

Fin dalla sua una domanda del passato, ma il problema del presente. Vi suggerisco di più una soluzione:. Basta passare la chiave e valori per la funzione e si otterrà un oggetto della mappa

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

arr.push({key3: value3});

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow

Come posso aggiungere una coppia chiave/valore a un oggetto JavaScript?

usando la notazione punto:

usando la notazione parentesi quadra:

La notazione letterale di Array:

La notazione di costruzione Array:

Anno 2017 risposta: Object.assign()

L'esempio vivo

Anno 2018 risposta:oggetto di diffusione operatore {...}

L'esempio vivo

Anno 2019 risposta

_.merge (Lodash solo)

_.extend / _.assign

_.defaults

$ .extend

Object.assign ()

La semplice aggiunta di proprietà:

Fusione oggetti:

Anno 2017 risposta: `Object.assign()`

Anno 2018 risposta:oggetto di diffusione operatore `{...}`