4 novas sintaxes em JavaScript 6

A versão ES6 do JS tem sido amplamente suportada pelos principais navegadores, e muitas estruturas de front-end também usaram o ES6, e Babel pode ser usado para compatibilidade, portanto, o ES6 entrou no estágio do aplicativo.

Se você não está familiarizado com o ES6, aqui estão 4 usos básicos simples que podem ajudá -lo a entender rapidamente ES6

1. Declare variáveis usando Let and Const

No código ES5 tradicional, existem dois problemas principais com declarações variáveis

(1) Falta de apoio ao escopo do bloco

(2) Constantes não podem ser declaradas

No ES6, esses dois problemas foram resolvidos, adicionando duas novas palavras -chave: Let and Const

Use Let For Block Scope

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

No ES5, a variável B declarada no bloco IF pode ser acessada fora do bloco.

 // em es6let a = 1; if (true) {let b = 2;} console.log (a); // 1console.log (b); // ReferenceError: B não está definido

No ES6, a variável B declarada usando LET in If Block não pode ser acessada fora do bloco

O código a seguir é uma situação comum confusa

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

Os resultados da corrida são: 5, 5, 5, 5, 5

Use Let to Declare Variable i em loop

 var b = []; para (vamos i = 0; i <5; i ++) {b.push (function () {console.log (i);});} B.ForEach (function (value) {value ();});

Os resultados da corrida são: 0, 1, 2, 3, 4

Defina constantes usando const

 // em es5var my_constant = true; my_constant = false;

As constantes não podem ser definidas no ES5, os valores podem ser alterados e só podemos garantir -lhes nós mesmos.

 // em es6const my_constant = true; my_constant = false; // Uncathed TypeError: atribuição a variável constante

Const declarado em ES6 não pode ser alterado

2. String de modelo

O seguinte método de splicing strings e variáveis é mais comum

var url = 'http: // www.' + domain + '.com/' + path + '?' + Queryparams;

ES6 fornece um uso conciso

Seja url = http: //www.$ {domain} .com/$ {path}? $ {queryparams} `;

3. Novos objetos de conjunto e mapa

No ES5, costumamos usar matrizes para armazenar dados dinâmicos, por exemplo

 var collection = []; coletor.push (1, 2, 1); console.log (coleção); // [1, 2, 1]

Ele contém dados duplicados. Se você não deseja dados duplicados, precisa usar o código para julgá -los.

 função addTocollection (coleta, valor) {if (collection.indexOf (value) <0) {collection.push (value)}}

O ES6 fornece objetos definidos, o que torna muito mais conveniente lidar com essa situação.

 let collection = new set (); collection. // Definir {1, 2}

O conjunto também pode atravessar convenientemente o conjunto e processar os dados no conjunto.

O ES5 é geralmente usado para armazenar dados de pares de valor-chave, por exemplo

 var collection = {}; coleta.a = 'abc'; collection.b = 'xyz';

ES6 tem mapa, para que possa ser usado

 Let collection = new map (); collection.set ('a', 'abc'); collection.set ('b', 'xyz');

Traversal também é muito simples

 Coleção.ForEach (function (value, key) {console.log (key + ":" + value);}); console.log (collection.size);

4. Parâmetros de função

Existem dois novos recursos para os parâmetros de funções no ES6

valor padrão

 function dosomething (algumbject) {console.log (algumbject);}

Pode haver um erro de tempo de execução aqui e os parâmetros precisam ser verificados.

 função doSomething (algumbject) {if (algumbject === indefinido) {algumbject = {}; } console.log (algum total);}

Esse tipo de código de verificação é muito comum. Você pode definir valores padrão para parâmetros no ES6, o que é muito mais simples.

 função doSomething (algumbject = {}) {console.log (algumObject);}

Destruição de objetos

Muitas vezes passamos por um objeto contendo pares de valor-chave como parâmetros para uma função e depois obtemos as várias propriedades do objeto dentro da função

 function dosomething (somebject) {var one = algumObject.propone; console.log (um); var dois = algumObject.proptwo; console.log (dois); var três = algumObject.propthree; console.log (três);}

O ES6 nos permite desconstruir os parâmetros do objeto diretamente nos parâmetros

 função doSomething ({propone, proptwo, prothree}) {console.log (propone); console.log (proptwo); console.log (propThree);}

O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.