Как дублировать свойства объекта в другом объекте?

Учитывая объект:

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-прокладка для этих древних браузеров, которые будут polyfill много возможностей 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. орг / EN-US / Docs / Web / JavaScript / Справка / Global_Objects / Объект / создать

Вы также можете просто присвоить значения и опустить дескрипторы и сделать его немного короче:

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

Использование следующего метода скопирует свойства

secondObject.copy(firstObject)

Я очень новичок в JavaScript, но нашел, что это работает. Наверное, слишком долго, но это работает.