A pesar de que en los últimos siete años escribo en JavaScript casi todos los días hábiles, debo admitir que presto poca atención a las noticias sobre las innovaciones de ES. Las características principales como async / await y proxies son una cosa, pero cada año hay una serie de pequeños cambios por fases que no entran en mi campo de visión, porque siempre hay algo más importante para estudiar.
En este artículo, he reunido las capacidades de los JS modernos, de los que no se habló mucho cuando aparecieron. Algunos de ellos solo aumentan la usabilidad, y otros son increíblemente prácticos y pueden ahorrarle escribir un montón de código.
ES2015
Literales binarios y octales
JavaScript no suele tener que usar manipulación binaria. Pero a veces surgen tareas que no pueden resolverse de otra manera. Por ejemplo, cuando escribe código de alto rendimiento para dispositivos débiles, inserta bits en el almacenamiento local, realiza manipulaciones de píxeles RGB en un navegador o trabaja con formatos de datos binarios muy compactos.
Todo esto puede requerir mucho trabajo para ocultar / combinar números binarios; Siempre me pareció que estaban en vano escondidos en decimales. Para tales casos, el formato literal binario se agregó a ES6:
0b .
const binaryZero = 0b0; const binaryOne = 0b1; const binary255 = 0b11111111; const binaryLong = 0b111101011101101;
Esto simplifica enormemente el trabajo con banderas binarias:
Lo mismo con los números octales. En el mundo JS, esta es una oportunidad de nicho, pero a menudo se usan para redes y algunos formatos de archivo. Puede escribir números octales utilizando la sintaxis
0o .
Number.isNaN ()
No debe confundirse con
window.isNaN() , este es un nuevo método con un comportamiento mucho más intuitivo.
El clásico
isNaN tiene algunos trucos interesantes:
isNaN(NaN) === true isNaN(null) === false isNaN(undefined) === true isNaN({}) === true isNaN('0/0') === true isNaN('hello') === true
¿Qué nos da esto? En primer lugar, ninguno de estos parámetros es en realidad
NaN . Como de costumbre, el problema está en todas las propiedades de JavaScript "favoritas": conversión de tipos. Los argumentos para
window.isNaN se
window.isNaN a números usando la función
Number .
El nuevo
Number.isNaN() estático
Number.isNaN() resuelve este problema. Él de una vez por todas devuelve la igualdad de los argumentos pasados a él y
NaN . Esto es absolutamente claro:
Number.isNaN(NaN) === true Number.isNaN(null) === false Number.isNaN(undefined) === false Number.isNaN({}) === false Number.isNaN('0/0') === false Number.isNaN('hello') === false
Firma: Number.isNaN : (value: any) => booleanES2016
Operador de exponenciación
Esto sucede de vez en cuando, por lo que es bueno tener una sintaxis literal a mano para la exponenciación:
2**2 === 4 3**2 === 9 3**3 === 27
Extraño, pero estaba
seguro de que esto ya existe en JavaScript. Quizás confundido con Python.
Array.prototype.includes ()
Fue difícil
array.indexOf(x) !== -1 por alto, pero si escribiste
array.indexOf(x) !== -1 en los últimos tres años, regocíjate con el nuevo método de
array.indexOf(x) !== -1 :
[1, 2, 3].includes(2) === true [1, 2, 3].includes(true) === false
includes utiliza
el algoritmo Same Value Zero , que es casi idéntico a la comprobación estricta de igualdad (
=== ), excepto que puede manejar valores
NaN . Este algoritmo también compara objetos por enlaces en lugar de contenidos:
const object1 = {}; const object2 = {}; const array = [object1, 78, NaN]; array.includes(object1) === true array.includes(object2) === false array.includes(NaN) === true
includes puede tomar un segundo parámetro,
fromIndex , que le permite proporcionar un valor de cambio:
Útil
Firma: Array.prototype.includes : (match: any, offset?: Int) => booleanES2017
Memoria compartida y operaciones atómicas.
Estas son algunas de las excelentes características que son simplemente invaluables si necesita hacer mucho trabajo con los trabajadores web. Puede compartir memoria directamente con múltiples procesos y establecer bloqueos para evitar condiciones de carrera.
Estas son dos excelentes funciones con API bastante complejas, por lo que no las describiré aquí. Para más detalles, envíelo a este artículo:
https://www.sitepen.com/blog/the-return-of-sharedarraybuffers-and-atomics/ . No todos los navegadores admiten estas características todavía, pero espero que la situación mejore en los próximos años.
ES2018
Mina de oro de expresiones regulares
ES2018 tiene un montón de nuevas características de expresión regular:
Partidas secundarias (coincidencia con caracteres anteriores)
En tiempos de ejecución que admiten esto, ahora puede escribir expresiones regulares que busquen caracteres
antes de que coincidan. Por ejemplo, para encontrar todos los números precedidos por un signo de dólar:
const regex = /(?<=\$)\d+/; const text = 'This cost $400'; text.match(regex) === ['400']
Se trata del nuevo grupo de lookbehind, los grupos gemelos de lookahead:
Look ahead: (?=abc) Look behind: (?<=abc) Look ahead negative: (?!abc) Look behind negative: (?<!abc)
Desafortunadamente, hoy no puede traducir la nueva sintaxis de retrospectiva para navegadores antiguos, por lo que es muy posible que solo pueda usarla en Node por un tiempo.
Grupos de captura nombrados
Las expresiones regulares ahora pueden seleccionar submuestras y usar para un análisis simple. Hasta hace poco, podíamos referirnos a dichos fragmentos solo por números, por ejemplo:
const getNameParts = /(\w+)\s+(\w+)/g; const name = "Weyland Smithers"; const subMatches = getNameParts.exec(name); subMatches[1] === 'Weyland' subMatches[2] === 'Smithers'
Y ahora existe la sintaxis para nombrar estas submuestras (o grupos de registros): dentro de los corchetes al principio ponemos
?<titl> , si queremos darle un nombre al grupo:
const getNameParts = /(?<first>\w+)\s(?<last>\w+)/g; const name = "Weyland Smithers"; const subMatches = getNameParts.exec(name); const {first, last} = subMatches.groups first === 'Weyland' last === 'Smithers'
Desafortunadamente, esto solo funciona en Chrome y Node ahora.
Ahora los puntos pueden marcar nuevas líneas
Solo es necesario colocar la bandera
/s , por ejemplo,
/someRegex./s ,
/anotherRegex./sg .
ES2019
Array.prototype.flat () y flatMap ()
Estaba muy feliz de ver esto en MDN.
En pocas palabras,
flat() convierte una matriz multidimensional en una matriz unidimensional a una profundidad máxima dada:
const multiDimensional = [ [1, 2, 3], [4, 5, 6], [7,[8,9]] ]; multiDimensional.flat(2) === [1, 2, 3, 4, 5, 6, 7, 8, 9]
flatMap es un
map seguido de
flat con una profundidad de 1. Esto es útil si necesita asignar una función que devuelve una matriz, pero no necesita que el resultado sea una estructura de datos anidada:
const texts = ["Hello,", "today I", "will", "use FlatMap"];
Captura ilimitada
Ahora puede escribir expresiones try / catch sin referencia a errores de lanzamiento:
try {
Por cierto, los ganchos en los que no tienes en cuenta el valor de
e veces se denominan
manejo de excepciones de Pokémon . ¡Porque tienes que atraparlos a todos!
Métodos de recorte de valor de cadena
Ligeramente, pero agradable:
const padded = ' Hello world '; padded.trimStart() === 'Hello world '; padded.trimEnd() === ' Hello world';