Объединение объектов (ассоциативные массивы)

Question

Какой лучший / стандартный способ объединения двух ассоциативных массивов в JavaScript? Все ли делают это, просто катая свой цикл for?

Answer 1

Yahoo UI (YUI) также имеет вспомогательную функцию для этого:

http://developer.yahoo.com/yui/examples/yahoo/yahoo_merge.html

YAHOO.namespace('example');

YAHOO.example.set1 = { foo : "foo" };
YAHOO.example.set2 = { foo : "BAR", bar : "bar" };
YAHOO.example.set3 = { foo : "FOO", baz : "BAZ" };

var Ye = YAHOO.example;

var merged = YAHOO.lang.merge(Ye.set1, Ye.set2, Ye.set3);

Answer 2

В 2019 году у вас есть 2 хороших варианта:

Назначение объекта [ doc ]

const result = Object.assign({}, baseObject, updatingObject);

Распространение объектов [ doc ]

const result = { ...baseObject, ...updatingObject};

Первый имеет тенденцию быть более безопасным, более стандартным и поливалентным. Хорошие плюсы и минусы здесь

Answer 3

Вот лучшее решение.

obj1.unshift.apply( obj1, obj2 );

Также, obj1 может расти внутри цикла без каких-либо проблем. (допустим, obj2 является динамическим)

Answer 4

Рекурсивное решение (расширяет также массивы объектов) + проверено нулем

var addProps = function (original, props) {
    if(!props) {
        return original;
    }
    if (Array.isArray(original)) {
        original.map(function (e) {
            return addProps(e, props)
        });
        return original;
    }
    if (!original) {
        original = {};
    }
    for (var property in props) {
        if (props.hasOwnProperty(property)) {
            original[property] = props[property];
        }
    }
    return original;
};

Тесты * * 1004

console.log(addProps([{a: 2}, {z: 'ciao'}], {timestamp: 13}));
console.log(addProps({single: true}, {timestamp: 13}));
console.log(addProps({}, {timestamp: 13}));
console.log(addProps(null, {timestamp: 13}));

[ { a: 2, timestamp: 13 }, { z: 'ciao', timestamp: 13 } ]
{ single: true, timestamp: 13 }
{ timestamp: 13 }
{ timestamp: 13 }

Answer 5

Чтобы объединить массивы в jQuery, как насчет $ .merge?

var merged = $.merge([{id:3, value:'foo3'}], [{id:1, value:'foo1'}, {id:2, value:'foo2'}]);
merged[0].id == 3;
merged[0].value == 'foo3';
merged[1].id == 1;
merged[1].value == 'foo1';
merged[2].id == 2;
merged[2].value == 'foo2';

Answer 6

Мне нужно глубокое слияние объектов. Так что все остальные ответы мне не очень помогли. _.extend и jQuery.extend работают хорошо, если у вас нет рекурсивного массива, как у меня. Но все не так плохо, вы можете запрограммировать его за пять минут:

var deep_merge = function (arr1, arr2) {
    jQuery.each(arr2, function (index, element) {
        if (typeof arr1[index] === "object" && typeof element === "object") {
            arr1[index] = deep_merge(arr1[index], element);
        } else if (typeof arr1[index] === "array" && typeof element === "array") {
            arr1[index] = arr1[index].concat(element);
        } else {
            arr1[index] = element;
        }
    });
    return arr1;
}