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 ES6 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 ES6 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 ES6 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 array, Listas de argumento |
ECMAScript 2016 Draft (7th Edition, 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 |