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

https://stackoverflow.com/questions/1168807

19-09-2019
|

Frage

Hier ist mein Objektliteral:

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

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

Lösung

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

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

Punktnotation verwenden:

obj.key3 = "value3";

Mit eckiger Klammer-Notation:

obj["key3"] = "value3";

Die erste Form wird verwendet, wenn Sie den Namen der Eigenschaft kennen. Die zweite Form verwendet wird, 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 kann JavaScript-Array konstruiert werden, entweder:

Die Arrayliteral Notation:

var arr = [];

Die Array-Konstruktor Notation:

var arr = new Array();

Andere Tipps

Jahr 2017 Antwort: `Object.assign()`

Object.assign (DEST, src1, src2, ...) verschmilzt Objekte.

Sie überschreibt dest mit Eigenschaften und Werten (wie viele) Quellobjekte, dann kehrt dest.

Die Object.assign() Methode wird verwendet, um die Werte aller enumerable eigenen Eigenschaften von einem oder mehreren Quellobjekte zu einem Zielobjekt zu kopieren. Es wird 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: Objekt Ausbreitung Operator `{...}`

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

MDN :

Es Kopien besitzen enumerable Eigenschaften aus einem bereitgestellte Objekt auf ein neues Objekt.

Shallow-Klonen (ohne Prototyp) oder Verschmelzen von Objekten ist nun möglich, eine kürzere als die Syntax Object.assign() .

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

Live-Beispiel

Es funktioniert in der aktuellen Chrome und aktuelle Firefox. Sie sagen, dass es nicht in der aktuellen Rand nicht funktioniert.

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

Oops ... Ich habe weggetragen. Schmuggel von Informationen aus der Zukunft ist illegal. Ordnungsgemäß verdeckt!

Ich habe gern die gewachsen LoDash / Unders wenn größere Projekte zu schreiben.

durch obj['key'] oder obj.key Hinzufügen sind alle festen reinen JavaScript Antworten. Doch beide LoDash und Unders Bibliotheken haben viele weitere nützliche Funktionen zur Verfügung stellen, wenn mit Objekten und Arrays im Allgemeinen zu arbeiten.

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

Je was Sie suchen, gibt es zwei spezifische Funktionen, die schön sein können und ähnlich wie die das Gefühl von arr.push() geben Funktionalität zu nutzen. Für weitere Informationen die Dokumentation überprüfen, sie haben dort einige große Beispiele.

_.merge (Lodash nur)

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

_.extend / _.assign

Das zweite Objekt wird das Basisobjekt überschreiben oder ergänzen. undefined 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 Standardwerte, die auf Basisobjekt hinzugefügt werden, wenn sie nicht existieren. undefined Werte kopiert werden, wenn 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 zu erwähnen jQuery.extend sein, 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 kann sich lohnen, die ES6 / ES2015 Object.assign zu erwähnen, es funktioniert ähnlich wie _.merge und kann die beste Option sein, wenn Sie bereits ein ES6 / ES2015 polyfill verwenden wie Babel wenn Sie wollen POLYfill selbst .

Das zweite Objekt wird das Basisobjekt überschreiben oder ergänzen. undefined 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 entweder von diesen verwendet werden (vorausgesetzt key3 ist die acutal Schlüssel Sie verwenden möchten)

arr[ 'key3' ] = value3;

oder

arr.key3 = value3;

Wenn key3 eine Variable ist, dann sollten Sie tun:

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

Nach diesem arr.a_key anfordernden würde den Wert von value3 zurückkehren, eine wörtliche 3.

arr.key3 = value3;

, weil Ihr arr nicht wirklich ein Array ist ... Es ist ein Prototyp-Objekt. Das eigentliche 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});

Ich weiß, dass es bereits eine akzeptierte Antwort für diese, aber ich dachte, dass ich irgendwo meine Idee dokumentieren würde. Bitte [Menschen] gerne Löcher in dieser Idee zu stecken, wie ich bin nicht sicher, ob es die beste Lösung ist ... aber ich dies nur ein paar Minuten zusammen vor:

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 der Prototyp-Funktion zurückkehr this Sie Kette .push die bis zum Ende Ihrer obj Variable weiter: obj.push(...).push(...).push(...);

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

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

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

ein neues Objekt mit der letzten Klasse erstellen:

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

das Objekt Drucken

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

Drucken einer Taste

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

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

Einfach Eigenschaften hinzufügen:

Und wir wollen prop2 : 2 zu diesem Objekt hinzuzufügen, das sind die besten Optionen:

Dot Operator: object.prop2 = 2;
eckige Klammern: object['prop2'] = 2;

Ja, welches verwenden wir dann?

Der Punkt-Operator ist saubere Syntax und soll als Standard (imo) verwendet werden. Allerdings ist der Punkt-Operator nicht in der Lage des Hinzufügen dynamischen Schlüssels zu einem Objekt, die in einigen Fällen sehr nützlich sein können. Hier 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 Merging:

Wenn wir wollen die Eigenschaften von zwei Objekten, das sind die besten Optionen fusionieren:

