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

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

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

Значения параметров

Пример использования

Поверхностное копирование

// создаем новый пустой объект и объединяем в нем содержимое другого объекта (поверхностно клонируем)
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).