Как присоединиться к двум объектам JavaScript, без использования JQUERY

Ответ 1

Для достижения этой цели существует несколько различных решений:

1 - Встроенный цикл javascript for-in:

var result = {};
for(var key in obj1) result[key] = obj1[key];
for(var key in obj2) result[key] = obj2[key];

2 - Object.keys():

var result = {};
Object.keys(obj1).forEach((key) => result[key] = obj1[key]);
Object.keys(obj2).forEach((key) => result[key] = obj2[key]);

3 - Object.assign():
(Совместимость с браузером: Chrome: 45, Firefox (Gecko): 34, Internet Explorer: нет поддержки, Edge: (Да), Opera: 32, Safari: 9)

var result = Object.assign({},obj1, obj2);

4 - Назначение деструктурирования:
Новое возможное решение для достижения этой цели - использование Назначение деструктурирования, которое частично стандартизировано:

Синтаксис назначения деструктуризации - это выражение JavaScript, которое позволяет извлекать данные из массивов или объектов в отдельные переменные.

Используя этот новый синтаксис, вы можете объединить/объединить разные объекты в один объект следующим образом:

var result = {
  ...obj1,
  ...obj2
};

5 - extend функция jQuery или lodash:

var result={};
// using jQuery extend
$.extend(result, obj1, obj2);
// using lodash 
_.extend(result, obj1, obj2);

6 - функция lodash merge:

var result=_.merge(obj1, obj2);

Обновление 1:

Просто имейте в виду, что при использовании цикла for in в родном JavaScript вам нужно знать о своей среде с точки зрения возможных изменений прототипа в основных объектах JavaScript и глобальных типах данных. Например, если вы используете js lib, который добавляет новый материал в Array.prototype или Object.prototype.

Но если вы хотите помешать этим возможным добавленным материалам загрязнять ваши объекты в циклах for in, вы можете сделать:

for(var key in obj1){
  if(obj1.hasOwnProperty(key)){
    result[key]=obj1[key];
  }
}

Обновление 2:

Я обновил свой ответ и добавил номер решения 4, который является новой функцией JavaScript, но пока не полностью стандартизован. Я использую его с Babeljs, который является компилятором для написания JavaScript следующего поколения.

Ответ 2

РАБОЧИЙ FIDDLE

Простейший путь с JQuery -

var finalObj = $.extend(obj1, obj2);

Без JQuery -

var finalobj={};
for(var _obj in obj1) finalobj[_obj ]=obj1[_obj];
for(var _obj in obj2) finalobj[_obj ]=obj2[_obj];

Ответ 3

Еще одно решение, использующее underscore.js:

_.extend({}, obj1, obj2);

Ответ 4

1)

var merged = {};
for(key in obj1)
    merged[key] = obj1[key];
for(key in obj2)
    merged[key] = obj2[key];

2)

var merged = {};
Object.keys(obj1).forEach(k => merged[k] = obj1[k]);
Object.keys(obj2).forEach(k => merged[k] = obj2[k]);

ИЛИ

Object.keys(obj1)
    .concat(Object.keys(obj2))
    .forEach(k => merged[k] = k in obj2 ? obj2[k] : obj1[k]);

3) Простейший способ:

var merged = {};
Object.assign(merged, obj1, obj2);

Ответ 5

Я использовал эту функцию для объединения объектов в прошлом, я использую ее для добавления или обновления существующих свойств на obj1 со значениями из obj2:

var _mergeRecursive = function(obj1, obj2) {

      //iterate over all the properties in the object which is being consumed
      for (var p in obj2) {
          // Property in destination object set; update its value.
          if ( obj2.hasOwnProperty(p) && typeof obj1[p] !== "undefined" ) {
            _mergeRecursive(obj1[p], obj2[p]);

          } else {
            //We don't have that level in the heirarchy so add it
            obj1[p] = obj2[p];

          }
     }
}

Он будет обрабатывать несколько уровней иерархии, а также объекты одного уровня. Я использовал его как часть служебной библиотеки для управления объектами JSON. Вы можете найти здесь здесь.

Ответ 6

Эта простая функция рекурсивно объединяет объекты JSON, обратите внимание, что эта функция объединяет все JSON в первый параметр (target), если вам нужен новый объект для изменения этого кода.

var mergeJSON = function (target, add) {
    function isObject(obj) {
        if (typeof obj == "object") {
            for (var key in obj) {
                if (obj.hasOwnProperty(key)) {
                    return true; // search for first object prop
                }
            }
        }
        return false;
    }
    for (var key in add) {
        if (add.hasOwnProperty(key)) {
            if (target[key] && isObject(target[key]) && isObject(add[key])) {
                this.mergeJSON(target[key], add[key]);
            } else {
                target[key] = add[key];
            }
        }
    }
    return target;
};

Функция BTW вместо функции isObject() может быть использована следующим образом:

JSON.stringify(add[key])[0] == "{"

но это не очень хорошее решение, потому что для больших объектов JSON потребуется много ресурсов.