ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70%Забронировать скидку

Обработка необязательных параметров в JavaScript: подходы

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию
В конце подарим скидку до 55% на обучение
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Для работы с необязательными параметрами в JavaScript удобно использовать значения по умолчанию или деструктуризацию с значениями по умолчанию. Рассмотрим функцию greet:

JS
Скопировать код
function greet(name, message = 'Привет') {
  console.log(`${message} ${name}`);
}

Функцию greet можно вызвать, указав только name, при этом message примет значение 'Привет'. Для управления несколькими необязательными аргументами лучше использовать объект опций:

JS
Скопировать код
function greet({ name, message = 'Привет' } = {}) {
  console.log(`${message} ${name}`);
}

Такой подход позволяет вызывать greet() без параметров, и также устанавливать параметры в любых комбинациях.

Значения по умолчанию VS логическое ИЛИ (||)

Использование 'по умолчанию' вместе с оператором || может привести к неверной обработке ложных значений:

JS
Скопировать код
function greet(name, tone) {
  tone = tone || 'нейтральный'; 
  console.log(`Приветствую, ${name}, мой тон – ${tone}.`);
}

Основная проблема в том, что при ложных значениях tone, таких как 0 или пустая строка "", он принимает значение 'нейтральный'. Решением будет использование значений по умолчанию, которые применяются только при отсутствии переданного значения:

JS
Скопировать код
function greet(name, tone = 'нейтральный') { 
  console.log(`Приветствую, ${name}, мой тон – ${tone}.`);
}

Улучшение практик с помощью rest-параметров и деструктуризации

Для повышения гибкости можно использовать деструктуризацию и rest-параметры:

JS
Скопировать код
function setupEvent({ type = 'click', options = {}, ...rest }) {
  // Настройка события здесь
}

Визуализация

Процесс можно представить как накрытие стола для вечеринки:

СидящийОсновная посудаНеобязательный прибор
Гость 1🍽️ Тарелка, 🥛 Стакан🍴 Вилка, 🍴 Нож, 🥄 Ложка
Гость 2🍽️ Тарелка, 🥛 СтаканЭтому гостю приборы не нужны

Таким образом, как мы готовим стол для гостей с учетом их потребностей в приборах, так и можно организовать функции с необязательными параметрами:

JS
Скопировать код
function dinnerSetup(core, utensils = { fork: true, knife: true, spoon: true }) {
  // Тарелки и стаканы для всех, приборы опциональны
}

Неопределенное количество параметров? Используйте ассоциативные массивы!

Когда требуется установить значения по умолчанию для неопределенного количества параметров, тогда ассоциативные массивы с нотацией квадратных скобок становятся оптимальным решением:

JS
Скопировать код
function drawChart(options = {}) {
  // Стандартные настройки
  const chartDefaults = {
    type: 'line',
    width: 400,
    height: 300,
    // Добавьте здесь больше настроек по умолчанию!
  };

  // Совмещение настроек пользователя с настройками по умолчанию
  for (let key in chartDefaults) {
    options[key] = options[key] || chartDefaults[key];
  }

  // Процесс построения диаграммы здесь!
}

Пользователи Node.js могут использовать parametric

В Node.js можно использовать модуль parametric с npm для перегрузки функций, что предоставляет элегантный способ определения нескольких вариантов сигнатур функции на основе типа и наличия аргументов.

Следите за предложениями ECMAScript

Следует отслеживать предложения ECMAScript, так как они могут внести изменения в работу с параметрами, например, предложения по оператору конвейера или сопоставлению с образцом.

Полезные материалы

  1. Параметры по умолчанию – JavaScript | MDN — подробная информация о параметрах по умолчанию.
  2. Деструктуризация и работа с параметрами в ECMAScript 6 — детальное объяснение деструктуризации для значений по умолчанию и обработки параметров.
  3. Оператор распаковки объектов – JavaScript | MDN — подробное описание работы оператора распаковки объектов.
  4. Rest-параметры – JavaScript | MDN — использование rest-параметров при большом количестве аргументов.
  5. TypeScript: Руководство – Функции — для любителей TypeScript, тут представлена информация о необязательных и параметрах по умолчанию.

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

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

Совместимость — это закон!

Перед использованием новых возможностей стандарта ES, всегда проверяйте таблицу совместимости ECMAScript 2015, чтобы быть уверенным в поддержке данных функций браузерами.