JavaScript es6-escribir menos, hacer más

let puede ser reasignados y tomar un nuevo valor. Crea una variable mutable.

let es lo mismo que const en que ambos están bloqueados. Significa que la variable solo está disponible dentro de su ámbito.,

funciones de flecha

la función de flecha es realmente impresionante, y hace que su código sea más legible, más estructurado y se vea como código moderno. En lugar de utilizar este:

el Uso de este:

Como se puede ver, la función de flecha parece más legible y limpio! Ya no necesitarás usar la sintaxis Antigua.

También puede utilizar la función de Flecha con la etiqueta map, filter y reduce funciones integradas.,

La función de mapa con flechas se ve más claro y legible de map en ES5. Con ES6 puede escribir código más corto e inteligente. Puede usar lo mismo con filter y reduce.

literales de plantilla

Los literales de plantilla o cadenas de plantilla son bastante geniales. No tenemos que usar el operador plus ( + ) para concatenar cadenas, o cuando queremos usar una variable dentro de una cadena.,

La vieja sintaxis:

Con la nueva ES6 sintaxis:

Así de simple!!! Es una gran diferencia entre la sintaxis Antigua y ES6. Al tocar con cuerdas, la cadena literal en ES6 se ve más organizada y bien estructurada que en ES5.

parámetros predeterminados

Cuando trabajo en PHP, suelo usar parámetros predeterminados. Estos le permiten definir un parámetro de antemano.,

por lo tanto, cuando se olvida de escribir el parámetro, no devolverá un error indefinido porque el parámetro ya está definido en el valor predeterminado. Así que cuando ejecuta su función con un parámetro perdido, tomará el valor del parámetro predeterminado t, y no devolverá un error!

Mira este ejemplo:

La función anterior devuelve undefined, porque se nos olvidó de darle el segundo parámetro age.,

pero si usamos el parámetro predeterminado, no devolverá undefined, y usará su valor cuando olvidemos asignar un parámetro!

como puede ver, la función devuelve un valor a pesar de que perdimos el segundo parámetro. Ahora con el parámetro predeterminado podemos manejar el error de antemano.

destrucción de matrices y objetos

la destrucción facilita la asignación de los valores de una matriz u objeto a la nueva variable.,

La vieja sintaxis:

Con ES6 sintaxis:

Con ES5, tenemos que asignar a cada valor de cada variable. Con ES6, simplemente ponemos nuestros valores dentro de corchetes para obtener cualquier propiedad del objeto.

Nota: Si asigna una variable que no es idéntica al nombre de la propiedad, devolverá undefined. Por ejemplo, si el nombre de la propiedad es name y lo asignamos a una variable username, devolverá indefinido.,

siempre tenemos que nombrar la variable igual que el nombre de la propiedad. Pero en caso de que queramos cambiar el nombre de la variable, podemos usar los dos puntos : en su lugar.

Por la matriz, se utiliza la misma sintaxis que el objeto. Solo tenemos que reemplazar los corchetes rizados con corchetes cuadrados.

Importar y exportar

Usando import y export en la aplicación de JavaScript hace que sea más potente., Le permiten crear componentes separados y reutilizables.

si está familiarizado con cualquier framework MVC de JavaScript, verá que usan importy export para manejar los componentes la mayor parte del tiempo. Entonces, ¿cómo funcionan?

Es simple! export le permite exportar un módulo para ser utilizado en otro componente JavaScript. Usamos import para importar ese módulo para usarlo en nuestro componente.

Por ejemplo, tenemos dos archivos., El primero se llama detailComponent.js y el segundo se llama homeComponent.js.

En el detailComponent.js vamos a exportar el detail función.

Y si queremos utilizar esta función en el homeComponent.js, que acaba de usar import.

Si queremos importar más de un módulo, se ponen dentro de llaves.,

Tan cool, ¿no?!

Promesas

las Promesas son una nueva característica de ES6. Es un método para escribir código asíncrono. Se puede usar cuando, por ejemplo, queremos obtener datos de una API, o cuando tenemos una función que tarda en ejecutarse. Las promesas hacen que sea más fácil resolver el problema, así que vamos a crear nuestra primera promesa!

Si usted registro de la consola, devolverá una Promesa. Por lo tanto, si queremos ejecutar una función después de los datos se obtiene, vamos a utilizar una promesa., La Promesa toma dos parámetros: resolve y reject manejar un error esperado.

Nota: La función fetch devuelve una promesa en sí!

const url='https://jsonplaceholder.typicode.com/posts';

const getData=(url)=>{return fetch(url);}

getData(url).then(data=> data.json()).then(result=> console.log(result));

Ahora, si de registro de la consola va a devolver una matriz de datos.

parámetro Rest y operador Spread

los parámetros rest se utilizan para obtener el argumento de una matriz y devolver una nueva matriz.,

La propagación operador tiene la misma sintaxis que el resto de parámetros, pero la propagación operador toma la Matriz de sí mismo y no sólo los argumentos. Podemos usar el parámetro Spread para obtener los valores de una matriz, en lugar de usar un bucle for o cualquier otro método.

clases

Las clases son el núcleo de la programación orientada a objetos (OOP). Hacen que su código sea más seguro y encapsulado. El uso de clases le da a su código una buena estructura y lo mantiene orientado.,

Para crear una clase, el uso de la etiqueta class palabra clave seguida del nombre de la clase con dos llaves.

Ahora podemos acceder a la class métodos y propiedades de uso de la etiqueta new palabra clave.

class myClass{ constructor(name,age){ this.name=name; this.age=age;}}const Home= new myClass("said",20);console.log(Home.name)// said

para heredar de otra clase, use la palabra clave extends seguida del nombre de la clase de la que desea heredar.,

puede obtener más información sobre las clases aquí.

es6 tiene otras características increíbles – puedes explorarlas aquí.

conclusión

espero que hayan encontrado este artículo útil, y espero haber sido capaz de presentarles algunas de las características de ES6. Si es así, suscríbase a esta lista de correo para obtener más información sobre temas de Front-end. Gracias por su tiempo.

por cierto, recientemente he trabajado con un sólido grupo de ingenieros de software para una de mis aplicaciones móviles., La organización fue genial, y el producto se entregó muy rápido, mucho más rápido que otras firmas y freelancers con los que he trabajado, y creo que honestamente puedo recomendarlos para otros proyectos. Envíame un correo electrónico si quieres ponerte en contacto — [email protected].