Oto dosłownie mój obiekt:

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

Jak mogę dodać pole key3z value3do obiektu?

Istnieją dwa sposoby dodawania nowych właściwości do obiektu:

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

Za pomocą notacji kropkowej:

obj.key3 = "value3";

Za pomocą notacji w nawiasach kwadratowych:

obj["key3"] = "value3";

Pierwszy formularz jest używany, gdy znasz nazwę właściwości. Druga forma jest używana, gdy nazwa właściwości jest określana dynamicznie. Jak w tym przykładzie:

var getProperty = function (propertyName) {
    return obj[propertyName];
};

getProperty("key1");
getProperty("key2");
getProperty("key3");

Rzeczywistym Tablica JavaScript może być wykonana przy użyciu:

Dosłowna notacja Array:

var arr = [];

Notacja konstruktora macierzy:

var arr = new Array();

Odpowiedź na rok 2017: Object.assign()

Object.assign (dest, src1, src2, ...) łączy obiekty.

Zastępuje destwłaściwości i wartości (jakkolwiek wielu) obiektów źródłowych, a następnie zwraca dest.

Object.assign()Sposób jest stosowany w celu skopiowania wartości wszystkich przeliczalnych właściwości własnych od jednego lub większej liczby obiektów źródłowych do obiektu docelowego. Zwróci obiekt docelowy.

Przykład na żywo

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

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

Odpowiedź na rok 2018: operator rozkładania obiektów {...}

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

Z MDN :

Kopiuje własne wyliczalne właściwości z podanego obiektu na nowy obiekt.

Płytkie klonowanie (z wyłączeniem prototypu) lub scalanie obiektów jest teraz możliwe przy użyciu krótszej składni niż Object.assign().

Zauważ, że Object.assign()wyzwala setery, podczas gdy składnia spreadu nie.

Przykład na żywo

Działa w bieżącym Chrome i aktualnym Firefoksie. Mówią, że nie działa w obecnym Edge.

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

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

Odpowiedź na rok 2019

Operator przypisania obiektu += :

obj += {key3: "value3"};

Ups ... Zostałem uniesiony. Informacje o przemycie z przyszłości są nielegalne. Właściwie zasłonięty!

Mam uprawianych fond LoDash / podkreślenia przy pisaniu większych projektów.

Dodawanie przez obj['key']lub obj.keywszystkie są czystymi odpowiedziami w języku JavaScript. Jednak zarówno biblioteki LoDash, jak i Underscore zapewniają wiele dodatkowych wygodnych funkcji podczas ogólnej pracy z obiektami i tablicami.

.push()jest dla tablic , a nie dla obiektów .

W zależności od tego, czego szukasz, istnieją dwie konkretne funkcje, które mogą być przyjemne w użyciu i dają funkcjonalność podobną do odczucia arr.push(). Aby uzyskać więcej informacji, sprawdź dokumenty, mają tam świetne przykłady.

_.merge (tylko Lodash)

Drugi obiekt nadpisze lub doda do obiektu podstawowego. undefinedwartości nie są kopiowane.

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 / _.ignign

Drugi obiekt nadpisze lub doda do obiektu podstawowego. undefinedzostanie skopiowany.

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

Drugi obiekt zawiera wartości domyślne, które zostaną dodane do obiektu podstawowego, jeśli nie istnieją. undefinedwartości zostaną skopiowane, jeśli klucz już istnieje.

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

Ponadto warto wspomnieć o jQuery.extend, działa podobnie do _.merge i może być lepszą opcją, jeśli już używasz jQuery.

Drugi obiekt nadpisze lub doda do obiektu podstawowego. undefinedwartości nie są kopiowane.

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

Warto wspomnieć o obiekcie ES6 / ES2015 Object.assign, działa on podobnie do _.merge i może być najlepszą opcją, jeśli już używasz wielopełniacza ES6 / ES2015, takiego jak Babel, jeśli chcesz sam się wypełnić .

Drugi obiekt nadpisze lub doda do obiektu podstawowego. undefinedzostanie skopiowany.

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}

Możesz użyć jednego z nich (pod warunkiem, że key3 jest kluczem, którego chcesz użyć)

arr[ 'key3' ] = value3;

