Hier ist mein Objektliteral:

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

Wie kann ich Feld hinzufügen key3mit value3dem Objekt?

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

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

Punktnotation verwenden:

obj.key3 = "value3";

Verwenden der eckigen Klammer:

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 echtes JavaScript-Array kann wie folgt erstellt werden:

Die Array-Literal-Notation:

var arr = [];

Die Array-Konstruktor-Notation:

var arr = new Array();

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

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

Es überschreibt destmit Eigenschaften und Werten von (wie viele) Quellobjekten auch und gibt dann zurück dest.

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

Live Beispiel

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

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

Antwort für das Jahr 2018: Objektverbreitungsoperator {...}

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

Von MDN :

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

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

Beachten Sie, dass Object.assign()Trigger - Setter während Spread Syntax nicht.

Live Beispiel

Es funktioniert in aktuellem Chrome und aktuellem 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 Jahr 2019

Objektzuweisungsoperator += :

obj += {key3: "value3"};

Ups ... ich wurde mitgerissen. Der Schmuggel von Informationen aus der Zukunft ist illegal. Ordentlich verdeckt!

Ich habe LoDash / Underscore beim Schreiben größerer Projekte geliebt .

Hinzufügen von obj['key']oder obj.keysind alle solide reine JavaScript-Antworten. Sowohl die LoDash- als auch die Underscore-Bibliothek bieten jedoch 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 spezifische Funktionen, die möglicherweise nützlich sind und Funktionen bieten, die dem Gefühl von ähneln arr.push(). Weitere Informationen finden Sie in den Dokumenten. Dort finden Sie einige gute Beispiele.

_.merge (nur Lodash)

Das zweite Objekt überschreibt das Basisobjekt oder fügt es hinzu. undefinedWerte 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 / _.assign

Das zweite Objekt überschreibt das Basisobjekt oder fügt es hinzu. undefinedwird 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}

_.defaults

Das zweite Objekt enthält Standardeinstellungen, die dem Basisobjekt hinzugefügt werden, wenn sie nicht vorhanden sind. undefinedWerte werden kopiert, wenn der Schlüssel bereits vorhanden ist.

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 sich lohnen, jQuery.extend zu erwähnen. Es funktioniert ähnlich wie _.merge und ist möglicherweise eine bessere Option, wenn Sie jQuery bereits verwenden.

Das zweite Objekt überschreibt das Basisobjekt oder fügt es hinzu. undefinedWerte 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 kann erwähnenswert sein, das Objekt ES6 / ES2015 Object.assign zu erwähnen. Es funktioniert ähnlich wie _.merge und ist möglicherweise die beste Option, wenn Sie bereits eine ES6 / ES2015-Polyfüllung wie Babel verwenden, wenn Sie sich selbst polyfillen möchten .

Das zweite Objekt überschreibt das Basisobjekt oder fügt es hinzu. undefinedwird 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}

Sie können eine dieser Optionen verwenden (vorausgesetzt, key3 ist der akute Schlüssel, den Sie verwenden möchten).

arr[ 'key3' ] = value3;

oder

arr.key3 = value3;

Wenn key3 eine Variable ist, sollten Sie Folgendes tun:

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

Danach arr.a_keywürde das Anfordern den Wert value3eines Literals zurückgeben 3.

arr.key3 = value3;

weil dein arr nicht wirklich ein Array ist ... Es ist ein Prototyp-Objekt. Das reale 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}];

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

Einfach Eigenschaften hinzufügen:

Und wir möchten prop2 : 2diesem Objekt hinzufügen , dies sind die bequemsten Optionen:

1. Punktoperator: object.prop2 = 2;
2. eckige Klammern: object['prop2'] = 2;

Welches verwenden wir dann?

Der Punktoperator hat eine sauberere Syntax und sollte als Standard (imo) verwendet werden. Der Punktoperator ist jedoch nicht in der Lage, einem Objekt dynamische Schlüssel hinzuzufügen, was in einigen Fällen sehr nützlich sein kann. Hier ist ein Beispiel:

const obj = {
  prop1: 1
}

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

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

console.log(obj);

Objekte zusammenführen:

Wenn wir die Eigenschaften von 2 Objekten zusammenführen möchten, sind dies die bequemsten Optionen:

1. Object.assign(), nimmt ein Zielobjekt als Argument und ein oder mehrere Quellobjekte und führt sie zusammen. Zum Beispiel:

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

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

console.log(object2);

2. Objektverbreitungsoperator ...

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

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

console.log(newObj);

Welches verwenden wir?

• Die Spread-Syntax ist weniger ausführlich und sollte als Standard-Imo verwendet werden. Vergessen Sie nicht, diese Syntax in eine Syntax umzuwandeln, die von allen Browsern unterstützt wird, da sie relativ neu ist.
• Object.assign() ist dynamischer, da wir Zugriff auf alle Objekte haben, die als Argumente übergeben werden, und diese bearbeiten können, bevor sie dem neuen Objekt zugewiesen werden.

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

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

Sie würden es folgendermaßen nutzen:

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

Da die Prototypfunktion zurückkehrt this, können Sie die Ketten .pushbis zum Ende Ihrerobj Variablen fortsetzen:obj.push(...).push(...).push(...);

