Hoe kan ik een sleutel/waarde-paar toevoegen aan een JavaScript-object?

Hier is mijn object letterlijk:

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

Hoe kan ik veld key3met value3aan het object toevoegen?


Antwoord 1, autoriteit 100%

Er zijn twee manieren om nieuwe eigenschappentoe te voegen aan een object:

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

Puntnotatie gebruiken:

obj.key3 = "value3";

Met behulp van vierkante haakjes notatie:

obj["key3"] = "value3";

Het eerste formulier wordt gebruikt als u de naam van de eigenschap weet. De tweede vorm wordt gebruikt wanneer de naam van de eigenschap dynamisch wordt bepaald. Zoals in dit voorbeeld:

var getProperty = function (propertyName) {
    return obj[propertyName];
};
getProperty("key1");
getProperty("key2");
getProperty("key3");

Een echteJavaScript-array kan worden geconstrueerd met:

De letterlijke notatie van Array:

var arr = [];

De array-constructornotatie:

var arr = new Array();

Antwoord 2, autoriteit 18%

Antwoord jaar 2017: Object.assign()

Object.assign(dest, src1, src2, …)voegt objecten samen.

Het overschrijft destmet eigenschappen en waarden van (ongeacht het aantal) bronobjecten en retourneert vervolgens dest.

De methode Object.assign()wordt gebruikt om de waarden van alle opsombare eigen eigenschappen van een of meer bronobjecten naar een doelobject te kopiëren. Het zal het doelobject teruggeven.

Live voorbeeld

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

Antwoord 3, autoriteit 4%

Ik ben dol geworden op de LoDash/ Onderstreepbij het schrijven van grotere projecten.

Toevoegen door obj['key']of obj.keyzijn allemaal solide pure JavaScript-antwoorden. Zowel LoDash- als Underscore-bibliotheken bieden echter veel extra handige functies bij het werken met objecten en arrays in het algemeen.

.push()is voor arrays, niet voor objecten.

Afhankelijk van wat je zoekt, zijn er twee specifieke functies die leuk kunnen zijn om te gebruiken en functionaliteit geven die vergelijkbaar is met het gevoel van arr.push(). Raadpleeg de documenten voor meer informatie, ze hebben daar een aantal geweldige voorbeelden.

_.merge(alleen Lodash)

Het tweede object zal het basisobject overschrijven of toevoegen.
undefinedwaarden worden niet gekopieerd.

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

Het tweede object zal het basisobject overschrijven of toevoegen.
undefinedwordt gekopieerd.

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

Het tweede object bevat standaardwaarden die aan het basisobject worden toegevoegd als ze niet bestaan.
undefinedwaarden worden gekopieerd als de sleutel al bestaat.

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

Daarnaast kan het de moeite waard zijn om jQuery.extend te vermelden, het werkt vergelijkbaar met _.merge en is wellicht een betere optie als u al jQuery gebruikt.

Het tweede object zal het basisobject overschrijven of toevoegen.
undefinedwaarden worden niet gekopieerd.

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()

Het is misschien de moeite waard om de ES6/ ES2015 Object.assign te noemen, het werkt vergelijkbaar met _.merge en is misschien de beste optie als je al een ES6/ES2015 polyfill gebruikt zoals Babelals je wilt polyfill zelf.

Het tweede object zal het basisobject overschrijven of toevoegen.
undefinedwordt gekopieerd.

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}

Antwoord 4, autoriteit 3%

U zou een van deze kunnen gebruiken (mits key3 de acutal key is die u wilt gebruiken)

arr[ 'key3' ] = value3;

of

arr.key3 = value3;

Als key3 een variabele is, moet u het volgende doen:

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

Hierna zou het aanvragen van arr.a_keyde waarde van value3retourneren, een letterlijke 3.


Antwoord 5

Prestaties

