Introdução
O ECMAScript 6 é o próximo padrão para JavaScript e está em rápido desenvolvimento. O objetivo do ECMAScript 6 é permitir que o JavaScript seja usado para escrever aplicativos complexos, bibliotecas de funções e geradores automáticos de código (geradores de código). Os navegadores mais recentes já suportam parcialmente a sintaxe do ECMAScript 6. Atualmente, o ECMAScript 6 é basicamente o padrão da indústria, e sua popularidade é muito mais rápida que o ES5. A principal razão é que os navegadores modernos suportam o ES6 rapidamente, especialmente os navegadores do Chrome e do Firefox, que já suportam a maioria dos recursos no ES6.
1. Deixe, const e bloquear escopos
Let permite a criação de escopos de nível de bloco. O ES6 recomenda o uso de funções LET IN para definir variáveis em vez de var:
var a = 2; {let a = 3; console.log (a); // 3} console.log (a); // 2Outra maneira de declarar variáveis que também são válidas no escopo do nível de bloco é const, que pode declarar uma constante. No ES6, a constante declarada por const é semelhante a um ponteiro, o que aponta para uma referência, o que significa que essa "const" não é estática, como:
{const arr = [5,6]; Arr.push (7); console.log (arr); // [5,6,7] arr = 10; // typeError}Há alguns pontos a serem observados:
Deixe as palavras -chave declaradas variáveis não têm o recurso de elevação
As declarações LET e const são válidas apenas no bloco mais próximo (dentro do aparelho encaracolado)
Ao usar a declaração constante constante, use variáveis maiúsculas, como: capital_casing
const deve ser atribuído quando declarado
2. Funções de seta
No ES6, a função de seta é uma forma curta de uma função, usando colchetes para envolver os parâmetros, seguida por um =>, seguida pelo corpo da função:
var getPrice = function () {return 4.55;}; // implementação com a seta functionVar getPrice = () => 4,55;Deve -se notar que a função GetPrice Arrow na castanha acima usa um corpo de função concisa, que não requer uma declaração de retirada. A castanha abaixo usa um corpo de função normal:
deixe arr = ['maçã', 'banana', 'laranja']; Deixe o café da manhã = arr.map (fruta => {return fruit + 's';}); console.log (café da manhã); // maçãs Bananas laranjasObviamente, as funções de seta não são apenas tornar o código conciso, mas na função essa ligação sempre aponta para o próprio objeto. Para detalhes, você pode dar uma olhada nas seguintes castanhas:
function pessoa () {this.age = 0; setInterval (function GrowUp () {// No modo não rito, este da função Growup () aponta para o objeto de janela this.age ++;}, 1000);} var pessoa = new Person ();Geralmente, precisamos usar uma variável para salvar isso e depois fazer referência na função Growup:
function pessoa () {var self = this; self.age = 0; setInterval (function GrowUp () {self.age ++;}, 1000);}E o uso de funções de seta pode salvar esse problema:
function pessoa () {this.age = 0; setInterval (() => {// | this | aponte para a pessoa objetar this.age ++;}, 1000);} var pessoa = new Person ();3. Valor padrão do parâmetro da função
ES6 permite definir valores padrão para parâmetros de função:
Seja getFinalPrice = (preço, imposto = 0,7) => preço + preço * imposto; getFinalPrice (500); // 850
4. Operador de espalhamento/repouso
O operador de propagação / repouso refere -se a ..., se é espalhado ou descanso depende do contexto.
Quando usado em um iterador, é um operador de spread:
function foo (x, y, z) {console.log (x, y, z);} deixe arr = [1,2,3]; foo (... arr); // 1 2 3Quando usado para a transferência de argumentos da função, é um operador de descanso:
function foo (... args) {console.log (args);} foo (1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]5. Extensão lexical do objeto
O ES6 permite declarar a sintaxe abreviada ao declarar literais de objetos para inicializar os métodos de definição de variáveis e funções de atributo e permite operações de cálculo nas propriedades do objeto:
função getcar (make, modelo, valor) {return {// variável de abreviação make, // equivalente a fazer: fazer modelo, // equivalente ao modelo: valor do modelo, // equivalente ao valor: value // o atributo pode ser calculado usando expressões ['make' + make '// true, // ignore `function` key; }};} let car = getcar ('barret', 'lee', 40000); // saída: {// make: 'Barret', // Model: 'lee', // Valor: 40000, // makebarret: true, // depreciados: function () //}6. Literais binários e octais
O ES6 suporta literais binários e octais, que podem ser convertidos em valores binários adicionando 0o ou 0o na frente do número:
Seja ovalue = 0o10; console.log (ovalue); // 8 Deixe BValue = 0B10; // use `0b` ou` 0b` console.log (bvalue); // 2
7. Destruição de objeto e matriz
A desconstrução pode evitar a geração de variáveis intermediárias quando a atribuição de objetos:
function foo () {return [1,2,3];} deixe arr = foo (); // [1,2,3] vamos [a, b, c] = foo (); console.log (a, b, c); // 1 2 3 barra de função () {return {x: 4, y: 5, z: 6};} Seja {x: x, y: y, z: z} = bar (); console.log (x, y, z); // 4 5 68. Superclass de objeto
ES6 permite o uso do Super Método em objetos:
var pai = {foo () {console.log ("Olá do pai"); }} var criança = {foo () {super.foo (); console.log ("Olá da criança"); }} Object.SetProTypeOf (filho, pai); Child.foo (); // Olá do pai // Olá da criança9. Sintaxe e separador de modelo
Existe uma maneira muito concisa de montar um monte de cordas e variáveis no ES6.
$ {...} é usado para renderizar uma variável
`Como um separador
Deixe o usuário = 'Barret'; console.log (`hi $ {user}!`); // Oi Barret!10. Para ... de Vs para ... em
Pois ... de é usado para atravessar um iterador, como uma matriz:
Deixe apelidos = ['DI', 'boo', 'punkeye']; apelidos.size = 3; para (deixe o apelido de apelidos) {console.log (apelido);} resultado: di, boo, punkeye, punkeyePois ... In é usado para atravessar as propriedades em um objeto:
Deixe apelidos = ['DI', 'boo', 'punkeye']; apelidos.size = 3; para (deixe o apelido em apelidos) {console.log (apelido);} Resultado: 0, 1, 2, tamanho11. Mapa e Frafmap
Existem dois novos conjuntos de estrutura de dados no ES6: mapa e fracos. De fato, cada objeto pode ser considerado um mapa.
Um objeto é composto por vários pares de valores-chave. Em um mapa, qualquer tipo pode ser usado como a chave do objeto, como:
var mymap = new map (); var keystring = "A String", keyobj = {}, keyfunc = function () {}; // defina o valor mymap.set (tecla, "o valor está associado a 'a string'"); mymap.set (keyobj, "o valor está associado ao keyobj"); mymap.set (keyfunc, "o valor está associado ao keyfunc"); mymap.size; // 3 // Obtenha o valor mymap.get (tecla); // "O valor está associado a 'a string'" mymap.get (keyobj); // "O valor está associado a 'a string'" mymap.get (keyobj); // "O valor está associado a 'a string'" mymap.get (keyobj); // "valor associado a keyobj" mymap.get (keyfunc); // "Valor associado ao keyfunc"Map fraco
O Frafmap é um mapa, mas todas as suas teclas são referências fracas, o que significa que as coisas no Frafmap não são consideradas quando a coleta de lixo e você não precisa se preocupar com vazamentos de memória ao usá -lo.
Outra coisa a observar é que todas as chaves do fracos devem ser objetos. Ele possui apenas quatro métodos: excluir (chave), possui (chave), obtenha (chave) e set (chave, val):
Seja w = new fradMap (); w.set ('a', 'b'); // Unchished TypeError: Valor inválido usado como tecla de mapa fraca var o1 = {}, o2 = function () {}, o3 = window; W.set (O1, 37); W.set (O2, "Azerty"); W.set (O3, indefinido); w.get (O3); // indefinido, porque esse é o valor definido W.Has (O1); // truew.delete (O1); W.Has (O1); // false12.
Um objeto definido é um conjunto de valores não repetidos e os valores duplicados serão ignorados. Os tipos de valor podem ser primitivos e tipos de referência:
deixe myset = new Set ([1, 1, 2, 2, 3, 3]); myset.size; // 3myset.has (1); // truemyset.add ('strings'); myset.add ({a: 1, b: 2});Você pode atravessar objetos definidos através de foreach e para ... de:
myset.ForEach ((item) => {console.log (item); // 1 // 2 // 3 // 'strings' // objeto {a: 1, b: 2}}); para (deixe o valor de myset) {console.log (value); // 1 // 2 // 3 // 'strings' // objeto {a: 1, b: 2}}O set também possui métodos delete () e clear ().
Conjunto fraco
Semelhante ao Frafmap, o objeto de conjunto fraco permite salvar referências fracas aos objetos em uma coleção, e os objetos no fracota só podem aparecer uma vez:
var ws = new frActSet (); var obj = {}; var foo = {}; ws.add (janela); ws.add (obj); ws.has (janela); // truews.has (foo); // Falso, o Foo não foi adicionado com sucesso ws.delete (janela); // Exclua o objeto de janela do WS.HAS (janela); // Falso, o objeto de janela foi excluído13. Classe
Há sintaxe de classe no ES6. Vale a pena notar que a classe aqui não é um novo modelo de herança de objeto, é apenas uma expressão sintática de açúcar da cadeia de protótipo.
Os métodos e propriedades do construtor são definidos na função usando a palavra -chave estática:
classe Task {construtor () {console.log ("Tarefa instanciada!"); } showid () {console.log (23); } static loadall () {console.log ("Carregando todas as tarefas .."); }} console.log (TypeOf Task); // FunctionLelet Task = new Task (); // "Tarefa instanciada!" Task.Showid (); // 23Task.loadall (); // "Carregando todas as tarefas .."Herança e substituição da classe:
classe car {construtor () {console.log ("Criando um novo carro"); }} classe Porsche estende o carro {construtor () {super (); console.log ("Criando Porsche"); }} Seja C = new Porsche (); // Criando um novo carro // Criando PorscheO Extends permite que uma subclasse herde a classe pai. Deve -se notar que a função super () precisa ser executada na função construtora da subclasse.
Obviamente, você também pode chamar os métodos da classe pai nos métodos de subclasse, como Super.parentMethodName ().
Leia mais sobre a aula aqui.
Há alguns pontos que vale a pena notar:
A declaração da classe não estará içando. Se você deseja usar uma classe, deve defini -la antes de usá -la, caso contrário, um erro de referência será lançado.
Definir funções nas classes não requer o uso de palavras -chave da função
14. Símbolo
O símbolo é um novo tipo de dados cujos valores são únicos e imutáveis. O objetivo do símbolo proposto no ES6 é gerar um identificador exclusivo, mas você não pode acessar esse identificador:
var sym = símbolo ("Alguma descrição opcional"); console.log (typeof sym); // símboloObserve que o novo operador não pode ser usado na frente do símbolo.
Se for usado como propriedade de um objeto, essa propriedade será inenumerável:
var o = {val: 10, [símbolo ("aleatório")]: "Eu sou um símbolo",}; console.log (object.getownPropertyNames (O)); // valSe você deseja obter a propriedade Symbol do objeto, precisar
15. Iteradores
O iterador permite o acesso a um elemento do conjunto de dados sempre que um elemento é acessado. Quando o ponteiro aponta para o último elemento do conjunto de dados, o iterador sai. Ele fornece a função Next () para iterar sobre uma sequência, que retorna um objeto que contém os atributos do feito e o valor.
No ES6, você pode definir um TraverSer padrão para o objeto através do símbolo.iterator. Não importa quando o objeto precisa ser atravessado, o método @@ iterator que executa seu método @@ iterator pode retornar um iterador para obter o valor.
A matriz é um iterador por padrão:
var arr = [11,12,13]; var itr = arr [símbolo.iterator] (); itr.next (); // {value: 11, feito: false} itr.Next (); // {value: 12, feito: false} itr.Next (); // {value: 13, feito: false} itr.Next (); // {value: indefinido, feito: true}Você pode personalizar um iterador para um objeto através do [symbol.iterator] ().
16. geradores
A função do gerador é um novo recurso do ES6, que permite que uma função retorne um objeto travessável para gerar vários valores.
Em uso, você verá a sintaxe e um novo rendimento de palavras -chave:
função *infinitenumbers () {var n = 1; while (true) {rendimento n ++; }} var número = infinitenumbers (); // retorna um número de objetos iterável.Next (); // {value: 1, feito: false} números.next (); // {value: 2, feito: false} números.next (); // {value: 3, feito: false}Cada rendimento de tempo é executado, o valor retornado se torna o próximo valor do iterador.
17. Promessas
O ES6 tem apoio nativo à promessa. Uma promessa é um objeto que aguarda a execução assíncrona. Quando sua execução for concluída, seu estado será resolvido ou rejeitado.
var p = nova promessa (função (resolver, rejeitar) {if (/ * condition */) {// cumprido com êxito (/ * value */);} else {// error, rejeição rejeitada (/ * raciocinar */);}});Cada promessa possui um método. Então, que aceita dois parâmetros. O primeiro é lidar com o retorno de chamada do estado resolvido, e o outro é lidar com o retorno de chamada do estado rejeitado:
p.hen ((val) => console.log ("Promise resolvido", val), (err) => console.log ("promessa rejeitada", err));O exposto acima é uma introdução ao início rápido do ECMAScript 6 compilado para todos. Amigos que precisam podem aprender e se referir a ele.