Jak powielić właściwości obiektu w innym obiekcie?

Biorąc pod uwagę przedmiot:

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

jak mogę skopiować właściwości wewnątrz innego obiektu ( secondObject) takiego jak ten:

var secondObject = {
    key1 : 'value1',
    key2 : 'value2',
    key3 : 'value3',
    key4 : 'value4'
};

za pomocą odniesienia do firstObject? Coś takiego:

var secondObject = {
    firstObject,
    key3 : 'value3',
    key4 : 'value4'
};

(to nie działa ... Położyłem to, aby pokazać dużymi liniami, jak chciałbym ustrukturyzować kod).

Czy rozwiązanie jest możliwe bez użycia ram JavaScript?

for(var k in firstObject) secondObject[k]=firstObject[k];

Biorąc pod uwagę odpowiedź @ Bardzuśny tutaj, ES6 dostarczył natywne rozwiązanie: Object.assign()funkcję!

Użycie jest proste:

Object.assign(secondObject, firstObject);

Otóż ​​to!

Wsparcie w tej chwili jest oczywiście słabe; tylko Firefox (34+) obsługuje go od razu po wyjęciu z pudełka, podczas gdy Chrome (45+) i Opera (32+) wymagają ustawienia „flagi eksperymentalnej”.

Wsparcie się poprawia, a najnowsze wersje Chrome, Firefox, Opera, Safari i Edge obsługują go (IE w szczególności nie obsługuje). Dostępne są również transpilery, takie jak Babel i Traceur. Zobacz tutaj po więcej szczegółów.

Na ES6 - Składnia spreadu :

Możesz po prostu użyć:

const thirdObject = {
   ...firstObject,
   ...secondObject   
}

Pozwala to uniknąć problemów z przekazywaniem tych obiektów przez odniesienie.

Dodatkowo dba o obiekty, które mają głębokie zagnieżdżenie.

Zapętlaj właściwości pierwszego obiektu i przypisz je do drugiego obiektu:

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

var secondObject = {
    key3 : 'value3',
    key4 : 'value4'
};

for (var prop in firstObject) {
    if (firstObject.hasOwnProperty(prop)) {
        secondObject[prop] = firstObject[prop];
    }
}

for- inpętli nie jest wystarczająco; trzeba hasOwnProperty. Zobacz http://bonsaiden.github.com/JavaScript-Garden/#object.forinloop, aby uzyskać szczegółowe wyjaśnienie dlaczego.

Granie tutaj w nekromantę, ponieważ ES5 przyniosło nam Object.keys()możliwość ocalenia nas przed tymi wszystkimi .hasOwnProperty()czekami.

Object.keys(firstObject).forEach(function(key) {
  secondObject[key] = firstObject[key];
});

Lub, zawijanie go w funkcję (ograniczona „kopia” lodash _.assign()):

function assign(object, source) {
  Object.keys(source).forEach(function(key) {
    object[key] = source[key];
  });
}

assign(secondObject, firstObject); // assign firstObject properties to secondObject

Object.keys()jest stosunkowo nową metodą, w szczególności: niedostępną w IE <9. To samo dotyczy .forEach()metody tablicowej, której użyłem zamiast zwykłej forpętli.

Na szczęście dla tych starożytnych przeglądarek dostępna jest wersja es5-shim , która wypełni wiele funkcji ES5 (w tym tych dwóch).

(Jestem zwolennikiem wielu wypełniaczy, a nie powstrzymywania się od używania fajnych, nowych funkcji językowych.)

Necro'ing, aby ludzie mogli znaleźć metodę głębokiego kopiowania z hasOwnProperty i sprawdzaniem rzeczywistych obiektów:

var extend = function (original, context, key) {
  for (key in context)
    if (context.hasOwnProperty(key))
      if (Object.prototype.toString.call(context[key]) === '[object Object]')
        original[key] = extend(original[key] || {}, context[key]);
      else
        original[key] = context[key];
  return original;
};

Można użyć Object.assign do łączenia obiektów. Połączy i zastąpi wspólną własność od prawej do lewej, tzn. Ta sama właściwość po lewej stronie zostanie zastąpiona przez prawą.

Ważne jest, aby najpierw podać pusty obiekt, aby uniknąć mutacji obiektów źródłowych. Obiekty źródłowe należy pozostawić czyste, ponieważ Object.assign()samo w sobie zwraca nowy obiekt.

Mam nadzieję że to pomoże!

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

