Typescript
  • Introducão
  • Primeiros Passos
    • Por que TypeScript
  • JavaScript
    • Igualdade
    • Referências
    • Null vs. Undefined
    • this
    • Closure
    • Number
    • Truthy
  • Futuro JavaScript Agora
    • Classes
      • Classes Emit
    • Arrow Functions
    • Rest Parameters
    • let
    • const
    • Destructuring
    • Spread Operator
    • for...of
    • Iterators
    • Template Strings
    • Promise
    • Generators
    • Async Await
  • Project
    • Compilation Context
      • tsconfig.json
      • Which Files?
    • Declaration Spaces
    • Modules
      • File Module Details
      • globals.d.ts
    • Namespaces
    • Dynamic Import Expressions
  • Node.js QuickStart
  • Browser QuickStart
  • TypeScript's Type System
    • JS Migration Guide
    • @types
    • Ambient Declarations
      • Declaration Files
      • Variables
    • Interfaces
    • Enums
    • lib.d.ts
    • Functions
    • Callable
    • Type Assertion
    • Freshness
    • Type Guard
    • Literal Types
    • Readonly
    • Generics
    • Type Inference
    • Type Compatibility
    • Never Type
    • Discriminated Unions
    • Index Signatures
    • Moving Types
    • Exception Handling
    • Mixins
  • JSX
    • React
    • Non React JSX
  • Options
    • noImplicitAny
    • strictNullChecks
  • Errors in TypeScript
    • Interpreting Errors
    • Common Errors
  • NPM
  • Testing
    • Jest
    • Cypress
  • Tools
    • Prettier
    • Husky
    • Changelog
  • TIPs
    • String Based Enums
    • Nominal Typing
    • Stateful Functions
    • Bind is Bad
    • Currying
    • Type Instantiation
    • Lazy Object Literal Initialization
    • Classes are Useful
    • Avoid Export Default
    • Limit Property Setters
    • outFile caution
    • JQuery tips
    • static constructors
    • singleton pattern
    • Function parameters
    • Build Toggles
    • Barrel
    • Create Arrays
    • Typesafe Event Emitter
  • StyleGuide
  • TypeScript Compiler Internals
    • Program
    • AST
      • TIP: Visit Children
      • TIP: SyntaxKind enum
      • Trivia
    • Scanner
    • Parser
      • Parser Functions
    • Binder
      • Binder Functions
      • Binder Declarations
      • Binder Container
      • Binder SymbolTable
      • Binder Error Reporting
    • Checker
      • Checker Diagnostics
      • Checker Error Reporting
    • Emitter
      • Emitter Functions
      • Emitter SourceMaps
    • Contributing
Powered by GitBook
On this page
  • Aplicar (Apply)
  • Desestruturação (Destructuring)
  • Atribuição de Matriz (Array assignment)
  • Objecto de propagação (Object spread)
  • Summary

Was this helpful?

  1. Futuro JavaScript Agora

Spread Operator

O principal objetivo do operador spread é espalhar/propagar os elementos de um array ou objeto. Isto é melhor explicado com exemplos.

Aplicar (Apply)

Um caso de uso comum é espalhar uma matriz nos argumentos da função. Anteriormente você precisaria usar Function.prototype.apply:

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

Agora você pode fazer isso simplesmente prefixando os argumentos com ... como mostrado abaixo:

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

Aqui nós estamos propagando a matriz de args em argumentos posicionais.

Desestruturação (Destructuring)

Já vimos um uso disso em desestruturação:

var [x, y, ...remaining] = [1, 2, 3, 4];
console.log(x, y, remaining); // 1,2,[3,4]

A motivação aqui é simplesmente facilitar a captura dos elementos remanescentes de um array durante a desestruturação.

Atribuição de Matriz (Array assignment)

O operador de propagação permite que você coloque facilmente uma versão expandida de uma matriz em outra matriz. Isso é demonstrado no exemplo abaixo:

var list = [1, 2];
list = [...list, 3, 4];
console.log(list); // [1,2,3,4]

Você pode colocar a matriz expandida em qualquer posição e obter o efeito esperado:

var list = [1, 2];
list = [0, ...list, 4];
console.log(list); // [0,1,2,4]

Objecto de propagação (Object spread)

Você também pode espalhar um objeto em outro objeto. Um caso de uso comum é simplesmente adicionar uma propriedade a um objeto sem alterar o original:

const point2D = {x: 1, y: 2};
/** Cria um novo objeto usando todos os pontos do point2D juntamente com z */
const point3D = {...point2D, z: 3};

Para objetos, a ordem de onde você coloca o spread/propagação é importante. Isso funciona como Object.assign e faz o que você espera: o que vem primeiro é 'substituído' pelo que vem depois:

const point2D = {x: 1, y: 2};
const anotherPoint3D = {x: 5, z: 4, ...point2D};
console.log(anotherPoint3D); // {x: 1, y: 2, z: 4}
const yetAnotherPoint3D = {...point2D, x: 5, z: 4}
console.log(yetAnotherPoint3D); // {x: 5, y: 2, z: 4}

Outro caso de uso comum é uma extensão simples e superficial:

const foo = {a: 1, b: 2, c: 0};
const bar = {c: 1, d: 2};
/** Mesclando foo e bar */
const fooBar = {...foo, ...bar};
// fooBar é agora {a: 1, b: 2, c: 1, d: 2}

Summary

apply é algo que você costuma usar em JavaScript, então é bom ter uma sintaxe melhor onde você não tem aquele feio null para o argumento this. Também tendo uma sintaxe dedicada para mover arrays de (desestruturação) ou para (atribuição) outros arrays fornece uma sintaxe nítida para quando você está fazendo o processamento de arrays em arrays parciais.

PreviousDestructuringNextfor...of

Last updated 6 years ago

Was this helpful?