Espalhe a syntax ES6

Considere o seguinte código de exemplo

var x = ["a", "b", "c"]; var z = ["p", "q"]; var d = [...x, ...z]; var e = x.concat(z); 

Aqui, o valor de d e e é exatamente o mesmo e é igual a ["a", "b", "c", "p", "q"] , então,

  1. Qual é exatamente a diferença entre esses dois?
  2. Qual deles é mais eficiente e por quê?
  3. O que exatamente é o uso da syntax de propagação?

Você não acha que a introdução desses pequenos atalhos em uma linguagem formal e vasta pode deixar alguns erros despercebidos, quer dizer, ou é bastante desnecessária ou eu não percebo que é necessário.

  1. No seu exemplo dado, não há essencialmente nenhuma diferença entre os dois
  2. .concat é significativamente mais eficiente: http://jsperf.com/spread-into-array-vs-concat porque ... (propagação) é meramente açúcar de syntax sobre a syntax subjacente mais fundamental que explicitamente itera sobre índices para expandir o array.
  3. Spread permite syntax açucarada em cima de manipulação de matriz direta mais desajeitada

Para expandir # 3 acima, seu uso de propagação é um exemplo um pouco inventado (embora um que provavelmente aparecerá na natureza com freqüência). A propagação é útil quando – por exemplo – a totalidade de uma lista de argumentos deve ser passada para .call no corpo da function.

 function myFunc(){ otherFunc.call( myObj, ...args ); } 

versus

 function myFunc(){ otherFunc.call( myObj, args[0], args[1], args[2], args[3], args[4] ); } 

Este é outro exemplo arbitrário, mas é um pouco mais claro por que o operador de propagação será bom para usar em algumas situações verbosas e desajeitadas.

Como @loganfsmyth aponta :

O Spread também funciona em objects iteráveis ​​arbitrários, o que significa que ele não funciona apenas no Array s, mas também no Map and Set entre outros.

Esse é um ótimo ponto, e acrescenta à ideia de que – embora não seja impossível alcançá-lo no ES5 – a funcionalidade introduzida no operador spread é um dos itens mais úteis na nova syntax.


Para a syntax subjacente real para o operador spread neste contexto específico (desde que ... também pode ser um parâmetro “rest”), consulte a especificação . “syntax subjacente mais fundamental que explicitamente itera sobre índices para expandir a matriz”, como escrevi acima, é suficiente para GetIterator o ponto, mas a definição real usa GetValue e GetIterator para a variável que segue.

Não há diferença entre estes dois no exemplo dado. Para concatenação, podemos usar o método concat over spread operator. No entanto, o uso do operador de spread não se limita à concatenação de matrizes.

A syntax de propagação permite que uma iterável, como uma expressão de matriz ou cadeia de caracteres, seja expandida. Pode ser usado nos seguintes cenários.

  1. Operador de spread com matrizes

    • Concatenação de Matrizes
    • String para Matriz
    • Array como Argumentos para funcionar.
  2. Operador de spread com objects

    • Concatenação de Objetos

Para ver como é uma demonstração de todos esses usos e para testar suas mãos no código, por favor, siga o link abaixo (codepen.io)

ES6 – Demonstração do Operador de Spread

 /** * Example-1: Showing How Spread Operator can be used to concat two or more arrays. */ const americas = ['South America', 'North America']; const eurasia = ['Europe', 'Asia']; const world = [...americas, ...eurasia]; /** * Example-2: How Spread Operator can be used for string to array. */ const iLiveIn = 'Asia'; const iLiveIntoArray = [...iLiveIn]; /** * Example-3: Using Spread Operator to pass arguments to function */ const numbers = [1,4,5]; const add = function(n1,n2,n3){ return n1 + n2 + n3; }; const addition = add(numbers[0],numbers[1],numbers[2]); const additionUsingSpread = add(...numbers); /** * Example-4: Spread Operator, can be used to concat the array */ const personalDetails = { name: 'Ravi', age: '28', sex: 'male' }; const professionalDetails = { occupation: 'Software Engineer', workExperience: '4 years' }; const completeDetails = {...personalDetails, ...professionalDetails};