lub

arr.key3 = value3;

Jeśli key3 jest zmienną, powinieneś zrobić:

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

Po tym żądanie arr.a_keyzwróci wartość value3literału 3.

arr.key3 = value3;

ponieważ twoja tablica nie jest tak naprawdę tablicą ... To obiekt prototypowy. Rzeczywista tablica to:

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

ale nadal nie jest w porządku. W rzeczywistości powinno to być:

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

Po prostu dodając właściwości:

I chcemy dodać prop2 : 2do tego obiektu, są to najwygodniejsze opcje:

1. Operator kropki: object.prop2 = 2;
2. nawiasy kwadratowe: object['prop2'] = 2;

Więc którego używamy?

Operator kropki ma bardziej przejrzystą składnię i powinien być używany jako domyślny (imo). Jednak operator kropki nie jest w stanie dodać dynamicznych kluczy do obiektu, co może być bardzo przydatne w niektórych przypadkach. Oto przykład:

const obj = {
  prop1: 1
}

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

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

console.log(obj);

Scalanie obiektów:

Kiedy chcemy scalić właściwości 2 obiektów, są to najwygodniejsze opcje:

1. Object.assign(), bierze obiekt docelowy za argument i jeden lub więcej obiektów źródłowych i scali je razem. Na przykład:

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

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

console.log(object2);

2. Operator rozprzestrzeniania obiektów ...

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

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

console.log(newObj);

Z którego korzystamy?

• Składnia spreadu jest mniej szczegółowa i powinna być używana jako domyślna imo. Nie zapomnij przetłumaczyć tej składni na składnię obsługiwaną przez wszystkie przeglądarki, ponieważ jest ona stosunkowo nowa.
• Object.assign() jest bardziej dynamiczny, ponieważ mamy dostęp do wszystkich obiektów, które są przekazywane jako argumenty i możemy nimi manipulować, zanim zostaną przypisane do nowego obiektu.

Wiem, że istnieje już zaakceptowana odpowiedź na to pytanie, ale pomyślałem, że gdzieś udokumentuję swój pomysł. Proszę [ludzie] śmiać się z dziurami w tym pomyśle, ponieważ nie jestem pewien, czy jest to najlepsze rozwiązanie ... ale po prostu złożyłem to kilka minut temu:

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

Użyłbyś tego w ten sposób:

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

Ponieważ funkcja prototypu powraca this, możesz kontynuować tworzenie łańcucha .pushdo końca objzmiennej:obj.push(...).push(...).push(...);

Inną cechą jest to, że możesz przekazać tablicę lub inny obiekt jako wartość w argumentach funkcji push. Zobacz mój skrzypce dla działającego przykładu: http://jsfiddle.net/7tEme/

Wydajność

Dzisiaj 2020.01.14 Przeprowadzam testy na MacOs HighSierra 10.13.6 na Chrome v78.0.0, Safari v13.0.4 i Firefox v71.0.0 dla wybranych rozwiązań. Dzielę rozwiązania na zmienne (pierwsza litera M) i niezmienne (pierwsza litera I). Podaję także kilka niezmiennych rozwiązań (IB, IC, ID / IE), które nie zostały jeszcze opublikowane w odpowiedziach na to pytanie

Wnioski

• najszybsze modyfikowalne rozwiązania są znacznie szybsze niż najszybsze niezmienne (> 10x)
• klasyczne podejście zmienne, takie jak obj.key3 = "abc"(MA, MB), jest najszybsze
• dla niezmiennych rozwiązań {...obj, key3:'abc'}i Object.assign(IA, IB) są najszybsze
• zaskakująco istnieją rozwiązania niezmienne szybsze niż niektóre modyfikowalne rozwiązania dla chrome (MC-IA) i safari (MD-IB)

Detale

W poniższym fragmencie znajduje się wstępnie przetestowane rozwiązanie, które można przetestować na swoim komputerze TUTAJ

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!

Możesz stworzyć zajęcia z odpowiedzią @ Ionuț G. Stan

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

Tworzenie nowego obiektu za pomocą ostatniej klasy:

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

Drukowanie obiektu

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

Drukowanie klucza

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

Jestem nowicjuszem w javascript, komentarze są mile widziane. Pracuje dla mnie.

