В этом руководстве вы узнаете, как использовать остаточные параметры JavaScript для сбора и помещения их в массив.
ES6 предоставляет новый тип параметра, так называемый остаточный параметр, который имеет префикс из трех точек (...). Параметр rest позволяет вам представить неопределенное количество аргументов в виде массива.
Синтаксис:
function fn(a,b,...args) {
//...
}Перед последним параметром( args ) стоит три точки( ... ). Он называется остаточным параметром( ...args ).
Все аргументы, которые вы передаете функции, будут отображаться в списке параметров. В приведенном выше синтаксисе первый аргумент сопоставляется с a, второй сопоставляется с b, а третий, четвертый и т. д. будут храниться в остальных параметрах args в виде массива. Например:
fn(1, 2, 3, "A", "B", "C");
В массиве args хранятся следующие значения:
[3,'A','B','C']
Если вы передадите только первые два параметра, оставшийся параметр будет пустым массивом:
fn(1,2);
args будут:
[]
Обратите внимание, что остальные параметры должны стоять в конце списка аргументов. Следующий код приведет к ошибке:
function fn(a,...rest, b) {
// error
}Ошибка:
SyntaxError: Rest parameter must be last formal parameter
Дополнительные примеры
Следующий пример:
function sum(...args) {
let total = 0;
for (const a of args) {
total += a;
}
return total;
}
sum(1, 2, 3);Вывод скрипта:
6
В этом примере args в массиве. Следовательно, вы можете использовать цикл for..of для перебора его элементов и их суммирования.
Предполагая, что вызывающая функция sum() может передавать аргументы с различными типами данных, такими как число, строка и логическое значение, и вы хотите вычислить только общее количество чисел:
function sum(...args) {
return args
.filter(function (e) {
return typeof e === 'number';
})
.reduce(function (prev, curr) {
return prev + curr;
});
}Следующий скрипт использует новую функцию sum() для суммирования только числовых аргументов:
let result = sum(10,'Hi',null,undefined,20); console.log(result);
Выход:
30
Обратите внимание, что без остальных параметров вы должны использовать объект arguments функции.
Однако сам объект arguments не является экземпляром типа Array. Поэтому вы не можете использовать метод filter() напрямую. В ES5 вы должны использовать Array.prototype.filter.call() следующим образом:
function sum() {
return Array.prototype.filter
.call(arguments, function (e) {
return typeof e === 'number';
})
.reduce(function (prev, curr) {
return prev + curr;
});
}Как видите, параметр rest делает код более элегантным. Предположим, вам нужно отфильтровать аргументы на основе определенного типа, такого как числа, строки, логическое значение и нуль. В этом вам поможет следующая функция:
function filterBy(type, ...args) {
return args.filter(function(e) {
return typeof e === type;
});
}Параметры и функция стрелки
Стрелочная функция не имеет объекта arguments. Поэтому, если вы хотите передать некоторые аргументы стрелочной функции, вы должны использовать остальные параметры. Следующий пример:
const combine = (...args) => {
return args.reduce(function (prev, curr) {
return prev + ' ' + curr;
});
};
let message = combine('JavaScript', 'Rest', 'Parameters'); // =>
console.log(message); // JavaScript Rest ParametersВыход:
JavaScript Rest Parameters
Функция combine() представляет собой стрелку, которая принимает неопределенное количество аргументов и объединяет эти аргументы.
Остаточный параметр в динамической функции
JavaScript позволяет создавать динамические функции с помощью конструктора функций. А оставшийся параметр можно использовать в динамической функции. Вот пример:
var showNumbers = new Function('...numbers', 'console.log(numbers)');
showNumbers(1, 2, 3);Выход:
[ 1, 2, 3 ]