Eine weitere Funktion besteht darin, dass Sie ein Array oder ein anderes Objekt als Wert in den Push-Funktionsargumenten übergeben können. Ein funktionierendes Beispiel finden Sie in meiner Geige: http://jsfiddle.net/7tEme/

Performance

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

Schlussfolgerungen

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

Einzelheiten

In Snippet dort getesteten Lösung presended sind, können Sie Test auf Ihrem Rechner prefrom HIER

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!

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

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

Objekt drucken

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

Schlüssel drucken

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

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

Zwei am häufigsten verwendete Methoden, die bereits in den meisten Antworten erwähnt wurden

obj.key3 = "value3";

obj["key3"] = "value3";

Eine weitere Möglichkeit, eine Eigenschaft zu definieren, ist die Verwendung von 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
});

Diese Methode ist nützlich, wenn Sie beim Definieren von Eigenschaften mehr Kontrolle haben möchten. Die definierte Eigenschaft kann vom Benutzer als aufzählbar, konfigurierbar und beschreibbar festgelegt werden.

Ihr Beispiel zeigt ein Objekt, kein Array. In diesem Fall besteht die bevorzugte Möglichkeit, einem Objekt ein Feld hinzuzufügen, darin, es einfach wie folgt zuzuweisen:

arr.key3 = value3;

Wird von den meisten Browsern unterstützt und prüft, ob ein Objektschlüssel verfügbar ist oder nicht, den Sie hinzufügen möchten. Wenn verfügbar , überschreibt er den vorhandenen Schlüsselwert und ist nicht verfügbar. Es wird ein Schlüssel mit Wert hinzugefügt

Beispiel 1

let my_object = {};

// now i want to add something in it  

my_object.red = "this is red color";

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

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

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

Wenn Sie mehrere anonyme Objektliterale in einem Objekt haben und ein weiteres Objekt mit Schlüssel / Wert-Paaren hinzufügen möchten, gehen Sie folgendermaßen vor:

Firebug 'das Objekt:

console.log(Comicbook);

kehrt zurück:

[Objekt {Name = "Spiderman", Wert = "11"}, Objekt {Name = "Marsipulami", Wert = "18"}, Objekt {Name = "Garfield", Wert = "2"}]

Code:

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

wird Object {name="Peanuts", value="12"}dem Comicbook-Objekt hinzugefügt

Entweder obj['key3'] = value3oder obj.key3 = value3wird das neue Paar zum hinzufügenobj .

Ich weiß jedoch, dass jQuery nicht erwähnt wurde, aber wenn Sie es verwenden, können Sie das Objekt durch hinzufügen $.extend(obj,{key3: 'value3'}). Z.B:

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. verlängern (Ziel [, Objekt1] [, ObjektN]) den Inhalt von zwei oder mehr Objekten zusammen zum ersten Objekt.

Außerdem können rekursive Ergänzungen / Änderungen vorgenommen werden mit $.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>

Ein kurzer und eleganter Weg in der nächsten Javascript-Spezifikation (Kandidatenstufe 3) ist:

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

Eine ausführlichere Diskussion finden Sie in Object Spread vs Object.assign und auf der Website von Dr. Axel Rauschmayers .

Es funktioniert bereits in node.js seit Release 8.6.0.

Vivaldi, Chrome, Opera und Firefox in aktuellen Versionen kennen diese Funktion ebenfalls, Mirosoft jedoch bis heute weder im Internet Explorer noch 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);
    });

Ausgabe wie folgt: -

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

Sie können es entweder folgendermaßen hinzufügen:

arr['key3'] = value3;

oder so:

arr.key3 = value3;

Die Antworten, die vorschlagen, mit der Variablen in das Objekt einzugeben key3, funktionieren nur, wenn der Wert von key3war 'key3'.

Gemäß den in ECMA-262 ( http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf) definierten Property Accessors , P67) gibt es zwei Möglichkeiten, Eigenschaften hinzuzufügen ein existierendes Objekt. Alle diese beiden Möglichkeiten werden von der Javascript-Engine gleich behandelt.

Der erste Weg ist die Verwendung der Punktnotation:

obj.key3 = value3;

Auf diese Weise sollten Sie nach der Punktnotation einen IdentifierName verwenden.

Die zweite Möglichkeit ist die Verwendung der Klammernotation:

obj["key3"] = value3;

und eine andere Form:

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

Auf diese Weise können Sie einen Ausdruck (einschließlich IdentifierName ) in der Klammernotation verwenden.

Das können wir auch so machen.

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

Da ist es eine Frage der Vergangenheit, aber das Problem der Gegenwart. Würde eine weitere Lösung vorschlagen: Übergeben Sie einfach den Schlüssel und die Werte an die Funktion und Sie erhalten ein Kartenobjekt.

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

Um einem Objekt ein Schlüssel-Wert-Paar voranzustellen, damit das for in mit diesem Element funktioniert, gehen Sie zunächst folgendermaßen vor:

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

Der beste Weg, dies zu erreichen, ist unten angegeben:

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

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

//console.log(obj);

Sie können ein neues Objekt mithilfe der folgenden {[key]: value}Syntax erstellen :

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

Mit der vorherigen Syntax können Sie jetzt die Spread-Syntax verwenden {...foo, ...bar}, um ein neues Objekt hinzuzufügen, ohne Ihren alten Wert zu ändern:

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