jQuery функция $.extend()

jQuery утилиты

Определение и применение

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


Обращаю Ваше внимание, что функция $.extend() может получать только один аргумент, в этом случае происходит расширение пространства имен jQuery (пример ниже).

По умолчанию слияние объектов, которое выполняется с помощью функции $.extend() не является рекурсивным (происходит поверхностное копирование). Если свойство первого объекта само по себе является объектом или массивом, то оно будет полностью перезаписано свойством с тем же ключом во втором, или последующем объекте. Значения не объединяются.

Свойства со значением undefined не копируются, однако свойства, унаследованные от прототипа объекта будут скопированы. Свойства, которые являются объектом, созданным с помощью new MyCustomObject(args), или встроенных типов JavaScript, таких как Date, или RegExp не перестраиваются и будут отображаться как простые объекты в результирующем объекте, или массиве.


Современный стандарт ES6 поддерживает объединение объектов, используя нативный спрэд оператор (...), примеры вы можете найти внизу страницы. Кроме того, вы можете произвести поверхностное копирование объектов с использованием нативного метода JavaScipt assign()ECMAScript 2015

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 утилиты
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.