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

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

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

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

jQuery синтаксис:

Синтаксис 1.0:

JavaScript
// расширяем пространство имен jQuery
$.extend( obj )

// поверхностное копирование
$.extend( target, obj1, ...objX )

Синтаксис 1.1.4:

JavaScript
// глубокое копирование
$.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 не поддерживается.

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

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

Функция $.extend() — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html
HTML
<p>Результат выполнения выводится в консоль под примером.</p>
main.js
JavaScript
// создаем новый пустой объект и объединяем в нем содержимое другого объекта (поверхностно клонируем)
const oldObject = { a: 'value' }
const newObject = $.extend({}, oldObject)
console.log(newObject) // {a: "value"}
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере мы рассмотрели как поверхностно клонировать объект в новый объект, использую функцию $.extend(). Обратите внимание, что клонируемый объект при этом не изменяется.

Функция $.extend() — пример 2

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html
HTML
<p>Результат выполнения выводится в консоль под примером.</p>
main.js
JavaScript
// инициализируем переменную, содержащую объект
let obj = { a: 'value' }
// объединяем два объекта в первый объект
obj = $.extend(obj, { b: 'value' }, { c: 'value' })
console.log(obj) // {a: "value", b: "value", c: "value"}
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере мы рассмотрели как с использованием функции $.extend() объединить два объекта в первый объект.

Функция $.extend() — пример 3

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html
HTML
<p>Результат выполнения выводится в консоль под примером.</p>
main.js
JavaScript
// объединение объектов, которые имеют одинаковые ключи
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"}
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере рассмотрена ситуация при которой объединяемые объекты имеют одинаковые ключи, в этом случае при каждом объединении свойство будет перезаписано, и в итоге в первом объекте будет значение из последнего объединяемого объекта. Обратите внимание, что свойство, которое содержит значение undefined было проигнорировано.

Функция $.extend() — пример 4

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html
HTML
<p>Результат выполнения выводится в консоль под примером.</p>
main.js
JavaScript
// объединение объектов, которые имеют одинаковые ключи и объект в виде значения
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"} }
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере рассмотрена ситуация при которой объединяемые объекты имеют одинаковые ключи, а значение этих ключей является объектом, по аналогии с предыдущим примером при каждом объединении свойство будет перезаписано, и в итоге в первом объекте будет значение из последнего объединяемого объекта.

Глубокое копирование

Функция $.extend() — пример 5

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html
HTML
<p>Результат выполнения выводится в консоль под примером.</p>
main.js
JavaScript
// объединение объектов, используя глубокое копирование
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"}
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере рассмотрена ситуация при которой объединяемые объекты имеют одинаковые ключи, а значение этих ключей является объектом. В отличие от предыдущего примера копирование происходит рекурсивно (глубокое копирование), а не поверхностно. Благодаря этому, не смотря на то, что элементы имеют одинаковые ключи, мы не перезаписываем значение ключа в первом объекте, а добавляем в это значение значения из других объектов, которые имеют такой же ключ.

Расширение пространства имен jQuery

Функция $.extend() — пример 6

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html
HTML
<p>Результат выполнения выводится в консоль под примером.</p>
main.js
JavaScript
// расширяем пространство имен jQuery
$.extend({ myMegaFunction: (val) => console.log('my mega ' + val) }) // добавляем пользовательскую функцию
$.myMegaFunction('hello') // my mega hello
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере мы рассмотрели как произвести расширение пространтва имен jQuery добавив при этом новую пользовательскую функцию.

Копирование объекта с использованием спрэд оператора

Функция $.extend() — пример 7

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html
HTML
<p>Результат выполнения выводится в консоль под примером.</p>
main.js
JavaScript
// объединение объектов, используя нативный спрэд оператор (современный стандарт ES6)
var first = { a: 1 }
var second = { b: 2 }
first = { ...first, ...second }
console.log(first) // {a: 1, b: 2}

// объединяем два объекта в первый объект, используя нативный спрэд оператор (современный стандарт ES6)
var first = { a: 1 }
var second = { b: 2 }
var newArray = { ...first, ...second }
console.log(newArray) // {a: 1, b: 2}
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере мы рассмотрели с Вами как произвести объединение объектов с использованием спрэд оператора (синтаксис ECMAScript 2018).