Автор выбрал COVID-19 Relief Fund для получения пожертвования в рамках программы Write for DOnations.
В ECMAScript 2015 были введены параметры функций по умолчанию для языка JavaScript. Они позволяют разработчикам инициализировать функции со значениями по умолчанию, если при вызове функции не указываются аргументы. Такая инициализация параметров функций упрощает чтение функций, снижает вероятность ошибок и задает поведение функций по умолчанию. Это позволит избежать ошибок, вытекающих из передачи неопределенных (undefined
) аргументов и деструктуризации несуществующих объектов.
В этой статье мы рассмотрим разницу между параметрами и аргументами, узнаем об использовании параметров функций по умолчанию, увидим альтернативные способы поддержки параметров по умолчанию и выясним, какие значения и выражения можно использовать в качестве параметров по умолчанию. Также мы рассмотрим примеры, демонстрирующие работу параметров по умолчанию в JavaScript.
Прежде чем изучать параметры функций по умолчанию, важно понять, какие значения по умолчанию могут принимать параметры. Поэтому вначале мы рассмотрим разницу между аргументами и параметрами функции. Если вы хотите узнать больше об этом различии, ознакомьтесь с ранее опубликованной в нашей серии JavaScript статьей Определение функций в JavaScript.
В следующем блоке кода мы создадим функцию, возвращающую куб заданного числа, определяемого как x
:
Переменная x
в этом примере является параметром, то есть переменной с именем, которая передается функции. Параметр всегда должен содержаться в переменной и никогда не может иметь прямого значения.
Теперь рассмотрим следующий блок кода, вызывающий созданную нами функцию cube
:
Результат будет выглядеть следующим образом:
Output1000
В данном случае 10
— это аргумент, то есть значение, передаваемое функции при ее вызове. Значение часто может также содержаться в переменной, как показано в следующем примере:
Результат будет таким же:
Output1000
Если вы не передадите аргумент в функцию, которая ожидает его получить, функция будет использовать подразумеваемое значение undefined
:
Результат будет выглядеть следующим образом:
OutputNaN
В данном случае cube()
пытается рассчитать значение undefined * undefined * undefined
и получает результат NaN
(«не число»). Дополнительную информацию можно найти в посвященном числам разделе статьи Типы данных в JavaScript.
Автоматическое поведение иногда может представлять собой проблему. В некоторых случаях параметр должен иметь значение, даже если функции не передается никаких аргументов. В таком случае и будут полезны параметры по умолчанию, о которых мы более подробно расскажем в следующем разделе.
С добавлением параметров по умолчанию в ES2015 вы можете назначать для любого параметра значение по умолчанию, которое функция будет использовать вместо undefined
, если эта функция будет вызвана без аргумента. В этом разделе мы покажем, как сделать это вручную, и поможем вам настроить параметры по умолчанию.
Без параметров по умолчанию нам нужно будет явно проверять наличие значений undefined
, чтобы задать значения по умолчанию, как показано в этом примере:
Здесь используется условное выражение для проверки автоматической передачи значения undefined
, а затем задается значение x
, равное 5
. Результат выглядит следующим образом:
Output125
Использование параметров по умолчанию позволяет добиться того же результата с намного меньшим количеством кода. Вы можете задать значение по умолчанию для параметра функции cube
, используя оператор равенства (=
), как показано здесь:
Теперь при вызове функции cube
без аргумента она будет присваивать значение 5
переменной x
и выводить результат расчета вместо NaN
:
Output125
При наличии аргумента функция будет выполняться обычным образом, игнорируя значение по умолчанию:
Output8
Однако стоит отметить, что значение параметра по умолчанию также заменяет явно переданный функции аргумент undefined
, как показано в этом примере:
В результате будет провизведен расчет с переменной x
, равной 5
:
Output125
В этом случае были рассчитаны значения для параметра по умолчанию, и явно переданное значение undefined
не заменило этот параметр.
Вы получили представление о базовом синтаксисе параметров по умолчанию, и в следующем разделе мы покажем, как параметры по умолчанию работают с разными типами данных.
Любое примитивное значение или объект можно использовать в качестве значения параметра по умолчанию. В этом разделе вы увидите, как подобная гибкость расширяет возможности использования параметров по умолчанию.
Задайте параметры, используя число, строку, логическое значение, объект, массив и нулевое значение в качестве значения по умолчанию. В этом примере будет использоваться синтаксис функции arrow:
При вызове этих функций без параметров будут использоваться значения по умолчанию:
Output42
"Shark"
true
{id: 7}
(3) [1, 2, 3]
null
Любой объект, создаваемый в параметре по умолчанию, будет создаваться при каждом вызове функции. Часто такое поведение параметров по умолчанию используется для получения значений из объекта. Если вы пытаетесь провести деструктурирование или получить значение из несуществующего объекта, будет выведена ошибка. Если же параметр по умолчанию представляет собой пустой объект, он просто выдаст значения undefined
вместо ошибки:
Это позволяет избежать ошибок, вызванных деструктурированием несуществующих объектов.
Вы увидели, как параметры по умолчанию работают с разными типами данных. В следующем разделе мы объясним, как можно совместно использовать разные параметры по умолчанию.
Вы можете использовать в функции любое желаемое количество параметров по умолчанию. В этом разделе мы покажем, как сделать это и как использовать такую схему для манипуляций с DOM в реальном примере.
Вначале декларируем функцию sum()
с несколькими параметрами по умолчанию:
По умолчанию производится следующий расчет:
Output3
Кроме того, значение параметра может использоваться в любом последующем параметре по умолчанию, слева направо. Например, данная функция createUser
создает пользовательский объект userObj
как третий параметр, и функция просто возвращает userObj
с первыми двумя параметрами:
Если вы вызовете user
, вы получите следующий результат:
Output{name: "Jean-Luc Picard", rank: "Captain"}
Обычно рекомендуется размещать все параметры по умолчанию в конце списка параметров, чтобы можно было легко опускать необязательные значения. Если вы используете параметр по умолчанию первым, вам нужно будет явно передать undefined
для использования значения по умолчанию.
Вот пример с параметром по умолчанию в начале списка:
При вызове этой функции нужно вызвать defaultFirst()
с двумя аргументами:
Результат будет выглядеть следующим образом:
Output3
Вот пример с параметром по умолчанию в конце списка:
В результате будет получено то же значение:
Output3
Обе функции дают один и тот же результат, однако функция, где значение по умолчанию указано последним, вызывается намного удобнее.
Приведем реальный пример функции, которая создает элемент DOM и добавляет текстовый ярлык и классы, если они существуют.
Вы можете вызвать функцию с несколькими классами в массиве:
При вызове greeting
значение будет следующим:
Output<p class="greeting active">Hello!</p>
Если вы оставите массив classNames
вне вызова функции, функция все равно сработает.
greeting2
теперь имеет следующее значение:
Output<p>Hello!</p>
В этом примере forEach()
можно вызвать для пустого массива без каких-либо проблем. Если бы пустой массив не был задан в параметре по умолчанию, мы получили бы следующее сообщение об ошибке:
OutputVM2673:5 Uncaught TypeError: Cannot read property 'forEach' of undefined
at createNewElement (<anonymous>:5:14)
at <anonymous>:12:18
Мы увидели, как могут взаимодействовать разные параметры по умолчанию, и теперь можем перейти к следующему разделу и посмотреть, как работают вызовы функций в качестве параметров по умолчанию.
Помимо примитивов и объектов, в качестве параметра по умолчанию можно использовать результат вызова функции.
В этом блоке кода мы создадим функцию, возвращающую случайное число, и используем результат как значение параметра по умолчанию для функции cube
:
Теперь при каждом вызове функции cube
без параметра результаты могут отличаться:
Вывод вызова этих функций будет отличаться:
Output512
64
Вы также можете использовать встроенные методы, такие как в объекте Math
, и использовать значение, возвращаемое при вызове одной функции, в качестве параметра для другой функции.
В следующем примере в качестве значения x
назначается случайное число, которое используется как параметр для созданной нами функции cube
. Параметр y
рассчитывает кубический корень числа и проверяет равенство x
и y
:
В результате вы получите следующий вывод:
Outputtrue
Параметр по умолчанию даже может представлять собой определение функции, как видно в этом примере, где параметр определяется как внутренняя
функция и возвращается вызов функции parameter
:
Output100
Внутренняя
функция создается с нуля каждый раз при вызове внешней
функции.
Из этой статьи вы узнали, что представляют собой параметры функций по умолчанию и как их использовать. Теперь вы можете использовать параметры по умолчанию для оптимизации функций и повышения удобства их чтения. Также вы можете назначать для параметров пустые объекты и массивы, чтобы уменьшить сложность и оптимизировать код в таких ситуациях, как извлечение значений из объекта или применение цикла к массиву.
Если вы хотите узнать больше о JavaScript, перейдите на главную страницу нашей серии материалов Написание кода на JavaScript или перейдите к нашей серии Написание кода на Node.js для изучения материалов по серверной разработке.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!