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

Question

Hier ist mein wörtliches Objekt:

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

Wie kann ich ein Feld hinzufügen? key3 avec value3 zum Objekt?

Answer 1

Es gibt zwei Möglichkeiten zum Hinzufügen neuer Eigenschaften zu einem Objekt:

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

Verwendung der Punktnotation:

obj.key3 = "value3";

Die Notation in eckigen Klammern:

obj["key3"] = "value3";

Die erste Form wird verwendet, wenn Sie den Namen der Immobilie 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");

---

A real JavaScript-Array kann entweder mit:

Die Array-Literal-Notation:

var arr = [];

Die Notation des Array-Konstruktors:

var arr = new Array();

Answer 2

Jahr 2017 Antwort: Object.assign()

Object.assign(dest, src1, src2, ...) führt Objekte zusammen.

Sie überschreibt dest mit Eigenschaften und Werten von (beliebig vielen) Quellobjekten und gibt dann dest .

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

Live-Beispiel

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

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

Jahr 2018 Antwort: object spread operator {...}

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

Desde MDN :

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

Das flache Klonen (ohne Prototyp) oder Zusammenführen von Objekten ist jetzt mit einer kürzeren Syntax möglich als Object.assign() .

Beachten Sie, dass Object.assign() Auslöser Einsteller während dies bei der Spread-Syntax nicht der Fall ist.

Live-Beispiel

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

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

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

Jahr 2019 Antwort

Objektzuweisungsoperator += :

obj += {key3: "value3"};

Ups... Ich habe mich hinreißen lassen. Das Schmuggeln von Informationen aus der Zukunft ist illegal. Ordnungsgemäß unkenntlich gemacht!

Answer 3

Ich habe mich mit dem LoDash / Unterstrich beim Schreiben größerer Projekte.

Hinzufügen durch obj['key'] o obj.key sind alle solide reine JavaScript-Antworten. Allerdings bieten die beiden Bibliotheken LoDash und Underscore viele zusätzliche praktische Funktionen für die Arbeit mit Objekten und Arrays im Allgemeinen.

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

Je nachdem, wonach Sie suchen, gibt es zwei spezielle Funktionen, die sich gut nutzen lassen und eine ähnliche Funktionalität wie die von arr.push() . Weitere Informationen finden Sie in den Dokumenten, dort gibt es einige gute Beispiele.

_.merge (nur Lodash)

Das zweite Objekt wird das Basisobjekt überschreiben oder ergänzen. 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"} 

_.erweitern / _.zuweisen

Das zweite Objekt wird das Basisobjekt überschreiben oder ergänzen. undefined kopiert werden.

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}

_.Voreinstellungen

Das zweite Objekt enthält Standardwerte, die dem Basisobjekt hinzugefügt werden, wenn sie nicht vorhanden sind. undefined Die 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"}

$.verlängern

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

Das zweite Objekt wird das Basisobjekt überschreiben oder ergänzen. 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"}

Object.assign()

Es ist vielleicht erwähnenswert, dass ES6/ES2015 Object.assign ähnlich wie _.merge funktioniert und möglicherweise die beste Option ist, wenn Sie bereits ein ES6/ES2015 Polyfill wie Babel wenn Sie Polyfill selbst .

Das zweite Objekt wird das Basisobjekt überschreiben oder ergänzen. undefined kopiert werden.

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}

Answer 4

Sie können einen der folgenden Schlüssel verwenden (vorausgesetzt, key3 ist der tatsächliche Schlüssel, den Sie verwenden möchten)

arr[ 'key3' ] = value3;

o

arr.key3 = value3;

Wenn key3 eine Variable ist, dann sollten Sie das tun:

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

Danach wird der Antrag arr.a_key würde den Wert von value3 eine wörtliche 3 .

Answer 5

Leistung

Heute 2020.01.14 führe ich Tests auf MacOs HighSierra 10.13.6 auf Chrome v78.0.0, Safari v13.0.4 und Firefox v71.0.0, für ausgewählte Lösungen. Ich unterteile die Lösungen in veränderbare (erster Buchstabe M) und unveränderbare (erster Buchstabe I). Ich biete auch einige unveränderliche Lösungen (IB, IC, ID/IE), die noch nicht in den Antworten auf diese Frage veröffentlicht wurden

Schlussfolgerungen

• die schnellsten veränderbaren Lösungen sind viel schneller als die schnellsten nicht veränderbaren (>10x)
• klassischer veränderlicher Ansatz wie obj.key3 = "abc" (MA,MB) ist am schnellsten
• für unveränderliche Lösungen die {...obj, key3:'abc'} y Object.assign (IA,IB) sind am schnellsten
• überraschenderweise gibt es unveränderbare Lösungen, die schneller sind als einige veränderbare Lösungen für Chrome (MC-IA) und Safari (MD-IB)

Einzelheiten

Im folgenden Snippet ist eine getestete Lösung angegeben, die Sie auf Ihrem Rechner testen können HIER (Update 2022: Ein großer Dank geht an Josh DeLong der die Tests von jspref.com, die nicht mehr funktionieren, auf jsbench.me umschreibt)

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!