Guía de inicio rápido de ECMAScript6

Introducción

Ecmascript 6 es el siguiente estándar para JavaScript y está en un desarrollo rápido. El objetivo de ECMAScript 6 es permitir que JavaScript se use para escribir aplicaciones complejas, bibliotecas de funciones y generadores automáticos de código (generadores de código). Los últimos navegadores ya admiten parcialmente la sintaxis de ECMAScript 6. Ecmascript 6 es actualmente básicamente el estándar de la industria, y su popularidad es mucho más rápida que ES5. La razón principal es que los navegadores modernos admiten ES6 con bastante rapidez, especialmente los navegadores Chrome y Firefox, que ya admiten la mayoría de las características en ES6.

1. Sea, constante y bloqueo los ámbitos

Deje que la creación de ámbitos de nivel de bloque. ES6 recomienda usar funciones de Let In para definir variables en lugar de VAR:

 var a = 2; {Let a = 3; console.log (a); // 3} console.log (a); // 2

Otra forma de declarar variables que también son válidas en el alcance de nivel de bloque es const, lo que puede declarar una constante. En ES6, la constante declarada por const es similar a un puntero, que apunta a una referencia, lo que significa que este "const" no es estático, como:

 {const arr = [5,6]; Arr.push (7); console.log (arr); // [5,6,7] arr = 10; // typeError}

Hay algunos puntos a tener en cuenta:

Deje que las variables declaradas por palabras clave no tienen la función de elevación

Las declaraciones LET y const son válidas solo en el bloque más cercano (dentro de los aparatos ortopédicos)

Al usar la declaración constante constante, use variables mayúsculas, como: capital_casing

const debe asignarse cuando se declare

2. Funciones de flecha

En ES6, la función de flecha es una forma corta de una función, que usa entre paréntesis para envolver los parámetros, seguido de AN =>, seguido de la función del cuerpo:

 var getPrice = function () {return 4.55;}; // Implementación con flecha functionVar getPrice = () => 4.55;

Cabe señalar que la función GetPrice Arrow en el castaño de arriba utiliza un cuerpo de función concisa, que no requiere una declaración de retiro. El castaño de abajo usa un cuerpo de función normal:

 Sea arr = ['manzana', 'plátano', 'naranja']; dejar desayuno = arr.map (fruit => {return fruts + 's';}); console.log (desayuno); // naranjas de plátanos de manzanas

Por supuesto, las funciones de Arrow no se tratan solo de hacer que el código sea conciso, sino que en la función esta vinculación siempre apunta al objeto en sí. Para más detalles, puede echar un vistazo a las siguientes castañas:

 function persona () {this.age = 0; setInterval (function growUp () {// en modo no riguroso, esta de la función GrowUp () apunta al objeto de ventana este.age ++;}, 1000);} var persona = nueva persona ();

A menudo necesitamos usar una variable para guardar esto y luego hacer referencia a la función de crecimiento:

 función persona () {var self = this; self.age = 0; setInterval (function growUp () {self.age ++;}, 1000);}

Y usar funciones de flecha puede guardar este problema:

 function persona () {this.age = 0; setInterval (() => {// | this | punto a la persona objeto this.age ++;}, 1000);} var persona = nueva persona ();

3. Valor predeterminado del parámetro de función

ES6 le permite establecer valores predeterminados para los parámetros de función:

 Deje getFinalPrice = (precio, impuesto = 0.7) => precio + precio * impuesto; getFinalPrice (500); // 850

4. Operador de reparto/reposo

El operador de propagación / reposo se refiere a ..., ya sea que esté propagado o REST depende del contexto.

Cuando se usa en un iterador, es un operador de propagación:

 function foo (x, y, z) {console.log (x, y, z);} let arr = [1,2,3]; foo (... arr); // 1 2 3

Cuando se usa para la transferencia de argumentos de función, es un operador de descanso:

 función foo (... args) {console.log (args);} foo (1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

5. Extensión léxica del objeto

ES6 permite declarar la sintaxis abreviada al declarar literales de objetos para inicializar los métodos de definición de variables y funciones de atributos, y permite operaciones de cálculo en propiedades de objetos:

 function getCar (make, model, value) {return {// abreviation variable make, // equivalente a hacer: hacer model, // equivalente a model: valor de modelo, // equivalente a valor: valor // El atributo se puede calcular usando expresiones ['make' + make]: true, // `function` function `` functionwordalwordalword abreviation function depreciate () {this.value - -2500000000; }};} Let Car = GetCar ('Barret', 'Lee', 40000); // Salida: {// Make: 'Barret', // Model: 'Lee', // Value: 40000, // MakeBarret: True, // Depreciate: function () //}

6. Literales binarios y octales

ES6 admite literales binarios y octales, que pueden convertirse en valores binarios agregando 0o o 0o frente al número:

 dejar ovalue = 0o10; console.log (ovalue); // 8 Let Bvalue = 0b10; // use `0b` o` 0b` console.log (bvalue); // 2

7. Destrucción de objeto y matriz

La deconstrucción puede evitar la generación de variables intermedias cuando la asignación de objetos:

 función foo () {return [1,2,3];} LET arr = foo (); // [1,2,3] Sea [a, b, c] = foo (); console.log (a, b, c); // 1 2 3 Barra de función () {return {x: 4, y: 5, z: 6};} Let {x: x, y: y, z: z} = bar (); console.log (x, y, z); // 4 5 6

8. Superclase de objetos

ES6 permite el uso de super método en objetos:

 var parent = {foo () {console.log ("hola desde el padre"); }} var child = {foo () {super.foo (); console.log ("Hola desde el niño"); }} Objeto.setPrototypeOf (niño, padre); child.foo (); // hola desde el padre // hola desde el niño

9. Plantilla sintaxis y separador

Hay una forma muy concisa de ensamblar un montón de cuerdas y variables en ES6.

$ {...} se usa para representar una variable

`Como separador

 Deje que user = 'Barret'; console.log (`hola $ {user}!`); // Hola Barret!

10. Para ... de VS para ... en

porque ... de se usa para atravesar un iterador, como una matriz:

 Let Nicknames = ['Di', 'Boo', 'Punkeye']; Nicknames.size = 3; para (Let Nombre de los apodos) {Console.log (apodo);} Resultado: Di, Boo, Punkeye

para ... se utiliza para atravesar las propiedades en un objeto:

 Let Nicknames = ['Di', 'Boo', 'Punkeye']; Nicknames.size = 3; para (Let NpokName in Apodos) {console.log (apodo);} resultado: 0, 1, 2, tamaño

11. Mapa y mapas débiles

Hay dos nuevos conjuntos de estructuras de datos en ES6: MAP y WeakMap. De hecho, cada objeto puede considerarse como un mapa.

Un objeto está compuesto por múltiples pares de valores clave. En un mapa, cualquier tipo se puede usar como la clave del objeto, como:

 var mymap = new Map (); var keyString = "una cadena", keyObj = {}, keyFunc = function () {}; // Establecer el valor mymap.set (teclado, "El valor está asociado con 'una cadena'"); mymap.set (KeyObj, "El valor está asociado con KeyObj"); mymap.set (KeyFunc, "El valor está asociado con KeyFunc"); mymap.size; // 3 // Obtener el valor mymap.get (keyString); // "El valor está asociado con 'una cadena'" mymap.get (keyObj); // "El valor está asociado con 'una cadena'" mymap.get (keyObj); // "El valor está asociado con 'una cadena'" mymap.get (keyObj); // "Value Associate con KeyObj" mymap.get (KeyFunc); // "Valor asociado con KeyFunc"

Mapa débil

DeakMap es un mapa, pero todas sus claves son referencias débiles, lo que significa que las cosas en DableMap no se consideran cuando la recolección de basura, y no tiene que preocuparse por las fugas de memoria al usarlo.

Otra cosa a tener en cuenta es que todas las claves de WeakMap deben ser objetos. Solo tiene cuatro métodos: eliminar (clave), tiene (clave), get (clave) y establecer (clave, val):

 Sea w = nuevo débilmap (); w.set ('a', 'b'); // typeError no capturado: valor no válido utilizado como tecla de mapa débil var o1 = {}, o2 = function () {}, o3 = window; W.Set (O1, 37); w.set (o2, "azerty"); w.set (o3, indefinido); w.get (O3); // indefinido, porque ese es el valor establecido w.has (o1); // truew.delete (O1); W.Has (O1); // FALSO

12. Establecer y débil

Un objeto establecido es un conjunto de valores no preparados, y se ignorarán los valores duplicados. Los tipos de valor pueden ser primitivos y tipos de referencia:

 Deje myset = nuevo conjunto ([1, 1, 2, 2, 3, 3]); myset.size; // 3myset.has (1); // Truemyset.add ('Strings'); myset.add ({a: 1, b: 2});

Puede atravesar establecer objetos a través de foreach y para ... de:

 myset.forEach ((item) => {console.log (item); // 1 // 2 // 3 // 'Strings' // Object {A: 1, B: 2}}); para (dejar valor de myset) {console.log (valor); // 1 // 2 // 3 // 'Strings' // Object {A: 1, B: 2}}

SET también tiene métodos delete () y transparente ().

Juego débil

Similar a DeakMap, el objeto de conjunto débil le permite guardar referencias débiles a los objetos en una colección, y los objetos en el conjunto débil solo pueden aparecer una vez:

 var ws = new WeakSet (); var obj = {}; var foo = {}; ws.Add (ventana); ws.Add (obj); ws.has (ventana); // truewss.has (foo); // falso, foo no se ha agregado con éxito ws.delete (ventana); // Eliminar objeto de ventana de la combinación ws.has (ventana); // falso, el objeto de la ventana se ha eliminado

13. Clase

Hay sintaxis de clase en ES6. Vale la pena señalar que la clase aquí no es un nuevo modelo de herencia de objetos, es solo una expresión de azúcar sintáctica de la cadena prototipo.

Los métodos y propiedades del constructor se definen en la función utilizando la palabra clave estática:

 Tarea de clase {constructor () {console.log ("¡Tarea instanciada!"); } showId () {console.log (23); } static loadAll () {console.log ("Cargando todas las tareas ..."); }} console.log (tarea typeof); // tarea de function = new Task (); // "Tarea instanciada!" Tark.showid (); // 23Task.LoadAll (); // "Cargando todas las tareas ..."

Herencia y superconjuntos en la clase:

 Class Car {constructor () {console.log ("creando un auto nuevo"); }} class Porsche extiende Car {Constructor () {super (); console.log ("Creación de Porsche"); }} Let c = new Porsche (); // Creación de un auto nuevo // Creación de Porsche

Extends permite que una subclase herede la clase principal. Cabe señalar que la función super () debe ejecutarse en la función de constructor de la subclase.

Por supuesto, también puede llamar a los métodos de la clase principal en los métodos de subclase, como Super.ParentMethodName ().

Lea más sobre la clase aquí.

Hay algunos puntos que vale la pena señalar:

La declaración de la clase no se alejará. Si desea usar una clase, debe definirla antes de usarla, de lo contrario, se lanzará un error de referencia.

La definición de funciones en las clases no requiere el uso de palabras clave de funciones

14. Símbolo

El símbolo es un nuevo tipo de datos cuyos valores son únicos e inmutables. El propósito del símbolo propuesto en ES6 es generar un identificador único, pero no puede acceder a este identificador:

 var symbolo ("alguna descripción opcional"); console.log (typeOf sym); // símbolo

Tenga en cuenta que el nuevo operador no se puede usar frente al símbolo.

Si se usa como propiedad de un objeto, entonces esta propiedad será inenumerable:

 var o = {val: 10, [símbolo ("aleatorio")]: "Soy un símbolo",}; console.log (object.getownpropertynames (o)); // val

Si desea obtener la propiedad del símbolo del objeto, debe usar Object.getownPropertySymbols (o).

15. iteradores

El iterador permite el acceso a un elemento del conjunto de datos cada vez que se accede a un elemento. Cuando el puntero apunta al último elemento del conjunto de datos, el iterador sale. Proporciona la función Next () para iterar sobre una secuencia, que devuelve un objeto que contiene los atributos de valor y valor.

En ES6, puede establecer un Traverser predeterminado para el objeto a través de Symbol.iterator. No importa cuándo el objeto necesita ser atravesado, el método iterador @@ que ejecuta su método @@ iterator puede devolver un iterador para obtener el valor.

La matriz es un iterador de forma predeterminada:

 var arr = [11,12,13]; var itr = arr [symbol.iterator] (); ITR.NEXT (); // {valor: 11, hecho: falso} itr.next (); // {valor: 12, hecho: falso} itr.next (); // {valor: 13, hecho: falso} itr.next (); // {valor: indefinido, hecho: verdadero}

Puede personalizar un iterador para un objeto a través de [Symbol.iterator] ().

16. Generadores

La función del generador es una nueva característica de ES6, que permite que una función devuelva un objeto transitable para generar múltiples valores.

En uso verá la * sintaxis y un nuevo rendimiento de la palabra clave:

 función *infinitenumbers () {var n = 1; while (verdadero) {rendimiento n ++; }} var números = infinitenumbers (); // Devuelve un objeto ITerable Numbers.next (); // {valor: 1, hecho: falso} números.next (); // {valor: 2, hecho: falso} números.next (); // {valor: 3, hecho: falso}

Cada vez que se ejecuta el rendimiento, el valor devuelto se convierte en el siguiente valor del iterador.

17. Promesas

ES6 tiene apoyo nativo para la promesa. Una promesa es un objeto que espera la ejecución asincrónica. Cuando se complete su ejecución, su estado se resolverá o rechazará.

 var p = new promise (function (resolve, rechazar) {if (/ * condición */) {// fulfilled correctamente resuelve (/ * valor */);} else {// error, rechazo rechazado (/ * razon */);}});

Cada promesa tiene un método. Entonces, que acepta dos parámetros. El primero es manejar la devolución de llamada del estado resuelto, y el otro es manejar la devolución de llamada del estado rechazado:

 p.then ((val) => console.log ("promesa resuelto", val), (err) => console.log ("promesa rechazada", err));

Lo anterior es una introducción al inicio rápido de Ecmascript 6 compilado para todos. Los amigos que lo necesitan pueden aprender y referirse a él.