El autor del material, cuya traducción publicamos hoy, dice que las nuevas funciones de JavaScript incluidas en el estándar ES2019 ya están
disponibles oficialmente en los navegadores Chrome, Firefox y Safari, así como en la plataforma Node.js. Si necesita admitir navegadores obsoletos, puede aprovechar las innovaciones al transpilar el código JS con
Babel . Aquí vemos ejemplos de algunas de las nuevas características de JS.
Método Object.fromEntries
En ES2017,
Object.entries método
Object.entries . Convierte el objeto en una matriz. Por ejemplo, podría verse así:
let students = { amelia: 20, beatrice: 22, cece: 20, deirdre: 19, eloise: 21 } Object.entries(students)
Este método se ha convertido en una maravillosa adición a las capacidades del lenguaje. El hecho es que hizo posible procesar convenientemente los datos del objeto utilizando los numerosos métodos integrados en el prototipo de
Array . Entre estos métodos, por ejemplo, se puede observar el
map , el
filter , la
reduce . Pero para convertir la matriz de nuevo en un objeto, desafortunadamente, no había herramientas convenientes. Todo tenía que hacerse manualmente, usando un bucle:
let students = { amelia: 20, beatrice: 22, cece: 20, deirdre: 19, eloise: 21 }
El método
Object.fromEntries diseñado para deshacerse de dichos bucles. Le permite resolver el mismo problema con una cantidad de código mucho menor. Esto puede ayudar a los desarrolladores a utilizar métodos de matriz con más frecuencia para procesar objetos convertidos en matrices.
let students = { amelia: 20, beatrice: 22, cece: 20, deirdre: 19, eloise: 21 }
Es importante tener en cuenta que las matrices y los objetos no son en vano estructuras de datos diferentes. En algunos casos, la conversión de uno a otro conduce a la pérdida de datos. En el siguiente ejemplo, puede ver cómo al convertir una matriz en un objeto, se pierden los elementos de la matriz que resultan ser claves duplicadas del objeto.
let students = [ [ 'amelia', 22 ], [ 'beatrice', 22 ], [ 'eloise', 21], [ 'beatrice', 20 ] ] let studentObj = Object.fromEntries(students);
▍Apoyo
- Cromo 75
- Firefox 67
- Safari 12.1
Método Array.prototype.flat
Las matrices multidimensionales son estructuras de datos que los programadores encuentran con bastante frecuencia. Especialmente, al cargar algunos datos. Al mismo tiempo, reducir la dimensión de la matriz siempre ha sido una tarea importante. Siempre fue posible resolver este problema, pero el código para su solución no podría llamarse muy atractivo.
Considere el siguiente ejemplo. Aquí, como resultado del procesamiento de una matriz de objetos utilizando la función de
map , tenemos una matriz multidimensional. Queremos hacerlo más "plano".
let courses = [ { subject: "math", numberOfStudents: 3, waitlistStudents: 2, students: ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']] }, { subject: "english", numberOfStudents: 2, students: ['Wilson', 'Taylor'] }, { subject: "history", numberOfStudents: 4, students: ['Edith', 'Jacob', 'Peter', 'Betty'] } ] let courseStudents = courses.map(course => course.students)
Ahora tenemos a nuestra disposición el método
Array.prototype.flat , que toma un argumento opcional que indica a qué nivel deben "elevarse" los elementos de la matriz.
let courseStudents = [ [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], [ 'Wilson', 'Taylor' ], [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let flattenOneLevel = courseStudents.flat(1) console.log(flattenOneLevel)
Tenga en cuenta que si no pasa argumentos a este método, aumentará los elementos de la matriz en un nivel. Esto es muy importante, ya que en nuestro caso necesitamos transformar la matriz en una estructura de datos completamente plana. Esto es lo que sucede cuando se usa este método sin parámetros:
let courseStudents = [ [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], [ 'Wilson', 'Taylor' ], [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let defaultFlattened = courseStudents.flat() console.log(defaultFlattened)
La justificación de tal dispositivo de este método se puede encontrar en el hecho de que, por defecto, no busca convertir ninguna matriz en unidimensional, lo que requiere instrucciones específicas para convertir la matriz. Si necesita convertir una matriz cuyos parámetros exactos son desconocidos para una matriz unidimensional, puede pasar el valor
Infinity al método
flat .
let courseStudents = [ [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], [ 'Wilson', 'Taylor' ], [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let alwaysFlattened = courseStudents.flat(Infinity) console.log(alwaysFlattened)
Como de costumbre, tales operaciones deben usarse con precaución. Este enfoque, probablemente, no puede llamarse una buena opción para aquellos casos en que la profundidad de la matriz procesada es realmente desconocida.
▍Apoyo
- Cromo 75
- Firefox 67
- Safari 12
Método Array.prototype.flatMap
Junto con el método
flat , ahora tenemos a nuestra disposición un nuevo método combinado:
Array.prototype.flatMap . Arriba, en realidad ya vimos un ejemplo de una situación en la que este método puede ser útil, pero veamos otro ejemplo.
Supongamos que nos enfrentamos a la tarea de insertar ciertos elementos en una matriz. ¿Cómo lo resolveríamos antes del advenimiento de las nuevas características de JS? Por ejemplo, así:
let grades = [78, 62, 80, 64] let curved = grades.map(grade => [grade, grade + 7])
Ahora que tenemos el método
Array.prototype.flat , este código se puede mejorar:
let grades = [78, 62, 80, 64] let flatMapped = grades.map(grade => [grade, grade + 7]).flat()
El problema que estamos resolviendo aquí se basa en un patrón relativamente popular (especialmente la programación funcional). Por lo tanto, cuán maravillosamente podemos resolverlo usando el método
flatMap no podemos sino alegrarnos:
let grades = [78, 62, 80, 64] let flatMapped = grades.flatMap(grade => [grade, grade + 7]);
Recuerde que, por defecto, el método
Array.prototype.flat funciona como si se pasara una unidad. El método
flatMap se comporta exactamente de la misma manera, es decir, "eleva" los elementos de la matriz en solo 1 nivel. Es el resultado de una combinación de métodos de
map y
flat .
let grades = [78, 62, 80, 64] let flatMapped = grades.flatMap(grade => [grade, [grade + 7]]);
▍Apoyo
- Cromo 75
- Firefox 67
- Safari 12
Métodos String.prototype.trimStart y String.prototype.trimEnd
Otra buena característica nueva de ES2019 son los alias que dan a algunos métodos de cadena nombres más significativos. Anteriormente, teníamos a nuestra disposición los métodos
String.prototype.trimRight y
String.prototype.trimLeft :
let message = " Welcome to CS 101 " message.trimRight()
Los métodos son maravillosos, pero lo bueno es que se les han dado nombres que son más relevantes para su propósito. Y su objetivo es eliminar los espacios en blanco iniciales y finales de las cadenas.
let message = " Welcome to CS 101 " message.trimEnd()
▍Apoyo
- Cromo 75
- Firefox 67
- Safari 12
Argumento opcional de bloque de captura
Otra buena característica de ES2019 es que el argumento en
try-catch bloques
try-catch ahora se ha convertido en opcional. Anteriormente, todos
catch bloques
catch tenían que pasar un objeto de excepción como parámetro. El argumento tuvo que ser pasado para
catch incluso si no fue utilizado.
try { let parsed = JSON.parse(obj) } catch(e) {
Ahora esto no es así. Si el objeto de excepción no se usa en el
catch , entonces no es necesario transferir nada a este bloque.
try { let parsed = JSON.parse(obj) } catch { console.log("error") }
Esta es una gran oportunidad, que será útil en los casos en que el programador sepa de antemano qué tipo de situación de emergencia conducirá a entrar en el
catch correspondiente.
▍Apoyo
- Cromo 75
- Firefox 67
- Safari 12
Cambios en el método Function.prototype.toString
El estándar ES2019 ha traído cambios en cómo funciona el método de función
toString . Anteriormente, distorsionaba ligeramente la apariencia del código de salida:
function greeting() { const name = 'CSS Tricks' console.log(`hello from ${name}`) } greeting.toString()
Ahora este método refleja la representación real del código fuente de las funciones.
function greeting() { const name = 'CSS Tricks' console.log(`hello from ${name}`) } greeting.toString()
▍Apoyo
Resumen
Aquí miramos ejemplos del uso de algunas de las nuevas funciones de JavaScript. Si está interesado en las innovaciones de JS, eche un vistazo a
este repositorio y
esta tabla.
Estimados lectores! ¿Ha encontrado situaciones en las que las nuevas características de JS simplifiquen significativamente la solución de cualquier problema?
