La guía ES2017

ECMAScript es el estándar en el que se basa JavaScript y, a menudo, se abrevia como ES. Descubra todo sobre ECMAScript y las funciones agregadas en ES2017, también conocido como ES8

ECMAScript 2017, edición 8 del estándar ECMA-262 (también llamado comúnmenteES2017oES8), was finalized in June 2017.

Comparado con ES6, ES8 es una versión pequeña para JavaScript, pero aún presenta características muy útiles:

  • Acolchado de cuerdas
  • Object.values()
  • Object.entries()
  • Object.getOwnPropertyDescriptors()
  • Comas finales en listas y llamadas de parámetros de funciones
  • Funciones asincrónicas
  • Atómica y memoria compartida

Acolchado de cuerdas

El propósito del relleno de cuerdas esagregar caracteres a una cadena, por lo quealcanza una longitud específica.

ES2017 presenta dosStringmétodos:padStart()ypadEnd().

padStart(targetLength [, padString])
padEnd(targetLength [, padString])

Uso de muestra:

padStart ()
'prueba'.padStart (4) 'prueba'
'prueba'.padStart (5) ' prueba'
'prueba'.padStart (8) ' prueba'
'prueba'.padStart (8,' abcd ') 'abcdtest'
padEnd ()
'prueba'.padEnd (4) 'prueba'
'prueba'.padEnd (5) 'prueba '
'prueba'.padEnd (8) 'prueba '
'prueba'.padEnd (8,' abcd ') 'testabcd'

Object.values ()

Este método devuelve una matriz que contiene todos los valores de propiedad propios del objeto.

Uso:

const person = { name: 'Fred', age: 87 }
Object.values(person) // ['Fred', 87]

Object.values()también funciona con matrices:

const people = ['Fred', 'Tony']
Object.values(people) // ['Fred', 'Tony']

Object.entries ()

Este método devuelve una matriz que contiene todas las propiedades propias del objeto, como una matriz de[key, value]pares.

Uso:

const person = { name: 'Fred', age: 87 }
Object.entries(person) // [['name', 'Fred'], ['age', 87]]

Object.entries()también funciona con matrices:

const people = ['Fred', 'Tony']
Object.entries(people) // [['0', 'Fred'], ['1', 'Tony']]

getOwnPropertyDescriptors ()

Este método devuelve todos los descriptores de propiedades propios (no heredados) de un objeto.

Cualquier objeto en JavaScript tiene un conjunto de propiedades y cada una de estas propiedades tiene un descriptor.

Un descriptor es un conjunto de atributos de una propiedad y está compuesto por un subconjunto de lo siguiente:

  • valor: El valor de la propiedad
  • escribible: cierto, la propiedad se puede cambiar
  • obtener: una función getter para la propiedad, llamada cuando se lee la propiedad
  • colocar: una función de establecimiento para la propiedad, llamada cuando la propiedad se establece en un valor
  • configurable: si es falso, la propiedad no se puede eliminar ni se puede cambiar ningún atributo, excepto su valor
  • enumerable: verdadero si la propiedad es enumerable

Object.getOwnPropertyDescriptors(obj)acepta un objeto y devuelve un objeto con el conjunto de descriptores.

¿De qué manera es esto útil?

ES6 nos dioObject.assign(), que copia todas las propiedades propias enumerables de uno o más objetos y devuelve un nuevo objeto.

Sin embargo, hay un problema con eso, porque no copia correctamente las propiedades con atributos no predeterminados.

Si un objeto, por ejemplo, tiene solo un establecedor, no se copia correctamente en un nuevo objeto, usandoObject.assign().

Por ejemplo con

const person1 = {
    set name(newName) {
        console.log(newName)
    }
}

Esto no funcionará:

const person2 = {}
Object.assign(person2, person1)

Pero esto funcionará:

const person3 = {}
Object.defineProperties(person3,
  Object.getOwnPropertyDescriptors(person1))

Como puede ver con una simple prueba de consola:

person1.name = 'x'
"x"

person2.name = ‘x’

person3.name = ‘x’ “x”

person2echa de menos el colocador, no fue copiado.

La misma limitación se aplica a los objetos de clonación superficial conObject.create().

Comas finales

Esta característica permite tener comas finales en las declaraciones de funciones y en las llamadas de funciones:

const doSomething = (var1, var2,) => {
  //...
}

doSomething(‘test2’, ‘test2’,)

Este cambio alentará a los desarrolladores a detener el feo hábito de "coma al principio de la línea".

Funciones asincrónicas

Consulte la publicación dedicada sobreasync / await

ES2017 introdujo el concepto defunciones asincrónicas, y es el cambio más importante introducido en esta edición de ECMAScript.

Las funciones asincrónicas son una combinación de promesas y generadores para reducir la repetición de las promesas y la limitación de "no romper la cadena" de las promesas encadenadas.

Por que son útiles

Es una abstracción de nivel superior a las promesas.

Cuando se introdujeron las Promesas en ES6, estaban destinadas a resolver un problema con el código asincrónico, y lo hicieron, pero durante los 2 años que separaron ES6 y ES2017, quedó claro quelas promesas no pueden ser la solución final. Se introdujeron promesas para resolver el famosoinfierno de devolución de llamadaproblema, pero introdujeron complejidad por sí mismos y complejidad de sintaxis. Eran buenas primitivas alrededor de las cuales se podía exponer a los desarrolladores una mejor sintaxis: enterfunciones asincrónicas.

Un ejemplo rapido

El código que utiliza funciones asincrónicas se puede escribir como

function doSomethingAsync() {
    return new Promise((resolve) => {
        setTimeout(() => resolve('I did something'), 3000)
    })
}

async function doSomething() { console.log(await doSomethingAsync()) }

console.log(‘Before’) doSomething() console.log(‘After’)

El código anterior imprimirá lo siguiente en la consola del navegador:

Before
After
I did something //after 3s

Multiple async functions in series

Async functions can be chained very easily, and the syntax is much more readable than with plain promises:

function promiseToDoSomething() {
    return new Promise((resolve)=>{
        setTimeout(() => resolve('I did something'), 10000)
    })
}

async function watchOverSomeoneDoingSomething() { const something = await promiseToDoSomething() return something + ’ and I watched’ }

async function watchOverSomeoneWatchingSomeoneDoingSomething() { const something = await watchOverSomeoneDoingSomething() return something + ’ and I watched as well’ }

watchOverSomeoneWatchingSomeoneDoingSomething().then((res) => { console.log(res) })

Shared Memory and Atomics

WebWorkers are used to create multithreaded programs in the browser.

They offer a messaging protocol via events. Since ES2017, you can create a shared memory array between web workers and their creator, using a SharedArrayBuffer.

Since it’s unknown how much time writing to a shared memory portion takes to propagate, Atomics are a way to enforce that when reading a value, any kind of writing operation is completed.

Any more detail on this can be found in the spec proposal, which has since been implemented.


More js tutorials: