Harry James
0 
1761
424
ES6 se refiere a la versión 6 del lenguaje de programación ECMA Script. Script de ECMA 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. Todos lo usan. , 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 renombró 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 compatible con la mayoría de los navegadores.
Veamos ahora algunos cambios importantes que ES6 trae a JavaScript.
1. Constantes
¡Finalmente el concepto de constantes ha llegado a JavaScript! Las constantes son valores que se pueden definir solo una vez (por ámbito, ámbito explicado a continuación). Una redefinición dentro del mismo alcance desencadena un error.
const JOE = 4.0 JOE = 3.5 // resulta en: Tipo de error no capturado: Asignación a variable constante. Puede usar la constante donde sea 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 usando dejar (y las constantes descritas anteriormente) siguen las reglas de alcance de bloque como en Java, C ++, etc..
Antes de esta actualización, las variables en JavaScript tenían un alcance funcional. Es decir, cuando necesitaba un nuevo alcance para una variable, tenía que declararlo dentro de una función.
Las variables retienen el valor hasta el final del bloque. Después del bloque, se restaura el valor en el bloque exterior (si lo hay).
let x = "hola"; let x = "mundo"; console.log ("bloque interno, x =" + x); console.log ("bloque externo, x =" + x); // imprime el bloque interno, x = bloque externo del mundo, x = hola También puede redefinir constantes, dentro de tales bloques.
let x = "hola"; const x = 4.0; console.log ("bloque interno, x =" + x); pruebe x = 3.5 catch (err) console.error ("bloque interno:" + err); x = "mundo"; console.log ("bloque externo, x =" + x); // imprime el 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 Con 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 las funciones que aceptan 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 parámetro 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 lenguajes 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 a continuación, segundo tiene un indefinido valor a pesar de una ha sido declarado con un valor predeterminado. El argumento pasado se corresponde con una más bien que segundo. La función vuelve 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 descanso
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 la 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 se capturan 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 args a la izquierda x (2, 3, 4, 5) // imprime a = 2, b = 3, 2 args a la izquierda 6. Cadena Templating
La plantilla de cadenas se refiere a interpolar variables y expresiones en cadenas usando una sintaxis como perl o el shell. Una plantilla de cadena está encerrada en caracteres de retroceso (') 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 = 'hola $ nombre' // devuelve "hola joe" Por supuesto, puede 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 usar para definir cadenas de líneas múltiples.
var x = 'hello world next line' // devuelve hello world next line 7. Propiedades del objeto
ES6 trae una sintaxis de creación de objetos simplificada. Eche 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 formal de definición de clase
Definición de clase
Y finalmente, JavaScript obtiene una sintaxis formal de definición de clase. Si bien es simplemente azúcar sintáctica sobre las clases basadas en prototipo ya disponibles, sirve para mejorar la claridad del código. Eso significa que esto hace no agregar un nuevo modelo de objeto o algo elegante como eso.
clase Circle constructor (radio) this.radius = radio // úsalo var c = new Circle (4) // devuelve: Circle radius: 4 Métodos de declaración
Definir un método también es bastante simple. No hay sorpresas allí.
clase Círculo constructor (radio) this.radius = radio computeArea () return Math.PI * this.radius * this.radius var c = new Circle (4) c.computeArea () // devuelve: 50.26548245743669 Getters y Setters
Ahora tenemos getters y setters también, con una simple actualización de la sintaxis. Vamos a redefinir el Circulo clase con un zona propiedad.
clase Círculo 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 Agreguemos ahora un setter. Para poder definir radio como una propiedad configurable, debemos redefinir el campo real para _radio o algo que no choque con el armador. De lo contrario, encontramos un error de desbordamiento de pila.
Aquí está la clase redefinida:
clase Círculo constructor (radio) this._radius = radius get 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 al JavaScript orientado a objetos.
Herencia
Además de definir clases usando el clase palabra clave, también puede usar el se extiende palabra clave para heredar de superclases. Veamos cómo funciona esto con un ejemplo.
class Ellipse constructor (ancho, alto) this._width = ancho; this._height = height; get area () return Math.PI * this._width * this._height; establecer ancho (w) this._width = w; establecer altura (h) this._height = h; class Circle 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: Crear 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 escribir una animación de robot sensible a la voz en p5.js ¿Quiere que sus hijos se interesen en la programación? Muéstreles esta guía para construir una cabeza de robot animada reactiva al sonido. !
Haber de imagen: micrologia / Depositphotos