Dwa najczęściej używane sposoby wspomniane już w większości odpowiedzi

obj.key3 = "value3";

obj["key3"] = "value3";

Jeszcze jednym sposobem na zdefiniowanie właściwości jest użycie 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
});

Ta metoda jest przydatna, gdy chcesz mieć większą kontrolę podczas definiowania właściwości. Zdefiniowana właściwość może być ustawiona przez użytkownika jako wymienna, konfigurowalna i zapisywalna.

Twój przykład pokazuje obiekt, a nie tablicę. W takim przypadku preferowanym sposobem dodania pola do obiektu jest po prostu przypisanie mu takiego pola:

arr.key3 = value3;

obsługiwany przez większość przeglądarek i sprawdza, czy klucz obiektu jest dostępny, czy nie chcesz go dodać, jeśli jest dostępny , zastępuje istniejącą wartość klucza i nie jest dostępny , dodaje klucz z wartością

Przykład 1

let my_object = {};

// now i want to add something in it  

my_object.red = "this is red color";

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

przykład 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"} }

przykład 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" 
//            }   
//       }

Jeśli masz wiele anonimowych literałów obiektów w obiekcie i chcesz dodać kolejny obiekt zawierający pary klucz / wartość, wykonaj następujące czynności:

Firebug 'the Object:

console.log(Comicbook);

zwroty:

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

Kod:

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

doda Object {name="Peanuts", value="12"}do obiektu Comicbook

Albo obj['key3'] = value3albo obj.key3 = value3doda nową parę do obj.

Wiem jednak, że jQuery nie było wspomniane, ale jeśli go używasz, możesz dodać obiekt $.extend(obj,{key3: 'value3'}). Na przykład:

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. przedłużenie (cel [, obiekt1] [, objectN]), łączy się zawartość dwóch lub więcej obiektów razem do pierwszego obiektu.

Pozwala także na rekursywne dodawanie / modyfikowanie za pomocą $.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>

Krótki i elegancki sposób w następnej specyfikacji Javascript (etap 3 kandydata) to:

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

Głębszą dyskusję można znaleźć w Object spread vs. Object.assign oraz na stronie Dr. Axela Rauschmayersa .

Działa już w node.js od wersji 8.6.0.

Vivaldi, Chrome, Opera i Firefox w aktualnych wydaniach również znają tę funkcję, ale Mirosoft dopiero dziś, ani w Internet Explorerze, ani w 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);
    });

Dane wyjściowe takie jak: -

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

Możesz dodać go w ten sposób:

arr['key3'] = value3;

lub w ten sposób:

arr.key3 = value3;

Odpowiedzi sugerujące wprowadzenie do obiektu za pomocą zmiennej key3działałyby tylko wtedy, gdyby wartość parametru key3było 'key3'.

Według Accessory Accessors zdefiniowanych w ECMA-262 ( http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf , P67) istnieją dwa sposoby dodawania właściwości do istnieje obiekt. Wszystkie te dwa sposoby, silnik JavaScript potraktuje je tak samo.

Pierwszym sposobem jest użycie notacji kropkowej:

obj.key3 = value3;

Ale w ten sposób powinieneś użyć IdentifierName po notacji kropkowej.

Drugim sposobem jest użycie notacji nawiasowej:

obj["key3"] = value3;

i inna forma:

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

W ten sposób możesz użyć wyrażenia (w tym IdentifierName ) w notacji w nawiasie.

Możemy to zrobić również w ten sposób.

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

Ponieważ jest to kwestia przeszłości, ale problem teraźniejszości. Zasugerowałbym jeszcze jedno rozwiązanie: wystarczy przekazać klucz i wartości do funkcji, a otrzymasz obiekt mapy.

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

W celu prepend parę klucz-wartość do obiektu, więc w pracach z tego pierwszego elementu to zrobić:

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

Najlepszy sposób na osiągnięcie tego samego podano poniżej:

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

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

//console.log(obj);

Możesz utworzyć nowy obiekt, używając {[key]: value}składni:

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

W poprzedniej składni możesz teraz używać składni rozszerzonej, {...foo, ...bar}aby dodać nowy obiekt bez mutowania starej wartości:

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