Vandaag 2020.01.14 voer ik tests uit op MacOs HighSierra 10.13.6 op Chrome v78.0.0, Safari v13.0.4 en Firefox v71.0.0, voor gekozen oplossingen. Ik verdeel oplossingen in veranderlijk (eerste letter M) en onveranderlijk (eerste letter I). Ik bied ook enkele onveranderlijke oplossingen (IB,IC,ID/IE) die nog niet zijn gepubliceerd in antwoorden op deze vraag

Conclusies

  • snelste veranderlijke oplossingen zijn veel sneller dan snelste onveranderlijke (>10x)
  • klassieke veranderlijke aanpak zoals obj.key3 = "abc"(MA,MB) is het snelst
  • voor onveranderlijke oplossingen zijn de {...obj, key3:'abc'}en Object.assign(IA,IB) het snelst
  • verrassend genoeg zijn er snellere onveranderlijke oplossingen dan sommige veranderlijke oplossingen voor chrome (MC-IA) en safari (MD-IB)

voer hier de afbeeldingsbeschrijving in

Details

In het onderstaande fragment wordt een geteste oplossing gepresenteerd, u kunt vooraf testen op uw machine HIER


Antwoord 6

arr.key3 = value3;

omdat je arr niet echt een array is… Het is een prototype-object. De echte array zou zijn:

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

maar het klopt nog steeds niet. Het zou eigenlijk moeten zijn:

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

Antwoord 7

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

Antwoord 8

Ik weet dat hier al een geaccepteerd antwoord op is, maar ik dacht laat ik mijn idee ergens documenteren. [mensen] voel je vrij om gaten in dit idee te prikken, want ik weet niet zeker of dit de beste oplossing is… maar ik heb dit een paar minuten geleden samengesteld:

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

Je zou het op deze manier gebruiken:

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

Aangezien de prototypefunctie thisretourneert, kunt u .push‘s blijven koppelen aan het einde van uw obj-variabele: obj.push(...).push(...).push(...);

Een andere functie is dat u een array of een ander object als waarde in de push-functieargumenten kunt doorgeven. Zie mijn viool voor een werkend voorbeeld: http://jsfiddle.net/7tEme/


Antwoord 9

Gewoon eigenschappen toevoegen:

En we willen prop2 : 2aan dit object toevoegen, dit zijn de handigste opties:

  1. Puntoperator: object.prop2 = 2;
  2. vierkante haken: object['prop2'] = 2;

Dus welke gebruiken we dan?

De puntoperator is een schonere syntaxis en zou als standaard moeten worden gebruikt (imo). De puntoperator kan echter geen dynamische sleutels aan een object toevoegen, wat in sommige gevallen erg handig kan zijn. Hier is een voorbeeld:

const obj = {
  prop1: 1
}
const key = Math.random() > 0.5 ? 'key1' : 'key2';
obj[key] = 'this value has a dynamic key';
console.log(obj);

Antwoord 10

Je kunt een klas maken met het antwoord van @Ionuț G. Stan

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

Een nieuw object maken met de laatste klasse:

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

Het object afdrukken

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

Een sleutel afdrukken

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

Ik ben een beginner in javascript, reacties zijn welkom. Werkt voor mij.


Antwoord 11

Twee meest gebruikte manieren die al in de meeste antwoorden zijn genoemd

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

Een andere manier om een eigenschap te definiëren is het gebruik van 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
});

Deze methode is handig als u meer controle wilt hebben bij het definiëren van een eigenschap.
Eigenschap gedefinieerd kan worden ingesteld als opsombaar, configureerbaar en beschrijfbaar door de gebruiker.


Antwoord 12

Uw voorbeeld toont een object, geen array. In dat geval is de beste manier om een veld aan een object toe te voegen, er gewoon aan toe te wijzen, zoals:

arr.key3 = value3;

Antwoord 13

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

Uitvoer als volgt:-

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

Antwoord 14

ondersteund door de meeste browsers, en het controleert of de objectsleutel beschikbaar is of niet die u wilt toevoegen, indien beschikbaarhet de bestaande sleutelwaarde overschrijften het niet beschikbaarhet voeg sleutel toe met waarde

voorbeeld 1

let my_object = {};
// now i want to add something in it  
my_object.red = "this is red color";
// { red : "this is red color"}

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

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

