Folha de dicas de JavaScript rápida e prática da Toptal: ES6 e além

Constantes

deixe vs var

> const EULER = 2,7182818284
> EULER = 13
> EULER
> 2.7182818284

> var média = 5
> var média = (média + 1) / 2
> média
> 3
> deixe valor = 'olá mundo'
> valor let = 'o que há de novo'
// -> lança TypeError: Identificador 'valor' já foi declarado

Aviso! Se array ou objeto, a referência é mantida constante . Se a constante for uma referência a um objeto, você ainda poderá modificar o conteúdo, mas nunca alterar a variável.

> const CONSTANTES = []
> CONSTANTES.push(EULER)
> CONSTANTES
> [ 2.7182818284 ]
> CONSTANTES = { 'euler': 2.7182818284 }
> CONSTANTES
> [ 2.7182818284 ]

Esteja ciente das Zonas Mortas Temporais :

> console.log(val) // -> 'indefinido'
> var val = 3
> console.log(val) // -> 3

Porque é equivalente a:

Notação Binária, Octal e Hex

> var val
> console.log(val)
> valor = 3
> console.log(val)

> 0b1001011101 // 605
> 0o6745 // 3557
> 0x2f50a // 193802

Variáveis ​​declaradas com "let/const" não são içadas:

Novos tipos

> console.log(val)
// -> Lança ReferenceError
> deixe val = 3
> console.log(val) // -> 3

Símbolos, mapas, mapas fracos e conjuntos

Função de seta

Novas funções com escopo

> setTimeout(() => {
… console.log('atrasado')
… }, 1000)

> {
… deixe cue = 'Luke, eu sou seu pai'
… console.log(cue)
… }
> 'Luke, eu sou seu pai'

Equivalente à função anônima

Equivalente a Expressões de Função Invocadas Imediatamente (IIFE)

> setTimeout(função() {
… console.log('atrasado')
… }.bind(this), 1000)

> (função () {
… var cue = 'Luke, eu sou seu pai' … console.log(cue) // 'Luke, eu sou –
… }())
> console.log(cue) // Erro de referência

Novidades de Notação de Objeto

Interpolação de strings, graças aos literais de modelo

// Propriedades computadas
> let key = new Date().getTime()
> let obj = { [chave]: “valor” }
> obj
> { '1459958882881': 'valor' }

// Literais de objetos
balão = { cor, tamanho };

// Igual a
balão = {
cor: cor,
tamanho: tamanho

}

// Melhores notações de métodos
obj = {
foo (a, b) { … },
barra (x, y) { … }
}

> const nome = 'Tigre'
> const idade = 13
> console.log (`Meu gato se chama ${name} e tem ${age} anos.`)
> Meu gato se chama Tigre e tem 13 anos.

// Podemos preservar novas linhas…
let text = ( `gato
cão
Nickelodeon`
)

Parâmetros padrão

> função howAreYou (resposta = 'ok') {
console.log(answer) // provavelmente 'ok'
}

Promessas

Classes, Herança, Setters, Getters

new Promise((resolver, rejeitar) => {
request.get(url, (erro, resposta,
corpo) => {
se (corpo) {
resolve(JSON.parse(corpo));
} outro {
resolver({});
}
})
}).then(() => { ... })
.catch((err) => jogar err)

// Paraleliza tarefas
Promessa.tudo([
promessa1, promessa2, promessa3
]).then(() => {
//todas as tarefas foram finalizadas
})

class Retângulo estende Forma {
construtor (id, x, y, w, h) {
super(id, x, y)
this.width = w
esta.altura = h
}
// Getter e setter
definir largura (w) { this._width = w }
get largura () { return this._width }
}

class Círculo estende Forma {
construtor (id, x, y, raio) {
super(id, x, y)
this.radius = raio
}
do_a (x) {
seja a = 12;
super.do_a(x + a);
}
estático do_b() { ... }
}
Círculo.do_b()

Desestruturando Arrays

Desestruturando Objetos

> seja [a, b, c, d] = [1, 2, 3, 4];
> console.log(a);
> 1
> b
> 2

> deixe luke = { ocupação: 'jedi',
pai: 'anakin' }
> deixe {ocupação, pai} = luke
> console.log(ocupação, pai)
> jedi anakin

Operador de Spread

...Vá se desestruturando como um chefe

// Transforma arrays em separados por vírgula
// valores e mais
> registrador de funções (...args) {
console.log('%s argumentos',
argumentos.comprimento)
args.forEach(console.log)
// arg[0], arg[1], arg[2]
}

> const [ gato, cachorro, ...peixe ] = [
'schroedinger', 'Laika', 'Nemo', 'Dori']
> peixe // -> ['Nemo', 'Dori']

Ou faça um empurrão melhor

...E desestruturando no futuro ES7

> deixe arr = [1, 2, 3]
> [...arr, 4, 5, 6]
> [1, 2, 3, 4, 5, 6]

{a, b, ...repouso} = {a:1, b:2, c:3, d:4}

Assíncrono ES7

Aguardar ES7

função assíncrona schrodinger () {
return new Promise((resolver, rejeitar)
=> {
resultado const = Math.random > 0,5
setTimeout(() => {
retorna resultado? resolver('vivo')
: rejeitar('morto')
})
})
}

experimentar {
console.log(aguarda schrodinger())
// -> 'vivo'
} pegar (errar) {
console.log(err)
// -> 'morto'
}

Exportar ES7

Importando ES7

função de exportação somaDois (a, b) {
retornar a + b;
}
exportação const EULER = 2,7182818284
deixe coisas = { sumTwo, EULER }
export { coisas como padrão }

importar Reagir de 'reagir'
import { EULER } de './myexports'
import * como material de './myexports'
// equivalente a
importar coisas de './myexports'
// { somaDois, EULER }

Geradores

Eles retornam objetos que implementam um protocolo de iteração. ou seja, tem um método next() que retorna { value: < some value>, done: <true or false> } .

function* incRand (max) { // Asterisco define isso como um gerador
enquanto (verdadeiro) {
// Pausa a execução após o rendimento, retoma
// quando next(<algo>) é chamado
// e atribui <algo> a x
let x = yield Math.floor(Math.random() * max + 1);
máximo += x;
}
}

> var rng = incRand(2) // Retorna um objeto gerador
> rng.next() // { valor: <entre 1 e 2>, feito: false }
> rng.next(3) // como acima, mas entre 1 e 5
> rng.next() // NaN desde 5 + resultados indefinidos em NaN
> rng.next(20) // Ninguém esperava NaN novamente?
> rng.throw(new Error('Estado do gerador irrecuperável.'))
// Será lançado do yield