String de modelo
Esta é uma das características do ES6 que eu gosto muito. Reflete a relação entre variáveis e cordas de maneira muito intuitiva. No ES5, se queremos adicionar variáveis às cordas, precisamos usar o seguinte método de escrita:
animate (caixa, 'traduzir (-' + itemwidth * num + 'px, 0)', 1000, function () {box.style.transitionDuration = ''; box.style.Transform = 'traduzir (-800px, 0)'; flag = true;});Agora, usando seqüências de modelos ES6, você pode combinar diretamente strings e variáveis para facilitar a compreensão.
Animate (caixa, `traduzir (-$ {itemWidth*num} px, 0)`, 1000, function () {box.style.transitionDuration = ''; box.style.transform = `transllate (-$ {itemwidth*(item.Length-2)} px, 0)`;É muito intuitivo e conveniente? A partir dos dois exemplos simples acima, é óbvio que no ES6, as cordas são marcadas com backticks (``), que precisa ser conhecido.
Há outro recurso. A sequência de modelos pode emitir uma sequência dobrada, o que é impossível nas cadeias de ES5 tradicionais. Ele deve ser usado (/n) e não pode ser escrito para entrar no retorno do carro ao escrever. No entanto, no modelo de string ES6, ele pode ser gravado para entrar e espaço diretamente e depois em saída diretamente quando a string é em saída, o que é muito conveniente.
deixe mystring = `abcdeffff fas`; console.log (mystring);/*saída abcdeffff fas*/
Extensão das funções
1. Defina valores padrão para a função
Na extensão da função, uma função é adicionada para definir valores padrão para a função, que pode ser considerada muito boa. Você se lembra de como definimos valores padrão para funções no ES5?
teste de função (a, b, c) {var a = a || 10; var a = b || 15; var c = c || 20; console.log (a+b+c);}Aqui definimos o valor padrão para alcançar nosso efeito esperado até um dia, passamos a = 0 pol. Nesse momento, é errado nós escrevermos dessa maneira. Para o programa, 0 é falso, portanto, um levará o valor padrão de 10, deixando de alcançar o efeito esperado. Mas o ES6 nos fornece uma maneira muito boa de definir valores padrão. O código acima pode ser reescrito da seguinte maneira:
teste de função (a = 10, b = 15, c = 20) {console.log (a+b+c);}2. Função de seta
Os alunos que entendem o CofficScript devem estar claros que o poder do CofficeScript é sua onipresente função de flecha, que é muito agradável de escrever. Agora, o ES6 introduziu oficialmente a função de seta, para que nosso programa possa ser simplificado, por exemplo:
// o método de escrita do ES5 var test = function (a, b) {return a+b;} // a função de seta do ES6 var test2 = teste (a, b) => a+b;Ao escrever carrosséis, você precisa mover o mouse para os seguintes pontos pequenos no objeto da matriz dos pequenos pontos, para que o gráfico possa se mover para a posição correta. No ES5, precisamos adicionar atributos ao objeto atual, que é mais pesado de escrever, e o método de escrita é o seguinte:
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);}, false);}Este atributo. Index é o índice do elemento colocado no mouse atual e, em seguida, o elemento atual é obtido com base nesse índice. Mas no ES6, podemos usar diretamente a função de seta e o recém -introduzido FindIndex na matriz para encontrar o índice do elemento ativo atual. O código é o seguinte:
Seja lilista = document.QuerySelectorAll ('li'); deixe Arraylilist = Array.form (lilista); para (var i = 0; i <lilist.length; i ++) {lilist [i] .Index = i; lilista [i] .AddeventListener ('mouseEnter', function () {let thisIndex = Arraylilist.findIndex ((n) => n == this);}, false);}Este índice obtido pelo código acima é o índice colocado no mouse atual. Aqui eu entendo o parâmetro n na função de seta. Depois de passar no parâmetro n, ele atravessará o objeto na matriz, de modo a encontrar o objeto igual a isso e depois retornará seu índice. Array.From () é usado aqui. Este é um novo método adicionado à matriz no ES6, que pode converter a matriz de classe em uma matriz.
ES6 para ... de loop
O Código JS acima usa os usos, mas, de fato, ele pode ser substituído pelo para… do loop no ES6, o que torna a escrita mais concisa. Você se lembra da… em loop em JS. Esse loop pode loop as teclas em pares de valor-chave, mas não pode fazer loop dos valores. O surgimento de para ... de é compensar suas deficiências. Os intervalos que podem ser usados pelo… do loop incluem matrizes, estruturas de conjunto e mapa, alguns objetos semelhantes a matrizes (como objetos de argumentos, objetos nodelistas de DOM), objetos geradores e strings. Portanto, podemos usar esse loop para substituir o loop for, mas aqui devemos observar que, se você usar o loop para ... de loop diretamente, um erro será relatado no Chrome49. O funcionário confirmou que este é um bug do Chrome49 e será corrigido no Chrome51 . Então, quando eu estava escrevendo, usei o Array.From () para converter o objeto Nodelist em uma matriz, para que eu possa operar com confiança. O código é o seguinte:
Seja lilista = document.QuerySelectorAll ('li'); deixe Arraylilist = Array.form (Lilist); para (vamos li de lilista) {li.addeventListener ('mouseEnter', function () {letIndex = Arraylilist.findIndEx ((n) => n = this);Resumir
O exposto acima é todo o conteúdo deste artigo. Não é muito conciso? Através deste artigo, sinto que apenas essas coisas já me fizeram sentir o charme do ES6. Espero que seja útil para todos aprenderem o ES6.