Cadena de plantilla
Esta es una de las características de ES6 que me gusta mucho. Refleja la relación entre variables y cadenas de manera muy intuitiva. En ES5, si queremos agregar variables a las cadenas, necesitamos usar el siguiente método de escritura:
Animate (box, 'traduce (-' + itemWidth * num + 'px, 0)', 1000, function () {box.style.transitionDuration = ''; box.style.transform = 'traduce (-800px, 0)'; flag = true;});Ahora que usa cadenas de plantilla ES6, puede combinar directamente cadenas y variables para que sea más fácil de entender.
animate (box, `traduce (-$ {itemWidth*num} px, 0)`, 1000, function () {box.style.transitionDuration = ''; box.style.transform = `traduce (-$ {itemwidth*(item.length-2)} Px, 0)` `; flag = verdadero;});¿Es muy intuitivo y conveniente? De los dos ejemplos simples anteriores, es obvio que en ES6, las cadenas están marcadas con backticks (``), que deben ser conocidos.
Hay otra característica. La cadena de plantilla puede emitir una cadena plegada, que es imposible en las cadenas ES5 tradicionales. Debe usarse (/n) y no se puede escribir para ingresar el regreso del carro al escribir. Sin embargo, en la plantilla de cadena ES6, se puede escribir para ingresar y espaciar directamente, y luego salir directamente cuando la cadena se emite, lo cual es muy conveniente.
Deje myString = `abcdeffff fas`; console.log (myString);/*salida abcdeffff fas*/
Extensión de funciones
1. Establezca valores predeterminados para la función
En la extensión de la función, se agrega una función para establecer valores predeterminados para la función, que se puede decir que es muy bueno. ¿Recuerdas cómo establecemos los valores predeterminados para las funciones en ES5?
prueba de función (a, b, c) {var a = a || 10; var a = b || 15; var c = c || 20; console.log (a+b+c);}Aquí establecemos el valor predeterminado para lograr nuestro efecto esperado hasta un día, pasamos a = 0 in. En este momento, está mal para nosotros escribir de esta manera. Para el programa, 0 es falso, por lo que A tomará el valor predeterminado de 10, por lo que no logrará el efecto esperado. Pero ES6 nos proporciona una muy buena manera de establecer valores predeterminados. El código anterior se puede reescribir de la siguiente manera:
prueba de función (a = 10, b = 15, c = 20) {console.log (a+b+c);}2. Función de flecha
Los estudiantes que entienden Cofficscript deben tener claro que el poder de Cofesscript es su función de flecha ubicua, lo cual es muy agradable de escribir. Ahora, ES6 ha introducido oficialmente la función de flecha, para que nuestro programa pueda simplificarse, por ejemplo:
// El método de escritura de ES5 var test = function (a, b) {return a+b;} // La función de flecha de ES6 var test2 = test (a, b) => a+b;Al escribir carruseles, debe mover el mouse a los siguientes puntos pequeños en el objeto de matriz de los puntos pequeños, para que el gráfico pueda moverse a la posición correcta. En ES5, necesitamos agregar atributos al objeto actual, que es más engorroso de escribir, y el método de escritura es el siguiente:
var lilist = document.querySelectorAll ('li'); para (var i = 0; i <lilist.length; i ++) {lilist [i] .index = i; lilista [i] .addeventListener ('mouseenter', function () {console.log (this.index);}, falso);}Este atributo de Idex este es el índice del elemento colocado en el mouse actual, y luego el elemento actual se obtiene en función de este índice. Pero en ES6, podemos usar directamente la función de flecha y el recién introducido FindIndex en la matriz para encontrar el índice del elemento activo actual. El código es el siguiente:
Let Lilist = document.QuerySelectorAll ('li'); dejar arrayLilist = array.form (lilist); para (var i = 0; i <lilist.length; i ++) {lilist [i] .index = i; lilista [i] .adDeventListener ('Mouseenter', function () {Let thisIndex = ArrayLilist.FinDindex ((n) => n == this);}, falso);}Este Idex obtenido por el código anterior es el índice colocado en el mouse actual. Aquí entiendo el parámetro n en la función de flecha. Después de pasar por el parámetro N, atravesará el objeto en la matriz, para encontrar el objeto igual a esto y luego devolver su índice. Array.from () se usa aquí. Este es un nuevo método agregado a la matriz en ES6, que puede convertir la matriz de clases en una matriz.
Es6 para ... de bucle
El bucle de código JS anterior usa para, pero de hecho, puede ser reemplazado por el para ... del bucle en ES6, lo que hace que la escritura sea más concisa. ¿Recuerdas el para ... en bucle en JS? Este bucle puede recorrer las teclas en pares de valor clave, pero no puede recorrer los valores. La aparición de para ... de es compensar sus deficiencias. Los rangos que pueden ser utilizados por ... de bucle incluyen matrices, estructuras establecidas y de mapas, algunos objetos similares a la matriz (como objetos de argumentos, objetos DOM Nodelist), objetos generadores y cadenas. Por lo tanto, podemos usar este bucle para reemplazar el bucle for, pero aquí debemos tener en cuenta que si usa el for ... de bucle directamente, se informará un error en Chrome49. El funcionario ha confirmado que este es un error de Chrome49 y se solucionará en Chrome51 . Entonces, cuando estaba escribiendo, usé Array.From () para convertir el objeto Nodelist en una matriz, para que pueda operar con confianza. El código es el siguiente:
Let Lilist = document.QuerySelectorAll ('li'); dejar arrayLilist = array.form (lilist); para (vamos li de lilist) {li.addeventListener ('mouseenter', function () {let thisindex = arrayLilist.finDindex ((n) => n = = esto);});};}Resumir
Lo anterior es todo el contenido de este artículo. ¿No es muy conciso? A través de este artículo, siento que solo estas cosas ya me han hecho sentir el encanto de ES6. Espero que sea útil para todos aprender ES6.