jQuery функция $.extend()
jQuery утилитыОпределение и применение
jQuery функция $.extend() позволяет объединить содержимое двух, или более объектов в один объект.
Обращаю Ваше внимание, что функция $.extend() может получать только один аргумент, в этом случае происходит расширение пространства имен jQuery (пример ниже).
По умолчанию слияние объектов, которое выполняется с помощью функции $.extend() не является рекурсивным (происходит поверхностное копирование). Если свойство первого объекта само по себе является объектом или массивом, то оно будет полностью перезаписано свойством с тем же ключом во втором, или последующем объекте. Значения не объединяются.
Свойства со значением undefined не копируются, однако свойства, унаследованные от прототипа объекта будут скопированы. Свойства, которые являются объектом, созданным с помощью new MyCustomObject(args), или встроенных типов JavaScript, таких как Date, или RegExp не перестраиваются и будут отображаться как простые объекты в результирующем объекте, или массиве.
Современный стандарт ES6 поддерживает объединение объектов, используя нативный спрэд оператор (...), примеры вы можете найти внизу страницы. Кроме того, вы можете произвести поверхностное копирование объектов с использованием нативного метода JavaScipt assign()
jQuery синтаксис:
Синтаксис 1.0: // расширяем пространство имен jQuery $.extend( obj ) // поверхностное копирование $.extend( target, obj1, ...objX ) Синтаксис 1.1.4: // глубокое копирование $.extend( deep, target, obj1, ...objX ) target - Object obj1 - Object objX - Object deep - Boolean
Добавлен в версии jQuery
1.0, синтаксис расширен в версии 1.1.4Значения параметров
Параметр | Описание |
---|---|
obj | Объект, который расширит пространство имен jQuery. Если в функции передан только один аргумент, то это означает, что целевой аргумент был опущен. В этом случае сам объект jQuery считается целевым. Таким образом можно добавить новые функции в пространство имен jQuery. Это может быть полезно для авторов плагинов, желающих добавить новые методы в библиотеку jQuery. |
target | Целевой объект, который получит новые свойства, если будут переданы дополнительные объекты. Имейте в виду, что целевой объект будет изменен, а также будет возвращен из функции. |
obj1 | Объект, содержащий дополнительные свойства для слияния. |
objX | Дополнительные объекты, содержащие свойства для слияния. Аргументы, содержащие значения null, или undefined игнорируются. |
deep | Если указано логическое значение true, то копирование происходит рекурсивно (глубокое копирование). Передача логического значения false не поддерживается. |
Пример использования
Поверхностное копирование
// создаем новый пустой объект и объединяем в нем содержимое другого объекта (поверхностно клонируем) const oldObject = {a: "value"}; const newObject = $.extend({}, oldObject); console.log(newObject); // {a: "value"}
В этом примере мы рассмотрели как поверхностно клонировать объект в новый объект, использую функцию $.extend(). Обратите внимание, что клонируемый объект при этом не изменяется.
// инициализируем переменную, содержащую объект let obj = {a: "value"}; // объединяем два объекта в первый объект obj = $.extend( obj, {b: "value"}, {c: "value"} ); console.log(newObject); // {a: "value", b: "value", c: "value"}
В этом примере мы рассмотрели как с использованием функции $.extend() объединить два объекта в первый объект.
// объединение объектов, которые имеют одинаковые ключи const first = {a: "value1", }; const second = {a: "value2"}; const third = {a: "value3", c: undefined, d: null} ; // свойства со значением undefined и null игнорируются $.extend( first, second, third); console.log(first); // {a: "value3"}
В этом примере рассмотрена ситуация при которой объединяемые объекты имеют одинаковые ключи, в этом случае при каждом объединении свойство будет перезаписано, и в итоге в первом объекте будет значение из последнего объединяемого объекта. Обратите внимание, что свойство, которое содержит значение undefined и null было проигнорировано.
// объединение объектов, которые имеют одинаковые ключи и объект в виде значения const first = {a: {item1: "value1", item2: "value2"} }; const second = {a: {item3: "value3"} }; const third = {a: {item4: "value4"} }; $.extend( first, second, third); console.log(first); // {a: {item4: "value4"} }
В этом примере рассмотрена ситуация при которой объединяемые объекты имеют одинаковые ключи, а значение этих ключей является объектом, по аналогии с предыдущим примером при каждом объединении свойство будет перезаписано, и в итоге в первом объекте будет значение из последнего объединяемого объекта.
Глубокое копирование
// объединение объектов, используя глубокое копирование const first = {a: {item1: "value1", item2: "value2"} }; const second = {a: {item3: "value3"} }; const third = {a: {item4: "value4"} }; $.extend( true, first, second, third); console.log(first); // a: {item1: "value1", item2: "value2", item3: "value3", item4: "value4"}
В этом примере рассмотрена ситуация при которой объединяемые объекты имеют одинаковые ключи, а значение этих ключей является объектом. В отличие от предыдущего примера копирование происходит рекурсивно (глубокое копирование), а не поверхностно. Благодаря этому, не смотря на то, что элементы имеют одинаковые ключи, мы не перезаписываем значение ключа в первом объекте, а добавляем в это значение значения из других объектов, которые имеют такой же ключ.
Расширение пространства имен jQuery
// расширяем пространство имен jQuery $.extend( {myMegaFunction: (val)=> console.log("my mega " + val)} ); // добавляем пользовательскую функцию $.myMegaFunction("hello"); // my mega hello
В этом примере мы рассмотрели как произвести расширение пространтва имен jQuery добавив при этом новую пользовательскую функцию.
Копирование объекта с использованием спрэд оператора
// объединение объектов, используя нативный спрэд оператор (современный стандарт ES6) let first = {a: 1}; const second = {b: 2}; first = {...first, ...second}; console.log(first); // {a: 1, b: 2} // объединяем два объекта в первый объект, используя нативный спрэд оператор (современный стандарт ES6) let first = {a: 1}; const second = {b: 2}; const newArray = {...first, ...second}; console.log(newArray); // {a: 1, b: 2}
В этом примере мы рассмотрели с Вами как произвести объединение объектов с использованием спрэд оператора (синтаксис ES6).
jQuery утилиты