Parâmetros de descanso JavaScript

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 argscomo um array. Por exemplo:

fn(1, 2, 3, "A", "B", "C");Linguagem de código:  JavaScript  ( javascript )

A argsmatriz 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 parameterLinguagem 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, argsem uma matriz. Portanto, você poderia usar o for..ofloop 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 argumentsobjeto da função.

No entanto, o argumentsobjeto em si não é uma instância do Arraytipo. 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 argumentsobjeto. 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 ParametersLinguagem 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.