Resumo : neste tutorial, você aprenderá como usar os parâmetros restantes do JavaScript para reunir parâmetros e colocá-los todos em um array.
Introdução aos parâmetros de descanso do JavaScript
ES6 fornece um novo tipo de parâmetro denominado parâmetro rest que possui um prefixo de três pontos (...)
. Um parâmetro rest permite representar um número indefinido de argumentos como um array . Veja a seguinte sintaxe:
function fn(a,b,...args) {
//...
}
Linguagem de código: JavaScript ( javascript )
O último parâmetro ( args
) é prefixado com três pontos ( ...
). É chamado de parâmetro rest ( ...args
).
Todos os argumentos que você passa para a função serão mapeados para a lista de parâmetros. Na sintaxe acima, o primeiro argumento é mapeado para a
, o segundo é mapeado para b
, e o terceiro, o quarto, etc., serão armazenados no parâmetro restante args
como um array. Por exemplo:
fn(1, 2, 3, "A", "B", "C");
Linguagem de código: JavaScript ( javascript )
A args
matriz armazena os seguintes valores:
[3,'A','B','C']
Linguagem de código: JSON/JSON com comentários ( json )
Se você passar apenas os dois primeiros parâmetros, o parâmetro restante será um array vazio:
fn(1,2);
Será args
:
[]
Linguagem de código: JSON/JSON com comentários ( json )
Observe que os demais parâmetros devem aparecer no final da lista de argumentos. O código a seguir resultará em um erro:
function fn(a,...rest, b) {
// error
}
Linguagem de código: JavaScript ( javascript )
Erro:
SyntaxError: Rest parameter must be last formal parameter
Linguagem de código: JavaScript ( javascript )
Mais exemplos de parâmetros de descanso JavaScript
Veja o exemplo a seguir:
function sum(...args) {
let total = 0;
for (const a of args) {
total += a;
}
return total;
}
sum(1, 2, 3);
Linguagem de código: JavaScript ( javascript )
A saída do script é:
6
Neste exemplo, args
em uma matriz. Portanto, você poderia usar o for..of
loop para iterar seus elementos e resumi-los.
Supondo que o chamador da sum()
função possa passar argumentos com vários tipos de dados, como number , string e boolean , e você deseja calcular apenas o total de números:
function sum(...args) {
return args
.filter(function (e) {
return typeof e === 'number';
})
.reduce(function (prev, curr) {
return prev + curr;
});
}
Linguagem de código: JavaScript ( javascript )
O script a seguir usa a nova sum()
função para somar apenas argumentos numéricos:
let result = sum(10,'Hi',null,undefined,20);
console.log(result);
Linguagem de código: JavaScript ( javascript )
Saída:
30
Observe que sem os demais parâmetros, você deve usar o arguments
objeto da função.
No entanto, o arguments
objeto em si não é uma instância do Array
tipo. Portanto, você não pode usar o filter()
método diretamente. No ES5, você deve usar Array.prototype.filter.call()
o seguinte:
function sum() {
return Array.prototype.filter
.call(arguments, function (e) {
return typeof e === 'number';
})
.reduce(function (prev, curr) {
return prev + curr;
});
}
Linguagem de código: JavaScript ( javascript )
Como você pode ver, o parâmetro rest torna o código mais elegante. Suponha que você precise filtrar os argumentos com base em um tipo específico, como números, strings, booleanos e nulos. A seguinte função ajuda você a fazer isso:
function filterBy(type, ...args) {
return args.filter(function (e) {
return typeof e === type;
});
}
Linguagem de código: JavaScript ( javascript )
Parâmetros de descanso JavaScript e função de seta
Uma função de seta não possui o arguments
objeto. Portanto, se você quiser passar alguns argumentos para a função arrow, você deve usar os parâmetros restantes. Veja o exemplo a seguir:
const combine = (...args) => {
return args.reduce(function (prev, curr) {
return prev + ' ' + curr;
});
};
let message = combine('JavaScript', 'Rest', 'Parameters'); // =>
console.log(message); // JavaScript Rest Parameters
Linguagem de código: JavaScript ( javascript )
Saída:
JavaScript Rest Parameters
A combine()
função é uma seta que recebe um número indefinido de argumentos e concatena esses argumentos.
Parâmetro de descanso JavaScript em uma função dinâmica
JavaScript permite criar funções dinâmicas por meio do construtor Function . E é possível usar o parâmetro rest em uma função dinâmica. Aqui está um exemplo:
var showNumbers = new Function('...numbers', 'console.log(numbers)');
showNumbers(1, 2, 3);
Linguagem de código: PHP ( php )
Saída:
[ 1, 2, 3 ]
Linguagem de código: JSON/JSON com comentários ( json )
Neste tutorial, você aprendeu como usar o parâmetro rest do JavaScript para representar um número indefinido de argumentos como um array.