Frage Wie kann ich einem JavaScript-Objekt ein Schlüssel / Wert-Paar hinzufügen?


Hier ist mein Objekt Literal:

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

Wie kann ich hinzufügen? {key3: value3} zum Objekt?


974
2017-07-22 23:21


Ursprung


Antworten:


Es gibt zwei Möglichkeiten, neue hinzuzufügen Eigenschaften zu einem Objekt:

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

Punktnotation verwenden:

obj.key3 = "value3";

Verwenden der eckigen Klammernotation:

obj["key3"] = "value3";

Das erste Formular wird verwendet, wenn Sie den Namen der Eigenschaft kennen. Die zweite Form wird verwendet, wenn der Name der Eigenschaft dynamisch bestimmt wird. Wie in diesem Beispiel:

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

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

EIN echt JavaScript-Arrays können mit folgenden Methoden erstellt werden:

Die Array-Literalnotation:

var arr = [];

Die Array-Konstruktornotation:

var arr = new Array();

1654
2017-07-22 23:25



Antwort für das Jahr 2017: Object.assign()

Objekt.Zuordnung (dest, src1, src2, ...) verbindet Objekte.

Es überschreibt dest mit Eigenschaften und Werten von (wie vielen) Quellobjekten, kehrt dann zurück dest.

Das Object.assign() Methode wird verwendet, um die Werte aller aufzählbaren eigenen Eigenschaften von einem oder mehreren Quellobjekten in ein Zielobjekt zu kopieren. Es wird das Zielobjekt zurückgeben.

Live-Beispiel

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

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

Antwort des Jahres 2018: Objektspreizungsoperator {...}

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

Von MDN:

Er kopiert eigene aufzählbare Eigenschaften von einem bereitgestellten Objekt auf ein neues Objekt.

Flaches Klonen (außer Prototyp) oder Zusammenführen von Objekten ist jetzt möglich, indem eine kürzere Syntax als verwendet wird Object.assign().

Beachten Sie, dass Object.assign() löst aus Setter während Spread-Syntax nicht.

Live-Beispiel

Es funktioniert im aktuellen Chrome und aktuellen Firefox. Sie sagen, dass es im aktuellen Edge nicht funktioniert.

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

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

Antwort für das Jahr 2019

Objektzuweisungsoperator  +=:

obj += {key3: "value3"};


81
2017-11-04 23:51



Ich habe das gefallen LoDash / Unterstreichen wenn Sie größere Projekte schreiben.

Hinzufügen von obj['key'] oder obj.key sind alle solide pure JavaScript-Antworten. Sowohl die LoDash- als auch die Underscore-Bibliotheken bieten jedoch viele zusätzliche praktische Funktionen beim Arbeiten mit Objekten und Arrays im Allgemeinen.

.push() ist für Arrays, nicht für Objekte.

Abhängig von dem, was Sie suchen, gibt es zwei spezifische Funktionen, die sich gut nutzen lassen und eine ähnliche Funktionalität bieten wie das Gefühl von arr.push(). Weitere Informationen finden Sie in den Dokumenten. Dort finden Sie einige gute Beispiele.

_.verschmelzen (Nur Lashash)

Das zweite Objekt wird überschrieben oder zum Basisobjekt hinzugefügt. undefined Werte werden nicht kopiert.

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 / _.zuweisen

Das zweite Objekt wird überschrieben oder zum Basisobjekt hinzugefügt. undefined wird kopiert.

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}

_.dedefaults

Das zweite Objekt enthält Standardwerte, die zum Basisobjekt hinzugefügt werden, wenn sie nicht vorhanden sind. undefined Werte werden kopiert, wenn der Schlüssel bereits existiert.

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

Darüber hinaus kann es sinnvoll sein, jQuery.extend zu erwähnen, es funktioniert ähnlich wie _.merge und ist möglicherweise eine bessere Option, wenn Sie bereits jQuery verwenden.

Das zweite Objekt wird überschrieben oder zum Basisobjekt hinzugefügt. undefined Werte werden nicht kopiert.

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

Objekt.Zuordnung ()

Erwähnenswert ist vielleicht die ES6 / ES2015 Object.assign, sie funktioniert ähnlich wie _.merge und ist möglicherweise die beste Option, wenn Sie bereits ein ES6 / ES2015 Polyfill verwenden Babel Wenn du möchtest füllen Sie sich selbst aus.

Das zweite Objekt wird überschrieben oder zum Basisobjekt hinzugefügt. undefined wird kopiert.

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}

77
2017-11-24 18:11



Sie können eine der beiden verwenden (vorausgesetzt, key3 ist der Schlüssel, den Sie verwenden möchten)

arr[ 'key3' ] = value3;

oder

arr.key3 = value3;

Wenn Schlüssel3 eine Variable ist, sollten Sie Folgendes tun:

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

Danach anfragen arr.a_key würde den Wert von zurückgeben value3, ein Literal 3.


62
2017-07-22 23:22



arr.key3 = value3;

weil Ihr arr nicht wirklich ein Array ist ... Es ist ein Prototyp-Objekt. Das wirkliche Array wäre:

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

aber es ist immer noch nicht richtig. Es sollte eigentlich sein:

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

26
2017-07-22 23:25



var employees = []; 
employees.push({id:100,name:'Yashwant',age:30});
employees.push({id:200,name:'Mahesh',age:35});

23
2017-10-27 17:49



Ich weiß, dass es bereits eine akzeptierte Antwort dafür gibt, aber ich dachte, ich würde meine Idee irgendwo dokumentieren. Bitte [Leute] fühlen sich frei, Löcher in dieser Idee zu stecken, da ich nicht sicher bin, ob es die beste Lösung ist ... aber ich habe das vor ein paar Minuten zusammengefügt:

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

Sie würden es auf diese Weise nutzen:

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

Da kehrt die Prototyp-Funktion zurück this Sie können weiter ketten .pushist bis zum Ende deines obj Variable: obj.push(...).push(...).push(...);

Ein weiteres Feature ist, dass Sie ein Array oder ein anderes Objekt als Wert in den Push-Funktionsargumenten übergeben können. Siehe meine Geige für ein funktionierendes Beispiel: http://jsfiddle.net/7tEme/


8
2018-06-26 18:34



Sie können eine Klasse mit der Antwort von erstellen @ Ionuţ G. Stan

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

Erstellen eines neuen Objekts mit der letzten Klasse:

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

Drucken des Objekts

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

Einen Schlüssel drucken

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

Ich bin Neuling in Javascript, Kommentare sind willkommen. Funktioniert bei mir.


8
2017-12-28 01:34