jQuery extend() функция объединения содержимого нескольких объектов

Штатная функция jQuery.extend() позволяет объединить содержимое двух или нескольких объектов , и поместить результат в первый объект.
Сначала мы разберем механизм работы функции extend() , а затем посмотрим как её можно использовать на конкретных примерах.

Синтаксис функции прост:

$.extend(targetObj, Obj1, Obj2, Obj3);

targetObj – это объект – цель, его содержимое будет объединено с Obj1, Obj2, Obj3 и так далее. Объектов объединяемых с целевым может быть сколько угодно. Результатом работы функции станет преобразование объекта targetObj.

Как это работает:
var targetObj = {
webmaster: "John",
designer: "Jane",
user: "Stephen"
};
/* первый объект с данными - его будем объединять с... */
var Obj1 = {
webmaster: "Stan",
designer: "Ann",
};
/* с данными объекта Obj1 */
alert(targetObj.webmaster); // до объединения результатом будет окно с текстом John
alert(targetObj.user); // результатом будет окно с текстом Stephen
$.extend(targetObj, Obj1);
/* запускаем функцию extend() */
alert(targetObj.webmaster); // после объединения результатом будет окно с текстом Stan
alert(targetObj.user); // результатом будет окно с текстом Stephen , так как в Obj1 не было ключа "user" его значение осталось неизменным

У функции extend() есть своя особенность. Если в целевом объекте присутствует объект в объекте,  то после объединения эти данные будут заменены в независимости от наличия такой же структуры у объединяемого объекта:
var targetObj = {
webmaster: "John",
designer: {first : "Jane", second : "Ehlen"}
};
/* первый объект с данными - его будем объединять с... */
var Obj1 = {
webmaster: "Stan",
designer: {first : "Ann"}
};
/* с данными объекта Obj1 */
alert(targetObj.designer.first); // до объединения результатом будет окно с текстом Jane
alert(targetObj.designer.second); // результатом будет окно с текстом Ehlen
$.extend(targetObj, Obj1);
/* запускаем функцию extend() */
alert(targetObj.designer.first); // после объединения результатом будет окно с текстом Ann для first , second исчезнет
alert(targetObj.designer.second); // результат - undefinded

Чтобы функция extend() последовательно обходила объекты в объектах, начиная с jQuery версии 1.1.4, появился параметр deep принимающий значения true и false (по-умолчанию false):

$.extend(true, targetObj, Obj1); // включить рекурсию

При включении рекурсивного обхода targetObj.designer.second (из примера выше) будет определен. Вместо undefinded имеем Ehlen.

Если Вы хотите чтобы все объекты, участвующие в объединении, остались сами собой , а результат оказался в новом объекте, целевой target объект можно опустить:
var Obj1 = {
webmaster: "John",
price: 17
};
var Obj2 = {
webmaster: "Stan",
room: 3
};
var NewObj = $.extend({}, Obj1, Obj2);
alert(Obj1.webmaster); // результатом будет окно с текстом John
alert(Obj2.webmaster); // результатом будет окно с текстом Stan
alert(NewObj.webmaster); // результатом будет окно с текстом Stan
alert(NewObj.price); // результат 17
alert(NewObj.room); // результат 3

Опубликовано 08.11.2015 в 17:36 · Автор Вебдизайнеру, сисадмину, вебмастеру · Ссылка
Рубрики: jQuery · Теги: , , , , , ,