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); // 2En 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á definidoEn 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.