Rok 2017 odpowiedź: Object.assign()

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

Nadpisuje dest z właściwościami i wartościami (jakkolwiek wielu) obiektów źródłowych, a następnie zwraca dest.

Metoda Object.assign() służy do kopiowania wartości wszystkich możliwych do wyliczenia własnych właściwości z jednego lub więcej 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);

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

From MDN :

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

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

Zauważ, że Object.assign() wyzwalacze settery podczas gdy składnia spread Nie.

Przykład na żywo

Działa w bieżącym Chrome i obecny Firefox. Mówią, że to nie działa w obecnej krawędzi.

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

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

operator przypisywania obiektów +=:

obj += {key3: "value3"};

UPS... Poniosło mnie. Przemyt informacji z przyszłości jest nielegalny. / Align = "left" /

Polubiłem LoDash / podkreślenie podczas pisania większych projektów.

Dodawanie przez obj['key'] lub obj.key to wszystkie stałe, czyste odpowiedzi JavaScript. Jednak zarówno LoDash, jak i biblioteki podkreślenia zapewniają wiele dodatkowych wygodnych funkcji podczas pracy z obiektami i tablicami w ogóle.

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

W zależności od tego, czego szukasz, istnieją dwie specyficzne funkcje, które mogą być miło wykorzystać i dać funkcjonalność podobną do odczucia arr.push(). Aby uzyskać więcej informacji, sprawdź dokumenty, mają tam kilka świetnych przykładów.

_.merge (tylko Lodash)

Drugi obiekt nadpisze lub doda do obiektu podstawowego. undefined wartoś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/_.assign

Drugi obiekt nadpisze lub doda do obiektu podstawowego. undefined zostanie 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

The drugi obiekt zawiera wartości domyślne, które zostaną dodane do obiektu podstawowego, jeśli nie istnieją. undefined wartoś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

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

Drugi obiekt nadpisze lub doda do obiektu podstawowego. undefined wartości nie są zrozumiałem.

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

Obiekt.Przypisz()

Warto wspomnieć o obiekcie ES6 / ES2015.przypisać, działa podobnie do _.połącz i może być najlepszą opcją, jeśli już używasz polyfill ES6 / ES2015, takiego jak Babel jeśli chcesz polyfill samodzielnie.

Drugi obiekt nadpisze lub doda do obiektu podstawowego. undefined zostanie 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 akutalnym, którego chcesz użyć)

arr[ 'key3' ] = value3;

Lub

arr.key3 = value3;

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

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

Następnie żądanie arr.a_key zwróci wartość value3, literał 3.

arr.key3 = value3;

Ponieważ arr nie jest tak naprawdę tablicą... To prototypowy obiekt. Prawdziwa tablica będzie:

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

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

Wiem, że istnieje już akceptowana odpowiedź na to pytanie, ale pomyślałem, że gdzieś udokumentuję swój pomysł. Zapraszam do dziurkowania w tym pomyśle, bo nie jestem pewien, czy jest to najlepsze rozwiązanie... ale poskładałem to kilka minut temu:

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

Wykorzystałbyś to w ten sposób:

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

Ponieważ funkcja prototype zwraca this możesz kontynuować łańcuch .push do końca swojej zmiennej obj: obj.push(...).push(...).push(...);

Inną cechą jest to, że można przekazać array lub inny obiekt jako wartość w argumentach funkcji push. Zobacz mój przykład pracy: http://jsfiddle.net/7tEme/

Możesz utworzyć klasę z odpowiedzią @Ionuț G. Stan

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

Tworzenie nowego obiektu z ostatnią klasą:

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 newbie w javascript, komentarze są mile widziane. Mi pasuje.

Twój przykład pokazuje obiekt, a nie tablicę. W takim przypadku preferowanym sposobem dodawania pola do obiektu jest po prostu przypisanie do niego, w ten sposób:

arr.key3 = value3;

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

obj.key3 = "value3";

obj["key3"] = "value3";

Innym sposobem definiowania właściwości jest użycie obiektu.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. Właściwość zdefiniowana może być ustawiona jako wyliczalna, konfigurowalna i zapisywalna przez użytkownika.

Jeśli wewnątrz obiektu znajduje się wiele anonimowych liter obiektu i chcesz dodać kolejny obiekt zawierający pary klucz / wartość, zrób to:

Firebug ' obiekt:

console.log(Comicbook);

Zwraca:

[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'] = value3 albo obj.key3 = value3 doda nową parę do obj.

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

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.extend(target[,object1][,objectN]) Scala zawartość dwóch lub więcej obiektów razem w pierwszy obiekt.

I umożliwia również rekurencyjne 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>

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

arr['key3'] = value3;

Lub w ten sposób:

arr.key3 = value3;

Odpowiedzi sugerujące wejście do obiektu ze zmienną key3 zadziałałyby tylko wtedy, gdy wartość key3 wynosi 'key3'.

Zgodnie z właściwościami Accessors zdefiniowanymi 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 istniejącego obiektu. Wszystkie te dwa sposoby, silnik Javascript będzie traktować je tak samo.

Pierwszym sposobem jest użycie notacji kropkowej:

obj.key3 = value3;

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

Drugim sposobem jest użycie nawiasu zapis:

obj["key3"] = value3;

I inna forma:

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

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

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

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

Głębszą dyskusję można znaleźć w object spread vs Object.przypisać i na Dr. Axel rauschmayers site .

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

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

Wyjście w ten sposób:-

[ { 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ż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. Sugerowałoby jeszcze jedno rozwiązanie: po prostu przekaż 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 para klucz-wartość do obiektu, więc for in działa z tym elementem najpierw wykonaj następujące czynności:

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

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

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

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

//console.log(obj);

Proste dodawanie właściwości:

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

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

Więc którego z nich użyjemy?

Operator dot jest bardziej czystą składnią i powinien być używany jako domyślny (imo). Operator dot nie jest jednak w stanie dodawać dynamicznych klawiszy 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:

Gdy chcemy połączyć właściwości 2 obiektów są to najwygodniejsze opcje:

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

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

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

console.log(object2);

1. Operator rozprzestrzeniania obiektów ...

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

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

console.log(newObj);

Który z nas użyć?

• składnia spread jest mniej wyrazista i powinna być używana jako domyślna imo. Nie zapomnij przenieść tej składni do składni, która jest obsługiwana przez wszystkie przeglądarki, ponieważ jest stosunkowo nowa.
• Object.assign() jest bardziej dynamiczne, 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.

arr.push({key3: value3});