ES6 para principiantes

ES6 para principiantes

En esta publicación, cubriré algunas características nuevas en ES6. Será útil si es nuevo en ES6 o está aprendiendo marcos front-end.

Temas que voy a cubrir en esta publicación

1. Let y Const
2. Funciones de flecha
3. Parámetros predeterminados
4. para de bucle
5. Difundir atributos
6. mapas
7. Conjuntos
8. Métodos estáticos
9. Getters y Setters

Dejar

let es similar a var pero let tiene alcance. let solo es accesible en el nivel de bloque en el que está definido.

if (verdadero) {let a = 40;console.log(a); //40}consola.log(a); // indefinido

En el ejemplo anterior, la variable 'a' se define dentro de la declaración If y, por lo tanto, no es accesible fuera de la función.

Otro ejemplo:

sea a = 50; sea b = 100; si (verdadero) {sea a = 60; var c = 10; consola.log (a/c); // 6consola.log(b/c); // 10}consola.log(c); // 10consola.log(a); // 50

constante

Const se utiliza para asignar un valor constante a la variable. Y el valor no se puede cambiar. Está arreglado.

constante a = 50;a = 60; // muestra error. No puede cambiar el valor de const.

const b = "Variable constante";b = "Asignando nuevo valor"; // muestra error.

Considere otro ejemplo.

const IDIOMAS = ['Js', 'Ruby', 'Python', 'Go'];

IDIOMAS = "Javascript"; // muestra error.

IDIOMAS.push('Java'); // Funciona bien.console.log(IDIOMAS); // ['Js', 'Rubí', 'Python', 'Ir', 'Java']

Esto puede ser un poco confuso.

Considere de esta manera. Cada vez que define una variable const, Javascript hace referencia a la dirección del valor de la variable. En nuestro ejemplo, la variable 'IDIOMAS' en realidad hace referencia a la memoria asignada a la matriz. Por lo tanto, no puede cambiar la variable para hacer referencia a otra ubicación de memoria más adelante. A lo largo del programa solo hace referencia a la matriz.

función de flecha

Las funciones en ES6 han cambiado un poco. Me refiero a la sintaxis.

// Antigua función de sintaxis oldOne() {console.log("Hello World..!");}

// Nueva sintaxis

var newOne = () => {console.log("¡Hola mundo...!");}

La nueva sintaxis puede ser un poco confusa. Pero intentaré explicar la sintaxis.

Hay dos partes de la sintaxis.

La primera parte es simplemente declarar una variable y asignarle la función (es decir) (). Simplemente dice que la variable es en realidad una función.

Luego, la segunda parte declara la parte del cuerpo de la función. La parte de la flecha con las llaves define la parte del cuerpo.

Otro ejemplo con parámetros.

let NewOneWithParameters = (a, b) => {console.log(a+b); // 30}UnoNuevoConParametros(10, 20);

No creo que tenga que dar explicaciones sobre esto. Es sencillo.

Parámetros predeterminados:

Si está familiarizado con otros lenguajes de programación como Ruby, Python, entonces los parámetros predeterminados no son nuevos para usted.

Los parámetros predeterminados son parámetros que se proporcionan de forma predeterminada al declarar una función. Pero su valor se puede cambiar al llamar a la función.

Ejemplo

let Func = (a, b = 10) => {return a + b;}Func(20); // 20 + 10 = 30

En el ejemplo anterior, estamos pasando solo un parámetro. La función utiliza el parámetro predeterminado y ejecuta la función.

Considere otro ejemplo:

Función(20, 50); // 20 + 50 = 70

En el ejemplo anterior, la función toma dos parámetros y el segundo parámetro reemplaza el parámetro predeterminado.

Considere otro ejemplo:

let FunciónNoFunciona = (a = 10, b) => {return a + b;}FunciónNoFunciona(20); // NAAN. No va a funcionar.

Cuando llama a la función con parámetros, se asignan en el orden. (es decir) el primer valor se asigna al primer parámetro y el segundo valor se asigna al segundo parámetro y así sucesivamente.

En el ejemplo anterior, el valor 20 se asigna al parámetro 'a' y 'b' no tiene ningún valor. Así que no estamos obteniendo ningún resultado.

Pero,

Función No Funciona (20, 30); // 50;

Funciona bien.

para de bucle

for..of es muy similar a for..in con ligeras modificaciones.

for..of itera a través de la lista de elementos (es decir) como Array y devuelve los elementos (no su índice) uno por uno.

let arr = [2,3,4,1];for (let valor de arr) {console.log(value);}

Salida: 2341

Tenga en cuenta que la variable 'valor' genera cada elemento en la matriz, no el índice.

Otro ejemplo

let string = "Javascript";for (let char of string) {console.log(char);}

Salida: Javascript

Sí. También funciona para cuerdas.

Difundir atributos

Los atributos de propagación ayudan a difundir la expresión como sugiere su nombre. En palabras simples, convierte una lista de elementos en una matriz y viceversa.

Ejemplo sin atributos de propagación:

let SumElements = (arr) => {console.log(arr); // [10, 20, 40, 60, 90]

let sum = 0;for (let elemento de arr) {suma += elemento;}console.log(suma); // 220.}

SumaElementos([10, 20, 40, 60, 90]);

El ejemplo anterior es sencillo. Estamos declarando una función para aceptar una matriz como parámetro y devolver su suma. Es simple.

Ahora considere el mismo ejemplo con atributos de propagación

let SumElements = (...arr) => {console.log(arr); // [10, 20, 40, 60, 90]

let sum = 0;for (let elemento de arr) {suma += elemento;}console.log(suma); // 220.}

SumaElementos(10, 20, 40, 60, 90); // Tenga en cuenta que no estamos pasando matriz aquí. En cambio, estamos pasando los elementos como argumentos.

En el ejemplo anterior, el atributo spread convierte la lista de elementos (es decir) los parámetros en una matriz.

Otro ejemplo:

Matemáticas.máx(10, 20, 60, 100, 50, 200); // devuelve 200.

Math.max es un método simple que devuelve el elemento máximo de la lista dada. No acepta una matriz.

let arr = [10, 20, 60];Math.max(arr); // Muestra error. No acepta una matriz.

Así que usemos nuestro salvador.

let arr = [10, 20, 60];Math.max(...arr); // 60

En el ejemplo anterior, el atributo de propagación convierte la matriz en una lista de elementos.

mapas

El mapa contiene pares clave-valor. Es similar a una matriz, pero podemos definir nuestro propio índice. Y los índices son únicos en los mapas.

Ejemplo:

var NewMap = new Map();NewMap.set('name', 'John');NewMap.set('id', 2345796);NewMap.set('interest', ['js', 'ruby', ' pitón']);

NuevoMapa.get('nombre'); // JuanNuevoMapa.get('id'); // 2345796NuevoMapa.get('interés'); // ['js', 'rubí', 'pitón']

Creo que el ejemplo anterior se explica por sí mismo.

Otras características interesantes de Maps son que todos los índices son únicos. Y podemos usar cualquier valor como clave o valor.

Ejemplo:

var map = new Map();map.set('nombre', 'Juan');map.set('nombre', 'Andy');map.set(1, 'número uno');map.set( NaN, 'Sin valor');

mapa.get('nombre'); // Andy. Nota John es reemplazado por Andy.map.get(1); // numero unomapa.get(NaN); // Sin valor

Otros métodos útiles utilizados en Map:

var map = new Map();map.set('nombre', 'Juan');map.set('id', 10);

Tamaño de mapa; // 2. Devuelve el tamaño del mapa.

mapa.claves(); // muestra solo las claves.mapa.valores(); // genera solo los valores.

for (let key of map.keys()) {console.log(key);}

Salida: ID de nombre

En el ejemplo anterior, map.keys() devuelve las claves del mapa pero las devuelve en el objeto Iterator. Significa que no se puede mostrar tal como es. Solo debe mostrarse iterando.

Otro ejemplo:

var mapa = nuevo Mapa();

for (let elemento del mapa) {console.log(elemento);}

Salida:['nombre', 'Juan']['id', 10]

El ejemplo anterior se explica por sí mismo. El bucle for..of genera el par clave-valor en una matriz.

Podemos optimizarlo un poco.

var mapa = nuevo Mapa();

for (let [clave, valor] del mapa) {console.log(clave+" - "+valor);}

Salida:nombre - Johnid - 10

Conjuntos

Los conjuntos se utilizan para almacenar los valores únicos de cualquier tipo. Simple..!

Ejemplo

var sets = new Set();sets.add('a');sets.add('b');sets.add('a'); // Estamos agregando valor duplicado.

for (let elemento de conjuntos) {console.log(elemento);}

Salida:ab

Tenga en cuenta que no se muestran valores duplicados. Se muestran valores únicos.

Y también tenga en cuenta que los conjuntos son objetos iterables. Tenemos que iterar a través de los elementos para mostrarlo.

Otros métodos útiles:

var conjuntos = Nuevo Conjunto ([1,5,6,8,9]);

conjuntos.tamaño; // devuelve 5. Tamaño del set.sets.has(1); // devuelve true.sets.has(10); // devuelve falso.

En el ejemplo anterior, el tamaño se explica por sí mismo. Hay otro método 'has' que devuelve un valor booleano basado en si el elemento dado está presente en el conjunto o no.

Métodos estáticos

La mayoría de ustedes ya han oído hablar de los métodos estáticos. Los métodos estáticos se introducen en ES6. Y es bastante fácil definirlo y usarlo.

Ejemplo:

clase Ejemplo {static Callme() {console.log("Método estático");}}Example.Callme();

Salida: método estático

Tenga en cuenta que no usé la palabra clave 'función' dentro de Class.

Y puedo llamar a la función sin crear ninguna instancia para la clase.

Getters y Setters

Getters y setters y una de las características útiles introducidas en ES6. Será útil si está utilizando clases en JS.

Ejemplo sin getters y setters:

gente de clase {

constructor(nombre) {this.name = name;}getName() {return this.name;}setName(name) {this.name = name;}}

let person = new People("Jon Snow");console.log(person.getName());person.setName("Dany");console.log(person.getName());

Salida:Jon SnowDany

Creo que el ejemplo anterior se explica por sí mismo. Tenemos dos funciones en la clase Personas que ayudan a establecer y obtener el nombre de la persona.

Ejemplo con getters y setters

gente de clase {

constructor(nombre) {this.name = name;}get Name() {return this.name;}set Name(name) {this.name = name;}}

let person = new People("Jon Snow");console.log(person.Name);person.Name = "Dany";console.log(person.Name);

En el ejemplo anterior, puede ver que hay dos funciones dentro de la clase People con las propiedades 'get' y 'set'. La propiedad 'get' se usa para obtener el valor de la variable y la propiedad 'set' se usa para establecer el valor de la variable.

Y puede ver que la función getName se llama sin paréntesis. Y la función setName se llama sin paréntesis y es como asignar un valor a la variable.

Gracias por tu tiempo. Espero que hayas disfrutado del artículo. :) :)

He cubierto las promesas y async/await en la segunda parte. Échale un vistazo

ES6 para principiantes Parte 2 _Este artículo cubre algunas de las características de ES6 como Promises, Async/Await_hackernoon.com

He cubierto temas mucho más interesantes, como el mapa de matriz, el filtro de matriz, la reducción, las importaciones/exportaciones, la desestructuración, etc. en la siguiente parte. Échale un vistazo

ES6 para principiantes parte 3 _ES6 filtro de matriz, mapa de matriz, reducción de matriz, literales de plantilla, importaciones y exportaciones, desestructuración de objetos y matrices…_hackernoon.com

Publicado originalmente en medium.com el 29 de septiembre de 2017.