Як дублювати властивості об’єкта в іншому об’єкті?

З огляду на об’єкт:

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

як я можу скопіювати властивості всередині іншого об’єкта ( secondObject) на зразок цього:

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

використовуючи посилання на firstObject? Щось на зразок цього:

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

(це не працює ... Я кажу про те, щоб показати великими рядками, як я хотів би структурувати код).

Чи можливо рішення без використання будь-яких фреймворків JavaScript?

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

Скориставшись сигналом відповіді @ Bardzuśny тут, ES6 запропонував власне рішення: Object.assign() функцію!

Використання просте:

Object.assign(secondObject, firstObject);

Це воно!

Підтримка зараз очевидно погана; лише Firefox (34+) підтримує його поза програмою, тоді як Chrome (45+) та Opera (32+) вимагають встановити "експериментальний прапор".

Підтримка вдосконалюється: останні версії Chrome, Firefox, Opera, Safari та Edge підтримують її (у IE, зокрема, немає підтримки.) Транспілятори також доступні, як Babel і Traceur. Дивіться тут для більш детальної інформації.

За ES6 - синтаксис поширення :

Ви можете просто використовувати:

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

Це дозволяє уникнути проблем передачі цих об'єктів посиланням.

Крім того, вона опікується предметами, які мають глибоке гніздування.

Проведіть цикл через властивості першого об'єкта та призначте їх другому об'єкту, як це:

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- inпетля мало; вам потрібно hasOwnProperty. Дивіться http://bonsaiden.github.com/JavaScript-Garden/#object.forinloop для детального пояснення того, чому.

Тут граємо некроманта, тому що ES5 приніс нас Object.keys(), з потенціалом врятувати нас від усіх цих .hasOwnProperty()перевірок.

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

Або, загорнувши його у функцію (обмежена "копія" 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()є відносно новим методом, а саме: недоступний в IE <9. Те саме стосується .forEach()методу масиву, який я використовував замість регулярногоfor циклу.

На щастя, є es5-shim для цих старовинних браузерів доступний , який поліфікує багато функцій ES5 (включаючи ці два).

(Я весь для поліфілів, на відміну від того, щоб стримувати використання класних, нових мовних функцій.)

Некроюючи, щоб люди могли знайти метод глибокої копії з hasOwnProperty та фактичною перевіркою об’єкта:

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

Можна використовувати Object.assign для об'єднання об'єктів. Він поєднає та перекриє загальну властивість справа наліво, тобто те саме, що знаходиться вліво, буде переміщене право.

І важливо спочатку поставити порожній об’єкт, щоб уникнути мутування вихідних об'єктів. Об'єкти-джерела повинні залишатися чистими, оскільки Object.assign()сам по собі повертає новий об'єкт.

Сподіваюся, це допомагає!

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

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

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

console.log(finalObject)

Вдосконалення ідеї kingPuppy та ідеї OP (неглибока копія) - я додаю лише 3 крапки до "прикладу" OP ":)

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

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

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

console.log(secondObject);

Це повинно працювати, перевірене тут .

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

Примітка . Це не буде копіювати методи firstObject
Примітки 2 : для використання в старих браузерах вам знадобиться json-аналізатор
Примітка 3 : присвоєння за посиланням - це життєздатний варіант, особливо якщо він firstObjectмістить методи. Відповідно скорегував даний приклад jsfiddle

На жаль, ви не можете поставити посилання на змінну в такому об'єкті. Однак ви можете зробити функцію, яка копіює значення об'єкта в інший об’єкт.

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

Якщо ви хотіли захопити лише ті властивості, які існують у другому об'єкті, ви можете використовувати Object.keysдля захоплення властивостей першого об'єкта, ви можете зробити два способи:

A.) map призначити властивості першого об'єкта другому об'єкту, використовуючи побічні ефекти:

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

Б.) або reduceстворити новий об’єкт і призначити його другому об’єкту. Майте на увазі, що цей метод замінює інші властивості, які може мати другий об'єкт до того, який не відповідає першому об'єкту:

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

Використовуйте позначення розповсюдження властивості. Він був доданий у ES2018 (спред для масивів / ітерабелів був раніше, ES2015), {... firstObject} поширює всі перелічені властивості як дискретні властивості.

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

Я вважаю за краще використовувати firstObject в якості прототипу secondObject і додати дескриптор властивості:

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

Це, звичайно, не однолінійний, але це дає більше контролю. Якщо вас цікавлять дескриптори властивостей, пропоную прочитати цю статтю: http://patrickdelancy.com/2012/09/property-descriptors-in-javascript/#comment-2062 та сторінку MDN https: //developer.mozilla. org / en-US / docs / Web / JavaScript / Довідка / Global_Objects / Object / create

Ви також можете просто призначити значення та опустити дескриптори та зробити їх трохи коротшими:

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

Сумісність: ECMAScript 5, тому IE9 +

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

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

Використання методу follwing скопіює властивості

secondObject.copy(firstObject)

Я дуже новачок у JavaScript, але вважаю, що це працює. Я думаю, занадто довго, але це працює.