var secondObject = {
    key3 : 'value3',
    key4 : 'value4'
};

var finalObject = Object.assign({}, firstObject, secondObject)

console.log(finalObject)

Ulepszenie pomysłu kingPuppy i pomysłu OP (płytka kopia) - dodaję tylko 3 kropki do „przykładu” OP :)

var secondObject = {
    ...firstObject,
    key3 : 'value3',
    key4 : 'value4'
};

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

var secondObject = {
    ...firstObject,
    key3 : 'value3',
    key4 : 'value4'
};

console.log(secondObject);

To powinno działać, przetestowane tutaj .

var secondObject = {
    firstObject: JSON.parse(JSON.stringify(firstObject)),
    key3 : 'value3',
    key4 : 'value4'
};

Uwaga : nie spowoduje to skopiowania metod uwagi firstObject
2 : do użycia w starszych przeglądarkach potrzebny jest parser json
Uwaga 3 : przypisywanie przez referencję jest realną opcją, szczególnie jeśli firstObjectzawiera metody. Odpowiednio dostosowałem podany przykład jsfiddle

Niestety nie można umieścić odwołania do zmiennej w takim obiekcie. Można jednak utworzyć funkcję, która kopiuje wartości obiektu do innego obiektu.

function extend( obj1, obj2 ) {
    for ( var i in obj2 ) {
        obj1[i] = obj2[i];
    }
    return obj1;
}

var firstObject = {
    key1: "value1",
    key2: "value2"
};

var secondObject = extend({
    key3: "value3",
    key4: "value4"
}, firstObject );

Jeśli chcesz pobrać tylko właściwości istniejące w drugim obiekcie, możesz użyć Object.keysdo przechwycenia właściwości pierwszego obiektu, możesz wykonać dwie metody:

A.), map aby przypisać właściwości pierwszego obiektu do drugiego obiektu za pomocą efektów ubocznych:

var a = {a:100, b:9000, c:300};
var b = {b:-1};

Object.keys(a).map(function(key, index) {
    if (typeof b[key] !== 'undefined') {
        console.log(key);
        b[key] = a[key];    
    }
});

B.) lub reduceutworzyć nowy obiekt i przypisać go do drugiego obiektu. Należy pamiętać, że ta metoda zastępuje inne właściwości, które drugi obiekt mógł mieć wcześniej niż te, które nie pasowały do ​​pierwszego obiektu:

var a = {a:100, b:9000, c:300};
var b = {b:-1, d:-1}; // d will be gone

b = Object.keys(a).reduce(function(result, current) {
    if (typeof b[current] !== 'undefined') {
        result[current] = a[current];   
    }
    return result;
}, {});

Użyj notacji rozprzestrzeniania się właściwości. Został on dodany w ES2018 (spread dla tablic / iterable był wcześniejszy, ES2015), {... firstObject} rozdziela wszystkie wyliczalne właściwości jako własności dyskretne.

let secondObject = {
      ...firstObject,
      key3 : 'value3',
      key4 : 'value4'
    }

Wolałbym użyć firstObject jako prototypu SecondObject i dodać deskryptor właściwości:

var secondObject = Object.create(firstObject, {
      key3: {value: "value3", writable: true, configurable: true, enumerable: true},
      key4: {value: "value4", writable: true, configurable: true, enumerable: true}
      });

Z pewnością nie jest to jedna linijka, ale daje większą kontrolę. Jeśli jesteś zainteresowany deskryptorami właściwości, sugeruję przeczytać ten artykuł: http://patrickdelancy.com/2012/09/property-descriptors-in-javascript/#comment-2062 oraz stronę MDN https: //developer.mozilla. org / en-US / docs / Web / JavaScript / Reference / Global_Objects / Object / create

Możesz także po prostu przypisać wartości i pominąć deskryptory i uczynić go nieco krótszym:

var secondObject = Object.create(firstObject, {
      key3: {value: "value3"}
      key4: {value: "value4"}
  });

Kompatybilność: ECMAScript 5, więc IE9 +

var firstObject = {
     key1: "value1",
     key2: "value2"
};

var secondObject = {
     key3: "value3",
     key4: "value4"
     copy: function(firstObject){
           this.key1 = firstObject.key1;
           this.key2 = firstObject.key2;
     }
 };

Użycie metody podążania spowoduje skopiowanie właściwości

secondObject.copy(firstObject)

Jestem bardzo nowy w javascript, ale znalazłem, że działa. Chyba trochę za długo, ale działa.