Служебные функции

Кроме методов для работы с элементами, у объекта $ есть служебные функции для обычных данных: объединить объекты, перебрать значения, собрать строку параметров. Часть из них сегодня заменяют встроенные возможности JavaScript, но в старом коде они встречаются постоянно.

$.extend: слияние объектов

$.extend() копирует свойства из следующих объектов в первый. Типичный случай — настройки по умолчанию, которые дополняют настройками пользователя:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const defaults = { sort: 'date', perPage: 10, showDone: true };
  const options = { perPage: 20 };
 
  const settings = $.extend({}, defaults, options);
 
  console.log(settings.sort, settings.perPage, settings.showDone); // date 20 true
  console.log(defaults.perPage); // 10
</script>

Первым аргументом передан пустой объект, поэтому defaults не изменился. Если первым поставить defaults, его свойства будут перезаписаны.

Глубокое слияние

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

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const defaults = { colors: { done: 'gray', todo: 'black' } };
  const options = { colors: { done: 'green' } };
 
  const shallow = $.extend({}, defaults, options);
  const deep = $.extend(true, {}, defaults, options);
 
  console.log(shallow.colors.todo); // undefined
  console.log(deep.colors.todo);    // black
</script>

$.each: перебор массивов и объектов

$.each() перебирает массив (функция получает индекс и значение) или объект (ключ и значение):

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const counts = { todo: 2, done: 5 };
 
  $.each(counts, function (key, value) {
    console.log(key + ': ' + value);
  });
</script>

В выводе две строки: todo: 2 и done: 5. Как и в методе each(), возврат false прерывает перебор.

$.param и $.isEmptyObject

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  console.log($.param({ q: 'хлеб', page: 2 })); // q=%D1%85%D0%BB%D0%B5%D0%B1&page=2
  console.log($.isEmptyObject({}));            // true
</script>

$.param() превращает объект в строку параметров адреса — так jQuery готовит data для запросов. $.isEmptyObject() проверяет, что у объекта нет свойств.

Устаревшие функции

Некоторые функции появились, когда в JavaScript ещё не было замены. С jQuery 3 они помечены устаревшими, а в jQuery 4 удалены:

То же на обычном JavaScript

$.extend({}, a, b) соответствует Object.assign({}, a, b) или { ...a, ...b }; глубокую копию одного объекта даёт structuredClone(). $.each по объекту — это Object.entries(obj).forEach(...), $.param — new URLSearchParams(obj).toString().

Частая ошибка

Писать в новом коде $.trim(title). Пока сайт работает на jQuery 3, это работает, но после обновления до jQuery 4 вызов упадёт с ошибкой $.trim is not a function. Используйте встроенный title.trim().