4 nuevas sintaxis en JavaScript 6

La versión ES6 de JS ha sido ampliamente compatible con los principales navegadores, y muchos marcos frontales también han usado ES6, y Babel puede usarse para la compatibilidad, por lo que ES6 ha ingresado a la etapa de aplicación.

Si no está familiarizado con ES6, aquí hay 4 usos básicos simples que pueden ayudarlo a comprender rápidamente ES6

1. Declarar variables usando let and const

En el código ES5 tradicional, hay dos problemas principales con declaraciones variables.

(1) Falta de soporte para el alcance del bloque

(2) Las constantes no pueden ser declaradas

En ES6, estos dos problemas se resolvieron, agregando dos nuevas palabras clave: Let and Const

Use el alcance de Let for Block

 var a = 1; if (true) {var b = 2;} console.log (a); // 1console.log (b); // 2

En ES5, la variable B declarada en el bloque IF se puede acceder fuera del bloque.

 // en Es6let a = 1; if (true) {let b = 2;} console.log (a); // 1console.log (b); // referenceError: B no está definido

En ES6, la variable B declarada usando alquiler si no se puede acceder al bloque fuera del bloque

El siguiente código es una situación confusa común

 var a = []; for (var i = 0; i <5; i ++) {a.push (function () {console.log (i);});} a.forEach (function (valor) {value ();});

Los resultados de la ejecución son: 5, 5, 5, 5, 5

Usar Lett para declarar la variable I en bucle

 var b = []; para (let i = 0; i <5; i ++) {b.push (function () {console.log (i);});} b.forEach (function (valor) {valor ();});

Los resultados de la ejecución son: 0, 1, 2, 3, 4

Definir constantes usando const

 // en es5var my_constant = true; my_constant = false;

Las constantes no se pueden definir en ES5, los valores se pueden cambiar, y solo podemos garantizarlos nosotros mismos.

 // en ES6Const my_constant = true; my_constant = false; // typeError no capturado: asignación a una variable constante

Const declarado en ES6 no se puede cambiar

2. Cadena de plantilla

El siguiente método de empalme de cadenas y variables es más común

var url = 'http: // www.' + dominio + '.com/' + ruta + '?' + Querams;

Es6 proporciona un uso conciso

Let url = `http: //www.$ {dominio} .com/$ {rath}? $ {QueryParams}`;

3. Nuevos objetos de conjunto y mapa

En ES5, a menudo usamos matrices para almacenar datos dinámicos, por ejemplo

 var colección = []; colección.push (1, 2, 1); console.log (colección); // [1, 2, 1]

Contiene datos duplicados. Si no desea datos duplicados, debe usar el código para juzgarlo.

 función addTocollection (colección, valor) {if (colección.indexof (valor) <0) {colección.push (valor)}}

ES6 proporciona objetos establecidos, lo que hace que sea mucho más conveniente manejar esta situación.

 Let Collection = new Set (); Collection.Add (1); Collection.Add (2); Collection.Add (1); Console.log (Collection); // set {1, 2}

El conjunto también puede atravesar convenientemente el conjunto y procesar los datos en el conjunto.

ES5 generalmente se usa para almacenar datos de pares de valores clave, por ejemplo

 var colección = {}; colección.a = 'ABC'; colección.b = 'xyz';

ES6 tiene mapa, por lo que se puede usar

 Let Collection = new Map (); Collection.set ('A', 'ABC'); Collection.Set ('B', 'XYZ');

El recorrido también es muy simple

 Collection.ForEach (function (value, key) {console.log (clave + ":" + valor);}); console.log (colección.size);

4. Parámetros de función

Hay dos nuevas características para los parámetros de las funciones en ES6

valor predeterminado

 function DoSomething (someObject) {console.log (someObject);}

Puede haber un error de tiempo de ejecución aquí y los parámetros deben verificarse.

 function dosomething (someObject) {if (someObject === Undefined) {someObject = {}; } console.log (someObject);}

Este tipo de código de verificación es muy común. Puede establecer valores predeterminados para parámetros en ES6, que es mucho más simple.

 function dosomething (someObject = {}) {console.log (someObject);}

Destrucción de objetos

A menudo pasamos un objeto que contiene pares de valor clave como parámetros a una función, y luego obtenemos las diversas propiedades del objeto dentro de la función

 function dosomething (someObject) {var uno = someObject.propone; console.log (uno); var dos = someObject.propTwo; console.log (dos); var tres = someObject.propThree; console.log (tres);}

ES6 nos permite deconstruir los parámetros del objeto directamente en los parámetros

 function dosomething ({protone, proptWo, prelle}) {console.log (protone); console.log (proptwo); console.log (prosthree);}

Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.