Compartir:
Qué es ES6 y qué necesitan saber los programadores de Javascript
ES6 se refiere a la versión 6 del lenguaje de programación ECMA Script. ECMA Script es el nombre estandarizado para JavaScript. ¿Qué es JavaScript, y puede existir Internet sin él? ¿Qué es JavaScript, y puede existir Internet sin él? JavaScript es una de esas cosas que muchos dan por sentado. Todo el mundo lo usa. Lea más, y la versión 6 es la siguiente versión después de la versión 5, que se lanzó en 2011. Es una mejora importante para el lenguaje JavaScript, y agrega muchas más funciones destinadas a facilitar el desarrollo de software a gran escala..
ECMAScript, o ES6, se publicó en junio de 2015. Posteriormente se le cambió el nombre a ECMAScript 2015. El soporte del navegador web para el idioma completo aún no está completo, aunque se admiten partes importantes. Los principales navegadores web admiten algunas características de ES6. Sin embargo, es posible utilizar un software conocido como transpiler para convertir el código ES6 en ES5, que es mejor admitido en la mayoría de los navegadores.
Veamos ahora algunos cambios importantes que ES6 trae a JavaScript.
1. Constantes
Finalmente el concepto de constantes lo ha hecho a JavaScript! Las constantes son valores que se pueden definir solo una vez (por alcance, el alcance se explica a continuación). Una redefinición dentro del mismo ámbito genera un error..
const JOE = 4.0 JOE = 3.5 // da como resultado: UnEught TypeError: Asignación a variable constante. Puede usar la constante donde quiera que pueda usar una variable (var).
console.log ("El valor es:" + joe * 2) // imprime: 8 2. Variables y funciones de ámbito de bloque
¡Bienvenido al siglo XXI, JavaScript! Con ES6, las variables declaradas utilizando dejar (y las constantes se describen arriba) siguen las reglas de alcance del bloque como en Java, C ++, etc..
Antes de esta actualización, las variables en JavaScript estaban en función del alcance. Es decir, cuando necesitaba un nuevo ámbito para una variable, tenía que declararla dentro de una función.
Las variables conservan el valor hasta el final del bloque. Después del bloque, el valor en el bloque externo (si existe) se restaura.
vamos x = "hola"; vamos x = "mundo"; console.log ("bloque interno, x =" + x); console.log ("bloque externo, x =" + x); // imprime bloque interno, x = bloque exterior mundial, x = hola También puedes redefinir constantes, dentro de tales bloques..
vamos x = "hola"; const x = 4.0; console.log ("bloque interno, x =" + x); intente x = 3.5 catch (err) console.error ("bloque interno:" + err); x = "mundo"; console.log ("bloque externo, x =" + x); // imprime bloque interno, x = 4 bloque interno: TypeError: Asignación a variable constante. bloque exterior, x = mundo 3. Funciones de flecha
ES6 trae una nueva sintaxis para definir funciones usando una flecha. En el siguiente ejemplo, X Es una función que acepta un parámetro llamado. una, y devuelve su incremento:
var x = a => a + 1; x (4) // devuelve 5 Usando esta sintaxis, puede definir y pasar argumentos en funciones con facilidad.
Usando con un para cada():
[1, 2, 3, 4] .forEach (a => console.log (a + "=>" + a * a)) // imprime 1 => 1 2 => 4 3 => 9 4 => 16 Defina funciones que acepten múltiples argumentos encerrándolos entre paréntesis:
[22, 98, 3, 44, 67] .sort ((a, b) => a - b) // devuelve [3, 22, 44, 67, 98] 4. Parámetros de función predeterminados
Los parámetros de función ahora se pueden declarar con valores predeterminados. En el siguiente, X Es una función con dos parámetros. una y segundo. El segundo parametro segundo se le da un valor predeterminado de 1.
var x = (a, b = 1) => a * b x (2) // devuelve 2 x (2, 2) // devuelve 4 A diferencia de otros idiomas, como C ++ o python, los parámetros con valores predeterminados pueden aparecer antes que aquellos sin valores predeterminados. Tenga en cuenta que esta función se define como un bloque con un regreso valor a modo de ilustración.
var x = (a = 2, b) => return a * b Sin embargo, los argumentos coinciden de izquierda a derecha. En la primera invocación de abajo, segundo tiene un indefinido valor aun cuando una Se ha declarado con un valor por defecto. El argumento pasado coincide con una más bien que segundo. La función devuelve Yaya.
x (2) // devuelve NaN x (1, 3) // devuelve 3 Cuando pasas explícitamente indefinido como argumento, el valor predeterminado se usa si hay uno.
x (indefinido, 3) // devuelve 6 5. Parámetros de la función de reposo
Al invocar una función, a veces surge la necesidad de poder pasar un número arbitrario de argumentos y procesar estos argumentos dentro de la función. Esta necesidad es manejada por el parámetros de función de descanso sintaxis. Proporciona una forma de capturar el resto de los argumentos después de los argumentos definidos utilizando la sintaxis que se muestra a continuación. Estos argumentos adicionales son capturados en una matriz.
var x = función (a, b, ... args) console.log ("a =" + a + ", b =" + b + "," + args.length + "args left"); x (2, 3) // imprime a = 2, b = 3, 0 argumentos a la izquierda x (2, 3, 4, 5) // imprime a = 2, b = 3, 2 argumentos a la izquierda 6. Plantillas de cuerdas
Las plantillas de cadenas se refieren a la interpolación de variables y expresiones en cadenas utilizando una sintaxis como perl o shell. Una plantilla de cadena está encerrada en caracteres de tilde ('). Por el contrario, las comillas simples (') o comillas dobles (“) indican cadenas normales. Las expresiones dentro de la plantilla están marcadas entre PS y . Aquí hay un ejemplo:
nombre var = "joe"; var x = 'hello $ name' // devuelve "hello joe" Por supuesto, puedes usar una expresión arbitraria para la evaluación..
// define una función de flecha var f = a => a * 4 // establece un valor de parámetro var v = 5 // y evalúa la función dentro de la plantilla de cadena var x = 'hello $ f (v)' // devuelve "hola 20" Esta sintaxis para definir cadenas también se puede utilizar para definir cadenas de varias líneas..
var x = 'hello world next line' // devuelve hello world next line 7. Propiedades del objeto
ES6 trae una sintaxis simplificada de creación de objetos. Echa un vistazo al siguiente ejemplo:
var x = "hola mundo", y = 25 var a = x, y // es equivalente a ES5: x: x, y: y Los nombres de propiedades calculados también son bastante ingeniosos. Con ES5 y versiones anteriores, para establecer una propiedad de objeto con un nombre calculado, tenía que hacer esto:
var x = "hola mundo", y = 25 var a = x: x, y: y a ["joe" + y] = 4 // a es ahora: x: "hola mundo", y: 25 , joe25: 4 Ahora puedes hacerlo todo en una sola definición:
var a = x, y, ["joe" + y]: 4 // devuelve x: "hola mundo", y: 25, joe25: 4 Y, por supuesto, para definir métodos, simplemente puede definirlo con el nombre:
var a = x, y, ["joe" + y]: 4, foo (v) return v + 4 a.foo (2) // devuelve 6 8. Sintaxis de definición de clase formal
Definición de clase
Y finalmente, JavaScript obtiene una sintaxis formal de definición de clase. Si bien es meramente azúcar sintáctica sobre las clases basadas en protytype ya disponibles, sirve para mejorar la claridad del código. Eso significa que esto hace no Agrega un nuevo modelo de objeto o algo así de fantasía..
clase Circle constructor (radio) this.radius = radio // úselo var c = new Circle (4) // devuelve: Circle radio: 4 Métodos de declaración
Definir un método también es bastante simple. No hay sorpresas allí.
clase Circle constructor (radio) this.radius = radio computeArea () return Math.PI * this.radius * this.radius var c = new Circle (4) c.computeArea () // devuelve: 50.26548245743669 Hechiceros y Setters
Ahora también tenemos getters y setters, con una simple actualización de la sintaxis. Vamos a redefinir el Circulo clase con un zona propiedad.
clase Circle constructor (radio) this.radius = radio get area () return Math.PI * this.radius * this.radius var c = new Circle (4) // devuelve: Circle radius: 4 c.area // devuelve: 50.26548245743669 Ahora agreguemos un setter. Poder definir radio como una propiedad configurable, deberíamos redefinir el campo real a _radio o algo que no chocará con el setter. De lo contrario nos encontramos con un error de desbordamiento de pila.
Aquí está la clase redefinida:
clase Circle constructor (radio) this._radius = radio obtener area () return Math.PI * this._radius * this._radius set radius (r) this._radius = r var c = new Circle (4) // devuelve: círculo _radius: 4 c.area // devuelve: 50.26548245743669 c.radius = 6 c.area // devuelve: 113.09733552923255 Con todo, esta es una buena adición a JavaScript orientado a objetos.
Herencia
Además de definir las clases usando el clase palabra clave, también puede utilizar el se extiende palabra clave para heredar de las súper clases. Veamos cómo funciona esto con un ejemplo..
class Ellipse constructor (width, height) this._width = width; this._height = altura; get area () return Math.PI * this._width * this._height; establecer ancho (w) this._width = w; establecer la altura (h) esto._ altura = h; clase Círculo extiende Ellipse constructor (radio) super (radio, radio); establecer el radio (r) super.width = r; super.height = r; // crea un círculo var c = new Circle (4) // devuelve: Circle _width: 4, _height: 4 c.radius = 2 // c es ahora: Circle _width: 2, _height: 2 c.area // devuelve: 12.566370614359172 c.radius = 5 c.area // devuelve: 78.53981633974483 Y esa fue una breve introducción a algunas de las características de JavaScript ES6..
A continuación: Creación de secuencias de comandos de una animación de robot sensible a la voz Cómo escribir una animación de robot sensible a la voz en p5.js Cómo realizar una secuencia de comandos de una animación de robot sensible a la voz en p5.js ¿Quiere que sus hijos se interesen en la programación? Muéstrales esta guía para construir una cabeza de robot animada reactiva con sonido. Lee mas !
Crédito de la imagen: micrologia / Depositphotos
Explorar más sobre: JavaScript, .