Apesar de ES6 especificação não é super-fresco, eu acho que muitos desenvolvedores ainda não saltar familiarizado com ele., A principal razão é provavelmente o suporte pobre em navegadores web logo após o lançamento da especificação. Atualmente, a especificação tem mais de 2 anos de idade, e um monte de navegadores web modernos funcionam bem com ES6. Mesmo que você (ou seus clientes) não usem a versão mais recente do navegador web, você pode usar transpilers (como Babel), que transforma fontes ES6 para Fontes ES5 durante o processo de construção da aplicação. Significa que está na hora de dar um passo em frente e aprender ES6.neste artigo, tentarei introduzir as características mais úteis de uma forma sucinta., Após o tutorial, você vai possuir habilidades básicas e ser capaz de aplicá-las em um projeto real. Não o trate como um guia ou documentação. Meu objetivo é encorajá-lo a cavar mais fundo e familiarizar-se com o ES6.
const e palavras-chave
const permite-lhe definir constantes (finalmente!). permite-lhe definir variáveis. Isso é óptimo, mas já não temos variáveis em JavaScript? Sim, é verdade, mas as variáveis declaradas pelo var têm escopo de função e são içadas para o topo. Significa que uma variável pode ser usada antes de ser declarada., deixe as variáveis e constantes ter o escopo do bloco (rodeado por {}) e não pode ser usado antes da declaração.
Array de funções auxiliares
Novos legal funções auxiliares apareceu, que facilitam o trabalho com JS matrizes em mais útil casos. Quantas vezes você implementou lógica como: filtragem, verificação se algum ou todos os elementos satisfazem a condição, ou conversão de elementos? Provavelmente muitas vezes. Agora você tem grandes recursos de linguagem para fazer o trabalho para você., Aqui, na minha opinião, estão as funções mais valiosas:
forEach
executa a função fornecida para cada elemento da matriz, passando o elemento array como um argumento.
mapa
Cria um novo array contendo o mesmo número de elementos, mas a saída são os elementos criados pelo função. Ele apenas converte cada elemento array para outra coisa.,
filtro
Cria um novo array contendo um subconjunto da matriz original. O resultado tem estes elementos que passam no teste implementado pela função fornecida, que deve retornar verdadeiro ou falso.
localizar
Encontra o primeiro elemento que passa o teste implementado pelo a função deve retornar true ou false.,
todos
Verifica se cada elemento da matriz passa o teste implementado pelo a função deve retornar true ou false.
algumas
Verifica se algum elemento da matriz passa o teste implementado pelo a função deve retornar true ou false.,
reduzir
Aplica-se uma função passado como o primeiro parâmetro contra um acumulador e cada elemento na matriz (da esquerda para a direita), reduzindo-a a um único valor. O valor inicial do Acumulador deve ser fornecido como o segundo parâmetro da função de redução.
Seta funções
Implementação de funções muito simples (como o já mencionado soma ou produto) requer a escrever um monte de clichê., Há algum remédio para isso? Sim, tente as funções de seta!
Seta funções também podem ser inline. Ele realmente simplifica o código:
Seta funções também podem ser mais complexos e têm muitas linhas de código:
Classes
Java Que desenvolvedor não perca classes, quando a mudança para um JS projeto?, Quem não gosta de herança explícita, como em linguagem Java, em vez de escrever código mágico para a herança prototípica? Embora alguns desenvolvedores JS reclamaram, as aulas foram introduzidas no ES6. Não mudam o conceito de herança. São apenas açúcar sintático para a herança prototípica.
Avançado literais de objeto
Objeto literais foram aprimorados., Agora nós podemos muito mais facilmente:
- definir campos com atribuição de variável de mesmo nome
- definir funções
- definir dinâmico (calculado) propriedades de
Modelo de cadeias de caracteres
Quem ama a escrita de seqüência de caracteres grandes e variáveis concatenação? Acredito numa minoria de nós. Quem detesta lê-lo? Tenho a certeza que todos. Felizmente, o ES6 introduz modelos de string muito fáceis de usar com substituições para variáveis.,
por Favor, note que podemos escrever de texto de várias linhas.
importante: Use backticks em vez de apostrofes para envolver o texto.
argumentos por omissão da função
não gosta de fornecer todos os parâmetros possíveis da função? Usar predefinições.
Resto e espalhar os operadores
Espalhar
permite a extração de matriz ou de objeto de conteúdo como de elementos simples.,
fazer cópia superficial de matriz:
Exemplo de mala — matrizes:
Resto
você gostaria de vincular o primeiro de alguns parâmetros da função de variáveis, e outros para variáveis simples como uma matriz? Agora podes fazê-lo facilmente.,
Desestruturação
De matriz
Permite a extração de pedido de elementos da matriz e atribuindo-os às variáveis.
Do objeto
Permite a extração de pedido propriedades do objeto e atribuindo-os às variáveis de mesmo nome, como propriedades.,
promessas
promessas (sim, eu sei que soa estranho) que você obteria em resultados futuros de Tarefas adiadas ou de longa duração. Promessa tem dois canais: o primeiro para resultados, o segundo para erros potenciais. Para obter o resultado, você fornece a função de callback como o parâmetro de função’ então’. Para lidar com erros, você fornece a função de callback como o parâmetro de função ‘catch’.
Por Favor note que a saída do exemplo pode diferir para cada execução, por causa da chamada de função aleatória.,
Resumo
espero que tenham gostado do artigo. Se você quiser alguma prática, você pode usar a caixa de areia para o processo de aprendizagem: https://es6console.com/. Se você precisar de mais informações, você pode encontrá-lo aqui: