Как мне объединить два объекта javascript вместе в ES6+?

Мне надоело устать от необходимости писать такой код:

function shallowExtend(obj1,obj2){
  var key;
  for ( key in obj2 ) {
    if ( obj2.hasOwnProperty(key) === false )  continue;
    obj1[key] = obj2[key]
  }
}

Или, если я не хочу сам писать код, выполните библиотеку, которая уже делает это. Разумеется, ES6 + приходит на помощь, это даст нам что-то вроде Object.prototype.extend(obj2...) или Object.extend(obj1,obj2...)

Итак, ES6 + предоставляет такую функциональность? Если еще нет, то планируется ли такая функциональность? Если не планируется, то почему бы и нет?

Ответ 1

Вы сможете выполнить поверхностное слияние/расширение/назначение в ES6 с помощью Object.assign:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Синтаксис:

Object.assign (цель, источники);

где... sources представляет исходный объект (ы).

Пример:

var obj1 = {name: 'Daisy', age: 30};
var obj2 = {name: 'Casey'};

Object.assign(obj1, obj2);

console.log(obj1.name === 'Casey' && obj1.age === 30);
// true

Ответ 2

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

const merged = {...obj1, ...obj2}

Для массивов оператор распространения уже был частью ES6 (ES2015), но для объектов он был добавлен в спецификацию языка на ES9 (ES2018). Это предложение было включено по умолчанию в таких инструментах, как Babel задолго до этого.

Ответ 3

Я знаю, что это немного старая проблема, но самое простое решение в ES2015/ES6 на самом деле довольно простое, используя Object.assign(),

Надеюсь, это поможет, это слияние DEEP:

/**
 * Simple is object check.
 * @param item
 * @returns {boolean}
 */
export function isObject(item) {
  return (item && typeof item === 'object' && !Array.isArray(item) && item !== null);
}

/**
 * Deep merge two objects.
 * @param target
 * @param source
 */
export function mergeDeep(target, source) {
  if (isObject(target) && isObject(source)) {
    for (const key in source) {
      if (isObject(source[key])) {
        if (!target[key]) Object.assign(target, { [key]: {} });
        mergeDeep(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }
  return target;
}

Пример использования:

mergeDeep(this, { a: { b: { c: 123 } } });
// or
const merged = mergeDeep({a: 1}, { b : { c: { d: { e: 12345}}}});  
console.dir(merged); // { a: 1, b: { c: { d: [Object] } } }

Ответ 4

В настоящее время обсуждается добавление Object.mixin, чтобы заботиться о поведении, о котором вы просите. https://mail.mozilla.org/pipermail/es-discuss/2012-December/027037.html

Хотя это еще не в проекте ES6, похоже, что для этого есть много поддержки, поэтому я думаю, что он скоро появится в проектах.

Ответ 5

ES6

Object.assign(o1,o2) ; 
Object.assign({},o1,o2) ; //safe inheritance
var copy=Object.assign({},o1); // clone o1
//------Transform array of objects to one object---
var subjects_assess=[{maths:92},{phy:75},{sport:99}];
Object.assign(...subjects_assess); // {maths:92,phy:75,sport:99}

ES7 или Babel

{...o1,...o2} // inheritance
 var copy= {...o1};

Ответ 6

Возможно, метод ES5 Object.defineProperties сделает эту работу?

например

var a = {name:'fred'};
var b = {age: {value: 37, writeable: true}};

Object.defineProperties(a, b);

alert(a.age); // 37

Документация по MDN: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperties