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

Der Spread-Operator ist eine nützliche und schnelle Syntax zum Hinzufügen von Elementen zu Arrays, zum Kombinieren von Arrays oder Objekten und zum Verteilen eines Arrays auf die Argumente einer Funktion. ES2018 bietet nun die Möglichkeit, Eigenschaften auf Objektliterale zu verteilen. Er kopiert seine eigenen aufzählbaren Eigenschaften aus einem bereitgestellten Objekt in ein neues Objekt.

Die Spread-Syntax ist nützlich, um die Eigenschaften und Methoden von Objekten in einem neuen Objekt zu kombinieren:

Sie können eine Eigenschaft in einem Objekt wie folgt hinzufügen

const obj1 = {hello: ""};
const obj2 = {...obj1, laugh: "" };
console.log('obj1', obj1)
console.log('obj2', obj2)

Sie können Objekte auch wie folgt kombinieren

const objectOne = {hello: ""}
const objectTwo = {world: ""}
const objectThree = {...objectOne, ...objectTwo, laugh: ""}
console.log(objectThree) // Object { hello: "", world: "", laugh: "" }
const objectFour = {...objectOne, ...objectTwo, laugh: () => {console.log("".repeat(5))}}
objectFour.laugh() //

Answer 2

arr.key3 = value3;

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

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

aber es ist trotzdem nicht richtig. Es sollte eigentlich lauten:

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

Answer 3

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

Answer 4

Einfach Eigenschaften hinzufügen:

Und wir wollen hinzufügen prop2 : 2 zu diesem Objekt, sind dies die bequemsten Optionen:

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

Welchen verwenden wir dann?

Der Punkt-Operator ist eine sauberere Syntax und sollte als Standard verwendet werden (imo). Der Punkt-Operator ist jedoch nicht in der Lage, dynamische Schlüssel zu einem Objekt 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 wollen, sind dies die bequemsten Optionen:

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

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

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

   console.log(object2);

2. Operator für die Objektausbreitung ...

   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 imo als Standard verwendet werden. Vergessen Sie nicht, diese Syntax in eine Syntax zu übersetzen, die von allen Browsern unterstützt wird, da sie relativ neu ist.
• Object.assign() ist dynamischer, weil wir Zugriff auf alle Objekte haben, die als Argumente übergeben werden, und sie manipulieren können, bevor sie dem neuen Objekt zugewiesen werden.

Answer 5

Ich weiß, dass es bereits eine akzeptierte Antwort auf diese Frage gibt, aber ich dachte, ich dokumentiere meine Idee irgendwo. Bitte [Leute] fühlen Sie sich frei, Löcher in diese Idee zu stoßen, da ich nicht sicher bin, ob es die beste Lösung ist... aber ich habe dies gerade vor ein paar Minuten zusammengesetzt:

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 die Prototyp-Funktion Folgendes zurückgibt this können Sie weiterhin die Kette .push an das Ende Ihrer obj variabel: obj.push(...).push(...).push(...);

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