a Pesar de que ES6 especificación no es super-fresco, creo que muchos desarrolladores todavía no saltar familiarizado con ella., La razón principal es probablemente el pobre soporte en los navegadores web justo después de la publicación de la especificación. Actualmente, la especificación tiene más de 2 años, y muchos navegadores web modernos funcionan bien con ES6. Incluso si usted (o sus clientes) no utilizan la versión más reciente del navegador web, puede usar transpilers (como Babel), que transforma fuentes ES6 a fuentes ES5 durante el proceso de compilación de la aplicación. Significa que ya es hora de dar un paso adelante y aprender ES6.
en este artículo, intentaré presentar las características más útiles de una manera sucinta., Después del tutorial, poseerás habilidades básicas y podrás aplicarlas en un proyecto real. No lo trate como una guía o documentación. Mi objetivo es animarte a profundizar y familiarizarte con ES6.
const y let palabras clave
const le permite definir constantes (¡finalmente!). let le permite definir variables. Eso es genial, pero no tenemos variables en JavaScript ya? Sí, eso es cierto, pero las variables declaradas por var tienen alcance de función y se elevan a la parte superior. Esto significa que una variable puede ser usada antes de que haya sido declarada., let variables y constantes tienen ámbito de bloque (rodeado por {}) y no se pueden utilizar antes de la declaración.
Array helper functions
aparecieron nuevas funciones helper geniales, que facilitan el trabajo con arrays JS en la mayoría de los casos útiles. ¿Cuántas veces implementó lógica como: filtrado, comprobación de si alguno o todos los elementos cumplen con la condición, o conversión de elementos? Probablemente muy a menudo. Ahora tiene excelentes funciones de lenguaje para hacer el trabajo por usted., Aquí, en mi opinión, están las funciones más valiosas:
forEach
ejecuta la función proporcionada para cada elemento de la matriz, pasando el elemento de la matriz como argumento.
mapa
Crea una nueva matriz que contiene el mismo número de elementos, pero los elementos de salida son creados por la función. Simplemente convierte cada elemento de matriz en otra cosa.,
filtro
Crea una nueva matriz que contiene un subconjunto de la matriz original. El resultado tiene estos elementos que pasan la prueba implementada por la función proporcionada, que debe devolver true o false.
buscar
Encuentra el primer elemento que se pasa las pruebas llevadas a cabo por la función que debe devolver true o false.,
cada
Comprueba si cada elemento de la matriz se pasa las pruebas llevadas a cabo por la función que debe devolver true o false.
algunos
Comprueba si algún elemento de la matriz se pasa las pruebas llevadas a cabo por la función que debe devolver true o false.,
reduce
aplica una función pasada como el primer parámetro contra un acumulador y cada elemento en la matriz (de izquierda a derecha), reduciéndolo así a un solo valor. El valor inicial del acumulador debe proporcionarse como segundo parámetro de la función Reducir.
Flecha funciones
la Aplicación de funciones muy simples (como la mencionada suma o el producto), requiere escribir un montón de repetitivo., ¿Hay algún remedio para eso? Sí, solo prueba las funciones de flecha!
Flecha funciones también pueden estar en línea. Realmente simplifica el código:
Flecha funciones también pueden ser más complejos y tienen muchas líneas de código:
Clases
la Cual desarrollador Java no faltan a clases cuando se cambia a un JS proyecto?, ¿A quién no le gusta la herencia explícita, como en el lenguaje Java, en lugar de escribir código mágico para la herencia prototípica? Aunque algunos desarrolladores de JS se quejaron, se han introducido clases en ES6. No cambian el concepto de herencia. Son solo azúcar sintáctica para la herencia prototípica.
Mejorada de objetos literales
los literales de Objeto han sido mejoradas., Ahora podemos mucho más fácilmente:
- Definir campos con asignación de variables del mismo nombre
- Definir funciones
- Definir propiedades dinámicas (calculadas)
h2 >
¿a quién le encanta escribir cadenas grandes y concatenación de variables? Creo que somos una minoría. ¿Quién odia leerlo? Estoy seguro de todo el mundo. Afortunadamente, ES6 introduce plantillas de cadena muy fáciles de usar con marcadores de posición para variables.,
tenga en cuenta que podemos escribir varias líneas de texto.
importante: utilice retroiluminación en lugar de apóstrofos para ajustar el texto.
argumentos de función predeterminados
¿no te gusta proporcionar todos los parámetros de función posibles? Usar valores predeterminados.
operadores Rest y spread
Spread
permite la extracción de contenido de matriz u objeto como elementos individuales.,
Ejemplo — hacer copia superficial de la matriz:
Ejemplo de combinación de matrices:
el Resto
¿desea enlazar los primeros parámetros de la función de las variables, y otros a una sola de las variables como una matriz? Ahora puedes hacerlo fácilmente.,
Desestructuración
array
Permite la extracción de solicitado elementos de la matriz y la asignación de éstos a las variables.
objeto
Permite la extracción de propiedades solicitadas desde el objeto y la asignación a variables con el mismo nombre como propiedades.,
Promises
Promise promises (sí, sé que suena raro) que obtendría en futuros resultados de tareas diferidas o de larga duración. Promise tiene dos canales: el primero para los resultados, el segundo para los posibles errores. Para obtener el resultado, proporciona la función de devolución de llamada como el parámetro de función ‘then’. Para manejar errores, usted proporciona la función de devolución de llamada como el parámetro de función’ catch’.
tenga en cuenta que la salida del ejemplo puede diferir para cada ejecución, debido a la llamada a la función aleatoria.,
Resumen
espero que os haya gustado el artículo. Si quieres practicar, puedes usar el sandbox para el proceso de aprendizaje: https://es6console.com/. Si necesitas más información, puedes encontrarla aquí: