ECMAScript 6 - 10 nuevas características impresionantes
¿Sabía que JavaScript (junto con JScript y ActionScript) es una implementación de una especificación de lenguaje de scripting del lado del cliente de propósito general llamada ECMAScript? Para hacer que esta desagradable definición sea un poco más atractiva, podemos decir que ECMAScript (o oficialmente ECMA-262) es El estándar que define cómo usamos JavaScript y qué podemos lograr. con eso.
La última 6ª edición del lenguaje, ECMAScript 2015 (o ES6) es probablemente la actualización más significativa desde la primera versión en 1997. El objetivo principal de la última versión ha sido proporcionar un mejor soporte para crear aplicaciones y bibliotecas más grandes. Esto significa una sintaxis más madura, nuevos accesos directos para facilitar la codificación y también nuevos métodos, palabras clave, tipos de datos y muchas otras mejoras..
La documentación de ES6 es extensa. Si desea leer mucho, puede descargar todas las especificaciones del sitio web de ECMA International. En esta publicación analizaremos las 10 características seleccionadas, a pesar de que ES6 tiene mucho más que ofrecer. Si quieres experimentar con él, ES6 Fiddle es un gran lugar para hacerlo, y también puedes encontrar algunos fragmentos de código de ejemplo allí..
Soporte para ECMAScript 6
Los proveedores de navegadores han ido agregando gradualmente el soporte para las características de ECMAScript 6. Aquí puede encontrar una tabla de compatibilidad excelente sobre el soporte del compilador y el navegador para las nuevas características..
Si está interesado en la compatibilidad con ES6 en Node.js, consulte la documentación aquí.
Aunque actualmente no se admiten todas las funciones, podemos usar transpilers como Babel para transpilar nuestro código ES6 a ES5. Hay un genial complemento de Grunt para Babel, muchos increíbles complementos de ES6 para Grunt y un sorprendente complemento de Gulp-Babel, así que afortunadamente tenemos muchas opciones..
De esta manera podemos comenzar a utilizar la sintaxis y las capacidades mejoradas, mientras que no tenemos que preocuparnos por los problemas de compatibilidad. Ahora veamos las características..
1. Nuevo dejar Palabra clave
ES6 introduce el nuevo dejar palabra clave que nos permite declarar variables locales en el alcance de un bloque, como una declaración, una expresión o una función (n interna). Por ejemplo podemos declarar una para de la siguiente manera, luego reutilice el mismo nombre de variable (ya que su alcance está limitado a la para bucle) dentro de la siguiente Si declaración:
para (sea i = 0; i < myArray.length; i++) // Do something inside the block if (x > 0 && x! = Y) // Reutilizamos "i" dejamos que i = x * y
Utilizando la dejar palabra clave conduce a un código más limpio y más utilizable. La diferencia entre dejar y var está en el ámbito, por ejemplo, una variable local definida por el var La palabra clave se puede utilizar en toda la función de cierre, mientras que las variables definidas por dejar Solo trabajan en su propio (sub) bloque.. Dejar También se puede usar globalmente, en este caso se comporta de la misma manera que var. Por supuesto, en ES6 todavía podemos utilizar var si queremos.
2. Nuevo const Palabra clave
El nuevo const La palabra clave permite declarar constantes, también conocidas como variables inmutables, a las que no podemos reasignar nuevo contenido más adelante..
const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Error silencioso, ya que no podemos reasignar un nuevo valor a una constante
Las variables inmutables no siempre son completamente inmutables en ECMAScript 6, sin embargo, como una constante contiene un objeto, podemos cambiar el valor de sus propiedades y métodos. Lo mismo es cierto para los elementos de una matriz..
const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); // 22
Aún no podemos reasignar directamente un nuevo valor al objeto MY_CONSTANT en el fragmento de código anterior, lo que significa que no podemos cambiar los nombres de las propiedades y los métodos, y tampoco podemos agregar uno nuevo o eliminar uno existente, por lo que no podemos hacer el siguiente cosa:
MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // error
3. funciones de flecha
ECMAScript 6 facilita cómo escribimos funciones anonimas, como podemos omitir completamente la función palabra clave. Solo necesitamos usar la nueva sintaxis para funciones de flecha, lleva el nombre del signo de flecha => (flecha gruesa), que nos proporciona un gran atajo.
// 1. Un parámetro en ES6 let sum = (a, b) => a + b; // en ES5 var sum = function (a, b) return a + b; ; // 2. Sin parámetros en ES6, deje randomNum = () => Math.random (); // en ES5 var randomNum = function () return Math.random (); ; // 3. Sin retorno en ES6, deje el mensaje = (nombre) => alerta ("Hola" + nombre + "!"); // en ES5 var message = function (yourName) alert ("Hola" + yourName + "!"); ; Hay una diferencia importante entre las funciones regulares y de flecha, es decir, las funciones de flecha no reciben una esta valorar automáticamente como funciones definidas con el función palabra clave hacer. Funciones de flecha ligar léxicamente la esta Valor al alcance actual. Esto significa que podemos reutilizar fácilmente el esta palabra clave en una función interna. En ES5 solo es posible con el siguiente hack:
// ES5 Hack para usar la palabra clave "this" en una función interna … addAll: function addAll (pieces) var self = this; _.each (piezas, función (pieza) self.add (pieza);); , ... // ES6 la misma función interna ahora puede usar su propia "this" ... addAll: function addAll (pieces) _.each (pieces, piece => this.add (piece)); , ...
El código de arriba es de Mozilla Hacks
4. Nuevo untado Operador
El nuevo untado el operador está marcado con 3 puntos (...), y podemos usarlo para firmar el lugar de varios elementos esperados. Uno de los casos de uso más comunes del operador de propagación es insertar los elementos de una matriz en otra matriz:
deja myArray = [1, 2, 3]; let newArray = [… myArray, 4, 5, 6]; console.log (newArray); // 1, 2, 3, 4, 5, 6
También podemos aprovechar el untado Operador en llamadas de función en las que queremos pasar los argumentos de una matriz:
deja myArray = [1, 2, 3]; función suma (a, b, c) devuelve a + b + c; console.log (sum (… myArray)); // 6
los untado El operador es bastante flexible, ya que se puede usar varias veces en la misma matriz o llamada de función.
5. Valores predeterminados para parámetros y nuevos parámetros de descanso
Buena noticia, que en ECMAScript 6 podemos agregar valores predeterminados a los parámetros de una función. Esto significa que si no pasamos los argumentos más adelante en la llamada a la función, se utilizarán los parámetros predeterminados. En ES5, los valores predeterminados de los parámetros siempre se establecen en indefinido, Así que la nueva posibilidad de configurarlos para lo que queramos es definitivamente una gran mejora del lenguaje..
suma de funciones (a = 2, b = 4) return a + b; console.log (sum ()); // 6 console.log (suma (3, 6)); // 9
ES6 también introduce un nuevo tipo de parámetro, el parámetros de descanso. Se ven y funcionan de manera similar a los operadores de propagación. Son útiles si no sabemos cuántos argumentos se pasarán más adelante en la llamada a la función. Podemos usar las propiedades y los métodos del objeto Array en los parámetros de descanso:
función putInAlphabet (... args) let sorted = args.sort (); retorno ordenado console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); // a, c, c, e, i, m, p, r, s, t 6. Nuevo para ... de Declaración
Con la ayuda del nuevo para ... de En bucle podemos iterar sobre matrices u otros objetos iterables fácilmente. Junto con el nuevo para ... de ECMAScript 6 también introduce dos nuevos objetos iterables, Map for key / value map, y Set para colecciones de valores únicos que también pueden ser valores primitivos y referencias de objetos. Cuando usamos el para ... de declaración, el código dentro del bloque se ejecuta para cada elemento del objeto iterable.
deja myArray = [1, 2, 3, 4, 5]; vamos a sumar = 0; para (déjame i de myArray) suma + = i; console.log (suma); // 15 (= 1 + 2 + 3 + 4 + 5)
7. Literales de plantillas
ECMAScript 6 nos brinda una nueva alternativa para la concatenación de cadenas. Literales de plantilla Permítanos crear fácilmente plantillas en las que podamos incrustar diferentes valores en el lugar que queramos. Para ello necesitamos utilizar el PS sintaxis en todos los lugares donde queremos insertar los datos que podemos pasar desde variables, matrices u objetos de la siguiente manera:
dejar cliente = título: 'Ms', nombre de pila: 'Jane', apellido: 'Doe', edad: '34'; let template = 'Dear $ customer.title $ customer.firstname $ customer.surname! Feliz $ customer.age th cumpleaños! '; console.log (plantilla); // ¡Querida Sra. Jane Doe! Feliz 34 cumpleaños!
8. Clases
ES6 introduce clases de JavaScript que se basan en la herencia basada en un prototipo existente. La nueva sintaxis hace que sea más sencillo crear objetos, aprovechar el legado y reutilizar el código. También facilitará a los principiantes que llegan de otros lenguajes de programación entender cómo funciona JavaScript..
En ES6 se declaran clases con el nuevo. clase palabra clave, y necesita tener un constructor() método que se llama cuando un nuevo objeto se crea una instancia mediante el uso de la nueva myClass () sintaxis. También es posible extender nuevas clases con el clase niño extiende padre sintaxis que puede ser familiar de otros lenguajes orientados a objetos, como PHP. También es importante saber que, a diferencia de las declaraciones de funciones y variables, las declaraciones de clase NO se elevan en ECMAScript 6.
class Polygon constructor (altura, anchura) // class constructor this.name = 'Polygon'; this.height = altura; this.width = ancho; sayName () // class class console.log ('Hola, soy un', this.name + '.'); deja myPolygon = new Polygon (5, 6); console.log (myPolygon.sayName ()); // Hola, soy un polígono. Código arriba de ES6 Fiddle Ejemplos, .
9. módulos
¿Alguna vez te has preguntado qué tan genial sería si JavaScript fuera modular? Por supuesto, ha habido soluciones alternativas como CommonJS (utilizada en Node.js) o AMD (Definición de módulo asíncrono) (utilizada en RequireJS) para hacer eso antes, pero ES6 introduce módulos como una característica nativa..
Necesitamos definir cada módulo en su propio archivo, luego usar el exportar palabra clave para exportar variables y funciones a otros archivos, y el importar palabra clave para importarlos desde Otros archivos, según la siguiente sintaxis:
// function.js function cube (a) return a * a * a; function cubeRoot (a) return Math.cbrt (a); exportar cube, cubeRoot // o: exportar cube como cb, cubeRoot como cr // app.js importar cube, cubeRoot desde 'funciones'; console.log (cubo (4)); // 64 console.log (cubeRoot (125)); // 5
Esta solución es brillante, ya que el código almacenado en un módulo es invisible desde el exterior, y necesitamos exportar solo la parte a la que queremos que otros archivos accedan. Podemos hacer cosas mucho más sorprendentes con los módulos ES6, aquí puede encontrar una explicación excelente y detallada sobre ellos..
10. Cargas de nuevos métodos
ECMAScript 6 presenta muchos métodos nuevos para el Prototipo de cadena, el Objeto de matriz, el Prototipo de matriz y el Objeto matemático existentes. Los nuevos métodos pueden mejorar significativamente la forma en que podemos manipular estas entidades. Mozilla Dev tiene excelentes ejemplos de código de las nuevas incorporaciones, vale la pena tomarse un tiempo y examinarlas a fondo..
Solo para mostrar lo geniales que son, aquí está mi favorito: el método de búsqueda del prototipo Array, que nos permite probar un cierto criterio en los elementos de una matriz al ejecutar la función de devolución de llamada en cada elemento, y luego devolver el primer elemento que devoluciones cierto.
function isPrime (elemento, índice, matriz) var start = 2; mientras <= Math.sqrt(element)) if (element % start++ < 1) return false; return element > 1; console.log ([4, 6, 8, 12] .find (isPrime)); // indefinido, no encontrado console.log ([4, 5, 8, 12] .find (isPrime)); // 5
Código arriba de: Mozilla Dev
