В этом руководстве вы узнаете, как устанавливать и обрабатывать параметры по умолчанию JavaScript в ES6.
function say(message='Hi') {
console.log(message);
}
say(); // 'Hi'
say('Hello') // 'Hello'Значение по умолчанию параметра message в функции say() — 'Hi'.
В JavaScript параметры функции по умолчанию позволяют вам инициализировать именованные параметры значениями по умолчанию, если в функцию не переданы значения или значения undefined.
Аргументы и параметры
Иногда вы можете использовать термины аргумент и параметр взаимозаменяемо. Однако по определению параметры — это то, что вы указываете в объявлении функции, тогда как аргументы — это то, что вы передаете в функцию.
Рассмотрим следующую функцию add() :
function add(x, y) {
return x + y;
}
add(100,200);В этом примере x и y являются параметрами функции add(), а значения 100 и 200, передаваемые функции add(), являются аргументами.
Установка параметров
В JavaScript параметр имеет значение по умолчанию undefined. Это означает, что если вы не передадите аргументы в функцию, ее параметры будут иметь значения по умолчанию undefined.
Следующий пример:
function say(message) {
console.log(message);
}
say(); // undefinedФункция say() принимает параметр message. Поскольку мы не передали никаких аргументов в функцию say(), значение параметра message не undefined.
Предположим, вы хотите присвоить параметру message значение по умолчанию 10.
Типичный способ добиться этого — проверить значение параметра и присвоить значение по умолчанию, если оно не undefined, с помощью тернарного оператора:
function say(message) {
message = typeof message !== 'undefined' ? message: 'Hi';
console.log(message);
}
say(); // 'Hi'В этом примере мы не передавали никакого значения в функцию say(). Поэтому значение аргумента сообщения по умолчанию равно undefined. Внутри функции мы переназначили переменной message строку Hi.
ES6 предоставляет вам более простой способ установить значения по умолчанию для параметров функции, например:
function fn(param1=default1, param2=default2,..) {
}В приведенном выше синтаксисе вы используете оператор присваивания( = ) и значение по умолчанию после имени параметра, чтобы установить значение по умолчанию для этого параметра. Например:
function say(message='Hi') {
console.log(message);
}
say(); // 'Hi'
say(undefined); // 'Hi'
say('Hello'); // 'Hello'Как это работает:
- В первом вызове функции мы не передавали никаких аргументов в функцию
say(), поэтому параметрmessageпринял значение по умолчанию'Hi'. - Во втором вызове функции мы передали значение
undefinedв функциюsay(), поэтому параметрmessageтакже принял значение по умолчанию'Hi'. - В третьем вызове функции мы передали строку
'Hello'в функциюsay(), поэтому параметрmessageпринял строку'Hello'в качестве значения по умолчанию.
Дополнительные примеры
Давайте рассмотрим еще несколько примеров, чтобы изучить некоторые доступные варианты установки значений по умолчанию для параметров функции.
1) Передача неопределенных аргументов
Следующая функцияcreateDiv() создает в документе новый элемент
с определенной высотой, шириной и стилем границы:
function createDiv(height = '100px', width = '100px', border = 'solid 1px red') {
let div = document.createElement('div');
div.style.height = height;
div.style.width = width;
div.style.border = border;
document.body.appendChild(div);
return div;
}Следующий пример не передает никаких аргументов в функцию, поэтому функция createDiv() использует значения по умолчанию для параметров.
createDiv();
Предположим, вы хотите использовать значения по умолчанию для параметров высоты и ширины и определенный стиль границы. В этом случае вам нужно передать undefined значения первым двум параметрам следующим образом:
createDiv(undefined,undefined,'solid 5px blue');
2) Оценка параметров по умолчанию
Механизм JavaScript оценивает аргументы по умолчанию во время вызова функции. См. следующий пример:
function put(toy, toyBox = []) {
toyBox.push(toy);
return toyBox;
}
console.log(put('Toy Car'));
// -> ['Toy Car']
console.log(put('Teddy Bear'));
// -> ['Teddy Bear'], not ['Toy Car','Teddy Bear']Параметр может принимать значение по умолчанию, которое является результатом функции.
Рассмотрим следующий пример:
function date(d = today()) {
console.log(d);
}
function today() {
return (new Date()).toLocaleDateString("en-US");
}
date();Функция date() принимает один параметр, значением по умолчанию которого является возвращаемое значение функции today(). Функция today() возвращает сегодняшнюю дату в указанном строковом формате.
Когда мы объявили функцию date(), функция today() еще не была вычислена, пока мы не вызвали функцию date().
Мы можем использовать эту функцию, чтобы сделать аргументы обязательными. Если вызывающая сторона не передает никаких аргументов, мы выдаем ошибку следующим образом:
function requiredArg() {
throw new Error('The argument is required');
}
function add(x = requiredArg(), y = requiredArg()) {
return x + y;
}
add(10); // error
add(10, 20); // OK3) Использование других параметров
Вы можете присвоить параметру значение по умолчанию, которое ссылается на другие параметры по умолчанию, как показано в следующем примере:
function add(x = 1, y = x, z = x + y) {
return x + y + z;
}
console.log(add()); // 4В функции add() :
- По умолчанию для параметра
yустановлено значениеx. - Значение по умолчанию
zравно суммеxиy. - Функция
add()возвращает суммуx,yиz.
Список параметров, кажется, имеет свою собственную область. Если вы сошлетесь на параметр, который еще не был инициализирован, вы получите сообщение об ошибке. Например:
function subtract( x = y, y = 1 ) {
return x - y;
}
subtract(10);Сообщение об ошибке:
Uncaught ReferenceError: Cannot access 'y' before initialization
Использование функций
Вы можете использовать возвращаемое функцией значение в качестве значения по умолчанию для параметра. Например:
let taxRate = () = >
0.1;
let getPrice = function(price, tax = price * taxRate()) {
return price + tax;
}
let fullPrice = getPrice(100);
console.log(fullPrice); // 110В функции getPrice() мы вызвали taxRate(), чтобы получить налоговую ставку и использовать эту налоговую ставку для расчета суммы налога на основе цены.
Объект аргументов
Значение объекта arguments внутри функции — это количество фактических аргументов, которые вы передаете функции. Например:
function add(x, y = 1, z = 2) {
console.log(arguments.length);
return x + y + z;
}
add(10); // 1
add(10, 20); // 2
add(10, 20, 30); // 3