Hoja de referencia rápida y práctica de JavaScript de Toptal: ES6 y más allá

constantes

let vs var

> constante EULER = 2.7182818284
> EULER = 13
> EULER
> 2.7182818284

> var promedio = 5
> var promedio = (promedio + 1) / 2
> promedio
> 3
> let valor = 'hola mundo'
> let value = 'lo nuevo'
// -> lanza TypeError: el identificador 'valor' ya ha sido declarado

¡Advertencia! Si es una matriz o un objeto, la referencia se mantiene constante . Si la constante es una referencia a un objeto, aún puede modificar el contenido, pero nunca cambiar la variable.

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

Tenga en cuenta las zonas muertas temporales :

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

Porque es equivalente a:

Notación binaria, octal y hexadecimal

> valor var
> consola.log(valor)
> valor = 3
> consola.log(valor)

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

Las variables declaradas con "let/const" no se elevan:

Nuevos tipos

> consola.log(valor)
// -> Lanza ReferenceError
> sea val = 3
> consola.log(valor) // -> 3

Símbolos, mapas, mapas débiles y conjuntos

función de flecha

Nuevas funciones de ámbito

> establecerTiempo de espera(() => {
… consola.log('retrasado')
… }, 1000)

> {
… let cue = 'Luke, soy tu padre'
… consola.log(cue)
… }
> 'Luke, yo soy tu padre'

Equivalente a función anónima

Equivalente a Expresiones de función invocadas inmediatamente (IIFE)

> establecerTiempo de espera (función () {
… consola.log('retrasado')
… }.bind(esto), 1000)

> (función () {
… var cue = 'Luke, soy tu padre' … console.log(cue) // 'Luke, soy –
… }())
> console.log(cue) // Error de referencia

Novedades de la notación de objetos

Interpolación de cadenas, gracias a los literales de plantilla

// Propiedades calculadas
> dejar tecla = nueva Fecha().getTime()
> let obj = { [clave]: “valor” }
> objeto
> { '1459958882881': 'valor' }

// Objetos literales
globo = {color, tamaño};

// Igual que
globo = {
color: color,
tamaño: tamaño

}

// Mejores notaciones de métodos
objeto = {
foo (a, b) {...},
barra (x, y) {...}
}

> const nombre = 'Tigre'
> edad constante = 13
> console.log (`Mi gato se llama ${nombre} y tiene ${edad} años.`)
> Mi gato se llama Tigre y tiene 13 años.

// Podemos conservar las nuevas líneas...
dejar texto = ( `gato
perro
Nickelodeon`
)

Parámetros predeterminados

> función cómo estás (respuesta = 'ok') {
console.log(respuesta) // probablemente 'bien'
}

promesas

Clases, Herencia, Setters, Getters

nueva Promesa((resolver, rechazar) => {
request.get(url, (error, respuesta,
cuerpo) => {
si (cuerpo) {
resolve(JSON.parse(cuerpo));
} demás {
resolver({});
}
})
}).entonces(() => { ... })
.catch((err) => lanzar error)

// Paralelizar tareas
Promise.all([
promesa1, promesa2, promesa3
]).entonces(() => {
// todas las tareas han terminado
})

clase Rectángulo extiende Forma {
constructor (id, x, y, w, h) {
súper (id, x, y)
este ancho = w
esta.altura = h
}
// Getter y setter
establecer ancho (w) { this._width = w }
obtener ancho () {devolver this._width}
}

clase Círculo extiende Forma {
constructor (id, x, y, radio) {
súper (id, x, y)
este.radio = radio
}
do_a (x) {
sea ​​a = 12;
super.do_a(x + a);
}
estático do_b() { ... }
}
Círculo.do_b()

Destrucción de arreglos

Destrucción de objetos

> sea [a, b, c, d] = [1, 2, 3, 4];
> consola.log(a);
> 1
> segundo
> 2

> let luke = { ocupación: 'jedi',
padre: 'anakin'}
> let {ocupación, padre} = luke
> console.log(ocupación, padre)
> jedi anakin

Operador de propagación

...Ve a desestructurar como un jefe

// Convierte arreglos separados por comas
// valores y más
> registrador de funciones (... argumentos) {
console.log('%s argumentos',
longitud de argumentos)
argumentos.forEach(console.log)
// argumento[0], argumento[1], argumento[2]
}

> const [gato, perro, ...pez] = [
'Schroedinger', 'Laika', 'Nemo', 'Dori']
> pescado // -> ['Nemo', 'Dori']

O haz un mejor empujón

...y desestructuración en el futuro ES7

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

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

Asíncrono ES7

Espera ES7

función asíncrona schrödinger () {
devolver nueva promesa ((resolver, rechazar)
=> {
resultado constante = Math.random > 0.5
establecerTiempo de espera(() => {
devolver resultado? resolver ('vivo')
: rechazar ('muerto')
})
})
}

tratar {
consola.log(esperar a Schrödinger())
// -> 'vivo'
} atrapar (err) {
consola.log(err)
// -> 'muerto'
}

Exportar ES7

Importando ES7

función de exportación sumTwo (a, b) {
devuelve a + b;
}
exportación const EULER = 2.7182818284
let cosas = {sumaDos, EULER}
exportar { cosas por defecto }

importar reaccionar desde 'reaccionar'
importar { EULER } desde './myexports'
importar * como cosas de './myexports'
// equivalente a
importar cosas desde './myexports'
// {sumados, EULER}

Generadores

Devuelven objetos que implementan un protocolo de iteración. es decir, tiene un método next() que devuelve { valor: < algún valor>, hecho: <verdadero o falso> } .

function* incRand (max) { // Asterisk define esto como un generador
mientras (verdadero) {
// Pausa la ejecución después del rendimiento, reanudar
// cuando se llama a next(<algo>)
// y asigna <algo> a x
sea ​​x = rendimiento Math.floor(Math.random() * max + 1);
máx += x;
}
}

> var rng = incRand(2) // Devuelve un objeto generador
> rng.next() // { valor: <entre 1 y 2>, hecho: falso }
> rng.next(3) // como arriba, pero entre 1 y 5
> rng.next() // NaN desde 5 + resultados indefinidos en NaN
> rng.next(20) // ¿Nadie esperaba NaN otra vez?
> rng.throw(nuevo Error('Estado del generador irrecuperable.'))
// Será arrojado del rendimiento