Spread operator

O  operador spread permite uma expressão ser expandida em locais onde múltiplo argumentos (por chamadas de função) ou múltiplos elementos (por array literais) são esperados.

Sintaxe

Para chamadas de função:

minhaFuncao(...objIteravel);

Para array literais:

[...objIteravel, 4, 5, 6]

Desestruturação:

[a, b, ...objIteravel] = [1, 2, 3, 4, 5];

Exemplos

Uma melhor aplicação

Exemplo: é comum usar Function.prototype.apply em casos onde você quer usar um array como argumentos em uma função.

function minhaFuncao(x, y, z) { }
var args = [0, 1, 2];
minhaFuncao.apply(null, args);

Com o spread do ES2015 você pode agora escrever isso acima como:

function minhaFuncao(x, y, z) { }
var args = [0, 1, 2];
minhaFuncao(...args);

Qualquer argumento na lista de argumento pode usar a sintaxe spread e pode ser usado várias vezes.

function minhaFuncao(v, w, x, y, z) { }
var args = [0, 1];
minhaFuncao(-1, ...args, 2, ...[3]);

Um literal array mais poderoso

Exemplo:  Hoje se você tiver um array e quer criar um novo array com esse existente fazendo parte dele, a sintaxe literal do array não é mais suficiente e você deve voltar para o código imperativo, usando uma combinação de push, splice, concat, etc. Com a sintaxe spread isso se torna muito mais sucinto:

var partes = ['ombros', 'joelhos'];
var letra = ['cabeca', ...partes, 'e', 'dedos']; // ["cabeca", "ombros", "joelhos", "e", "dedos"]

Assim como em spread para listas de argumentos ... pode ser usado em qualquer lugar no literal do array e pode ser usado várias vezes.

Apply para new

Exemplo: No ES5 não é possível usar new com apply. (Em ES5 termos, apply faz uma [[Call]] e nao um [[Construct]].) Em ES2015 a sintaxe spread naturalmente suporta isso:

var camposData = lerCamposData(bancoDeDados);
var d = new Date(...camposData);

Um push melhor

Exemplo: push é frequentemente usado para adicionar um array no final de um array existente. No ES5 isso é geralmente feito assim:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// Acrescenta todos itens do arr2 ao arr1
Array.prototype.push.apply(arr1, arr2);

No ES2015 com spread isso se torna:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

Especificações

Especificação Status Comentário
ECMAScript 2015 (6th Edition, ECMA-262) Standard Definido em várias seções da especificação: Inicializador do arrayListas de argumento
ECMAScript 2017 Draft (ECMA-262) Draft  

Compatibilidade com browser

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Operação spread em array literais 46 16 (16) Não suportado Não suportado 7.1
Operação spread em chamadas de função 46 27 (27) Não suportado Não suportado 7.1
Operação spread em desestruturação Não suportado 34 (34) ? ? ?
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Operação spread em array literais Não suportado 46 16.0 (16) Não suportado Não suportado 8 46
Operação spread em chamadas de função Não suportado 46 27.0 (27) Não suportado Não suportado 8 46
Operação spread em desestruturação Não suportado Não suportado 34 (34) ? ? ? Não suportado

Veja também

Etiquetas do documento e colaboradores

Etiquetas: 
 Colaboradores desta página: kdex, cassioscabral
 Última atualização por: kdex,