Object.assign(), nimmt ein Zielobjekt als Argument, und ein oder mehr Quellobjekte und wird sie miteinander verschmelzen. Zum Beispiel:

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

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

console.log(object2);

Objekt Ausbreitung Operator ...

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

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

console.log(newObj);

Was man verwenden wir?

Die Verbreitung Syntax ist weniger ausführlich und hat sollte imo als Standard verwendet werden. Sie nicht vergessen haben, diese Syntax Syntax transpile, die von allen Browsern unterstützt wird, weil es relativ neu ist.
ist Object.assign() dynamischer, weil wir Zugriff auf alle Objekte haben, die in als Argumente übergeben werden und sie manipulieren, bevor sie zu dem neuen Objekt zugewiesen bekommen.

Ihr Beispiel zeigt ein Objekt, kein Array. In diesem Fall ist der bevorzugte Weg, um ein Feld zu einem Objekt hinzufügen, um es nur zuweisen, etwa so:

arr.key3 = value3;

Zwei am häufigsten verwendeten Möglichkeiten, bereits in den meisten Antworten erwähnt

obj.key3 = "value3";

obj["key3"] = "value3";

Eine weitere Möglichkeit, eine Eigenschaft zu definieren, wird unter 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 hilfreich, wenn Sie mehr Kontrolle haben wollen, während Eigenschaft definieren. Eigenschaft definiert als zählbare, konfigurierbar und beschreibbar durch den Benutzer eingestellt werden.

Falls Sie mehr anonymen Objektliterale innerhalb eines Objekts und wollen ein anderes Objekt, das Schlüssel / Wert-Paare hinzuzufügen, dies tun:

Firebug‘das Objekt:

console.log(Comicbook);

Rückgabe:

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

Code:

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

fügen Object {name="Peanuts", value="12"} zum Objekt Comicbook

Entweder obj['key3'] = value3 oder obj.key3 = value3 wird das neue Paar zum obj hinzuzufügen.

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

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. erweitern (Ziel [, object1] [, objectN]) verschmilzt der Inhalt von zwei oder mehr Objekten zusammen in das erste Objekt.

Und es ermöglicht auch rekursiv fügt / Änderungen 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>

Sie können entweder fügen Sie es auf diese Weise:

arr['key3'] = value3;

oder so:

arr.key3 = value3;

Die Antworten Keying in das Objekt mit der Variable key3 was darauf hindeutet, würden nur funktionieren, wenn der Wert von key3 'key3' ist.

Nach Eigenschaftenaccessoren definiert in ECMA-262 ( http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf , S67), gibt es zwei Möglichkeiten, wie Sie Eigenschaften hinzufügen zu tun auf ein Objekt existiert. Alle diese Zweiweg, die Javascript-Engine wird sie gleich behandeln.

Der erste Weg ist die Punktnotation zu verwenden:

obj.key3 = value3;

Aber auf diese Weise, sollten Sie eine IdentifierName nach Punktnotation.

Der zweite Weg ist Klammer-Notation zu verwenden:

obj["key3"] = value3;

und eine andere Form:

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

Auf diese Weise könnten Sie ein Expression (einschließlich IdentifierName ) in der Klammer-Notation.

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 aus: -

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

von den meisten Browsern unterstützt, und es wird geprüft, ob Objektschlüssel verfügbar ist oder nicht Sie hinzufügen möchten, wenn verfügbar es overides vorhandene Schlüsselwert und nicht verfügbar es hinzufügen Schlüssel mit dem Wert

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

Wir können dies tun, auf diese Weise zu.

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

Eine kurze und elegante Art und Weise in der nächsten Javascript-Spezifikation (Kandidat Stufe 3):

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

Eine tiefere Diskussion kann in Objekt Ausbreitung vs Object.assign zu finden und auf Dr. Axel Rauschmayers Website .

Es funktioniert bereits in node.js seit Release 8.6.0.

Vivaldi, Chrome, Opera und Firefox in bis Releases bisher kennt diese Funktion auch, aber Mirosoft nicht bis heute, weder im Internet Explorer noch in Rande.

Um prepend ein Schlüssel-Wert-Paar zu einem Objekt, so dass die in mit diesem Elemente arbeitet zuerst tun:

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

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

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

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

//console.log(obj);

Seit seiner Frage der Vergangenheit, sondern das Problem der Gegenwart. Würde eine weitere Lösung vorschlagen. Einfach den Schlüssel und Werte an die Funktion übergeben und Sie erhalten eine Karte Objekt erhalten

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

arr.push({key3: value3});

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow

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

Punktnotation verwenden:

Mit eckiger Klammer-Notation:

Die Arrayliteral Notation:

Die Array-Konstruktor Notation:

Jahr 2017 Antwort: Object.assign()

Live-Beispiel

Jahr 2018 Antwort: Objekt Ausbreitung Operator {...}

Live-Beispiel

Jahr 2019 Antwort

_.merge (Lodash nur)

_.extend / _.assign

_.defaults

$ .extend

Object.assign ()

Einfach Eigenschaften hinzufügen:

Objekte Merging:

Jahr 2017 Antwort: `Object.assign()`

Jahr 2018 Antwort: Objekt Ausbreitung Operator `{...}`