Home-theater-designers
ES6 refere-se à versão 6 da linguagem de programação ECMA Script. ECMA Script é o nome padronizado para JavaScript, e a versão 6 é a próxima versão após a versão 5, lançada em 2011. É um grande aprimoramento da linguagem JavaScript e adiciona muitos outros recursos destinados a tornar o desenvolvimento de software em grande escala mais fácil .
ECMAScript, ou ES6, foi publicado em junho de 2015. Posteriormente, foi renomeado para ECMAScript 2015. O suporte do navegador da Web para o idioma completo ainda não está completo, embora muitas partes sejam suportadas. Os principais navegadores da web oferecem suporte a alguns recursos do ES6. No entanto, é possível usar um software conhecido como um jogador para converter o código ES6 em ES5, que é melhor suportado na maioria dos navegadores.
Vejamos agora algumas das principais mudanças que o ES6 traz para o JavaScript.
1. Constantes
Finalmente, o conceito de constantes chegou ao JavaScript! Constantes são valores que podem ser definidos apenas uma vez (por escopo, escopo explicado abaixo). Uma redefinição dentro do mesmo escopo aciona um erro.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
Você pode usar a constante sempre que puder usar uma variável ( Onde )
console.log('Value is: ' + joe * 2)
// prints: 8
2. Variáveis e funções com escopo de bloco
Bem-vindo ao século 21, JavaScript! Com ES6, as variáveis declaradas usando deixar (e as constantes descritas acima) seguem regras de escopo de bloco como em Java, C ++, etc. (Para saber mais, veja como declarar variáveis em JavaScript.)
Antes desta atualização, as variáveis em JavaScript tinham escopo de função. Ou seja, quando você precisava de um novo escopo para uma variável, precisava declará-lo dentro de uma função.
As variáveis retêm o valor até o final do bloco. Após o bloco, o valor no bloco externo (se houver) é restaurado.
como usar o aplicativo depois da escola sem facebook
{
let x = 'hello';
{
let x = 'world';
console.log('inner block, x = ' + x);
}
console.log('outer block, x = ' + x);
}
// prints
inner block, x = world
outer block, x = hello
Você também pode redefinir constantes dentro desses blocos.
{
let x = 'hello';
{
const x = 4.0;
console.log('inner block, x = ' + x);
try {
x = 3.5
} catch(err) {
console.error('inner block: ' + err);
}
}
x = 'world';
console.log('outer block, x = ' + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world
3. Funções de seta
ES6 apresenta funções de seta para JavaScript. (Essas funções são semelhantes às funções tradicionais, mas têm uma sintaxe mais simples.) No exemplo a seguir, x é uma função que aceita um parâmetro chamado para , e retorna seu incremento:
var x = a => a + 1;
x(4) // returns 5
Usando essa sintaxe, você pode definir e passar argumentos em funções com facilidade.
Usando com um para cada() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
Defina funções que aceitam vários argumentos, colocando-os entre parênteses:
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]
4. Parâmetros de função padrão
Os parâmetros da função agora podem ser declarados com valores padrão. Na sequência, x é uma função com dois parâmetros para e b . O segundo parâmetro b recebe um valor padrão de 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
Ao contrário de outras linguagens, como C ++ ou python, os parâmetros com valores padrão podem aparecer antes daqueles sem padrões. Observe que esta função é definida como um bloco com um Retorna valor a título de ilustração.
var x = (a = 2, b) => { return a * b }
No entanto, os argumentos são combinados da esquerda para a direita. Na primeira invocação abaixo, b tem um Indefinido valor, embora para foi declarado com um valor padrão. O argumento transmitido é combinado com para ao invés de b . A função retorna NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
Quando você passa explicitamente Indefinido como argumento, o valor padrão é usado, se houver.
x(undefined, 3)
// returns 6
5. Parâmetros da função de repouso
Ao invocar uma função, às vezes surge a necessidade de ser capaz de passar um número arbitrário de argumentos e processar esses argumentos dentro da função. Esta necessidade é tratada pelo parâmetros da função de descanso sintaxe. Ele fornece uma maneira de capturar o restante dos argumentos após os argumentos definidos usando a sintaxe mostrada abaixo. Esses argumentos extras são capturados em uma matriz.
var x = function(a, b, ...args) { console.log('a = ' + a + ', b = ' + b + ', ' + args.length + ' args left'); }
x(2, 3)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left
6. String Templating
O modelo de string refere-se à interpolação de variáveis e expressões em strings usando uma sintaxe como perl ou shell. Um modelo de string é colocado entre caracteres de retrocesso ( `` ) Em contraste, aspas simples ( ' ) ou aspas duplas ( ' ) indicam strings normais. As expressões dentro do modelo são marcadas entre $ { e } . Aqui está um exemplo:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
Claro, você pode usar uma expressão arbitrária para avaliação.
// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns 'hello 20'
Esta sintaxe para definir strings também pode ser usada para definir strings multilinhas.
var x = `hello world
next line`
// returns
hello world
next line
7. Propriedades do objeto
ES6 traz uma sintaxe de criação de objeto simplificada. Dê uma olhada no exemplo abaixo:
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Nomes de propriedades computadas também são muito bacanas. Com ES5 e anteriores, para definir uma propriedade de objeto com um nome computado, você tinha que fazer isso:
var x = 'hello world', y = 25
var a = {x: x, y: y}
a['joe' + y] = 4
// a is now:
{x: 'hello world', y: 25, joe25: 4}
Agora você pode fazer tudo em uma única definição:
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
E, claro, para definir métodos, você pode apenas defini-lo com o nome:
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. Sintaxe de definição de classe formal
Definição de Classe
E, finalmente, o JavaScript obtém uma sintaxe de definição de classe formal. Embora seja meramente sintático sobre as classes baseadas em protótipo já disponíveis, ele serve para aprimorar a clareza do código. Isso significa que isso significa não adicione um novo modelo de objeto ou qualquer coisa chique assim.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Métodos de declaração
Definir um método também é bastante simples. Sem surpresas aí.
class Circle {
constructor(radius) {
this.radius = radius
}
computeArea() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
c.computeArea()
// returns: 50.26548245743669
Getters e Setters
Agora temos getters e setters também, com uma atualização simples da sintaxe. Vamos redefinir o Círculo aula com um área propriedade.
class Circle {
constructor(radius) {
this.radius = radius
}
get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 50.26548245743669
Vamos agora adicionar um setter. Ser capaz de definir raio como uma propriedade configurável, devemos redefinir o campo real para _raio ou algo que não colida com o levantador. Caso contrário, encontramos um erro de estouro de pilha.
Aqui está a classe redefinida:
class Circle {
constructor(radius) {
this._radius = radius
}
get area() { return Math.PI * this._radius * this._radius }
set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255
Resumindo, essa é uma boa adição ao JavaScript orientado a objetos.
Herança
Além de definir classes usando o classe palavra-chave, você também pode usar a estende palavra-chave para herdar de superclasses. Vamos ver como isso funciona com um exemplo.
class Ellipse {
constructor(width, height) {
this._width = width;
this._height = height;
}
get area() { return Math.PI * this._width * this._height; }
set width(w) { this._width = w; }
set height(h) { this._height = h; }
}
class Circle extends Ellipse {
constructor(radius) {
super(radius, radius);
}
set radius(r) { super.width = r; super.height = r; }
}
// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483
E essa foi uma breve introdução a alguns dos recursos do JavaScript ES6.
A seguir: familiarizar-se com alguns métodos de array JavaScript importantes e criar um script de animação de robô sensível à voz! Além disso, descubra um ótimo framework de front-end chamado Vue.
Crédito da imagem: micrologia / Depositphotos
Compartilhado Compartilhado Tweet O email Canon vs. Nikon: Qual marca de câmera é melhor?Canon e Nikon são os dois maiores nomes da indústria de câmeras. Mas qual marca oferece a melhor linha de câmeras e lentes?
seu pc teve um problema e precisa reiniciarLeia a seguir Tópicos relacionados
- Programação
- JavaScript
Assine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Clique aqui para se inscrever