Antwoord 15

Als u meerdere anonieme letterlijke objecten van objecten in een object hebt en een ander object met sleutel/waarde-paren wilt toevoegen, doet u dit:

Firebug’ het object:

console.log(Comicbook);

retourneert:

[Object { 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";
}

voegt Object {name="Peanuts", value="12"}toe aan het Comicbook-object


Antwoord 16

Ofwel obj['key3'] = value3of obj.key3 = value3voegt het nieuwe paar toe aan de obj.

Ik weet echter dat jQuery niet werd genoemd, maar als je het gebruikt, kun je het object toevoegen via $.extend(obj,{key3: 'value3'}). Bijv.:

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>

Antwoord 17

Een korte en elegante manier in de volgende Javascript-specificatie (kandidaat-fase 3) is:

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

Een diepere discussie is te vinden in Object spread vs Object.assignen op Dr. Axel Rauschmayers-site.

Het werkt al in node.js sinds release 8.6.0.

Vivaldi, Chrome, Opera en Firefox in up-to-date releases kennen deze functie ook, maar Mirosoft pas vandaag, noch in Internet Explorer noch in Edge.


Antwoord 18

We kunnen op veel manieren een sleutel/waarde-paar aan een JavaScript-object toevoegen…

CASE – 1 : Een object uitbreiden
Hiermee kunnen we meerdere key: valuetegelijkertijd aan het object toevoegen.

const rectangle = { width: 4, height: 6 };
const cube = {...rectangle, length: 7};
const cube2 = {...rectangle, length: 7, stroke: 2};
  console.log("Cube2: ", cube2);
  console.log("Cube: ", cube);
  console.log("Rectangle: ", rectangle);

Antwoord 19

Je kunt het op deze manier toevoegen:

arr['key3'] = value3;

of op deze manier:

arr.key3 = value3;

De antwoorden die suggereren om het object in te toetsen met de variabele key3zouden alleen werken als de waarde van key3'key3'was.


Antwoord 20

Volgens Property Accessorsgedefinieerd in ECMA-262(http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf, P67), zijn er twee manieren om eigenschappen toe te voegen naar een bestaand object. Al deze twee manieren, de Javascript-engine zal ze hetzelfde behandelen.

De eerste manier is om puntnotatie te gebruiken:

obj.key3 = value3;

Maar op deze manier moet u een IdentifierNamegebruiken na puntnotatie.

De tweede manier is om haakjesnotatie te gebruiken:

obj["key3"] = value3;

en een ander formulier:

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

Op deze manier zou u een Expressie(inclusief IdentifierName) in de haakjesnotatie kunnen gebruiken.


Antwoord 21

We kunnen dit ook op deze manier doen.

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

Antwoord 22

U kunt een nieuw object maken door de syntaxis {[key]: value}te gebruiken:

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

Antwoord 23

De spread-operator is een handige en snelle syntaxis voor het toevoegen van items aan arrays, het combineren van arrays of objecten en het verspreiden van een array in de argumenten van een functie.
Nu wordt ES2018 geleverd met spread-eigenschappen om letterlijke objecten te object. Het kopieert zijn eigen opsombare eigenschappen van een opgegeven object naar een nieuw object.

De spread-syntaxis is handig om de eigenschappen en methoden van objecten te combineren tot een nieuw object:

Je kunt een eigenschap toevoegen aan een object als dit

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

Antwoord 24

Als u een sleutel-waardepaar wilt voorvoegenaan een object zodat de for inwerkt met dat element, doet u dit eerst:

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

Antwoord 25

De beste manier om hetzelfde te bereiken wordt hieronder vermeld:

function getKey(key) {
  return `${key}`;
}
var obj = {key1: "value1", key2: "value2", [getKey('key3')]: "value3"};
//console.log(obj);

Antwoord 26

Omdat het een kwestie van het verleden is, maar het probleem van het heden. Zou nog een oplossing voorstellen: geef gewoon de sleutel en waarden door aan de functie en je krijgt een kaartobject.

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

Other episodes