Anexo 1 - ES 6

A grosso modo, es 6 é uma especificação do javascript, como se fosse uma nova versão, cheia de funcionalidades extras. Lembre que, no navegador, a versão do javascript que é executada é a mesma de anos atrás, a mais simples possível, sem nenhuma funcionalidade que a es 6 especifica. Então, antes de testar o es 6, é preciso converter essa "nova linguagem" em javascript puro, e isso chamamos de "transpilar" o código, que é uma espécie de compilação, só que usando a mesma linguagem.

Usando o vue-cli...

Você poderá usar es 6 normalmente, o código será transpilado automaticamente

Consulte o es 6

Neste link você acessa todas as funcionalidades extras do es 6.

Exemplo

Código javascript puro:

function add(x, y) {
    return x + y
}
1
2
3

Código es 6:

const add = (x,y) => x + y
1

Principais funcionalidades

Variáveis

  • usar let na maioria das vezes (escopo)
  • usar const sempre que a variável não alterar de calor
  • objetos são na maioria das vezes const, mesmo que suas propriedades sejam alteradas

Template Literais

Inserir variáveis dentro do texto

Antigo:

let surname = "Schmitz"
let name = " Daniel " + surname
1
2

Novo:

let surname = "Schmitz"
let name = ` Daniel ${surname} `
1
2

Destructing

Se uma função retorna um objeto com vários parâmetros, pode-se usar destructing para obter somente alguns deles

function bar() { return {a:1, b:2, c:3 } }
let {a, c} = bar()  // a = 1, b = undefinded
let {b} = bar() // b = 2
1
2
3

Valores padrão em parâmetros

Antes

var multiply = function(x, y) {
   y = y | 1;
   return x * y;
};

multiply(3, 2); // 6
multiply(3); // 3
1
2
3
4
5
6
7

Novo:

const multiply = (x, y = 1) => {
  return x * y
}

multiply(3, 2) // 6
multiply(3) // 3
1
2
3
4
5
6

ou até melhor: const multiply = (x, y = 1) => x * y

Arrow Functions

Duas funcionalidades básicas: mantém o escopo e não precisa do function.

Antes:

var sum = function(x, y) {
  return x + y;
};
1
2
3

Novo:

const sum = (x, y) => {
  return x + y
}
1
2
3

ou: const sum = (x, y) => x + y

let bar = (a, b) => a * b

// comum no uso do map, forEach, sort
let arr = [ 5, 6, 7, 8, 'a' ];
let b = arr.map( item => item + 3 );
console.log(b); // [ 8, 9, 10, 11, 'a3' ]

// Exemplo foreach
arr.forEach((element, index) => {
    console.log(`Current index: ${index}`);
    console.log(element);
});

1
2
3
4
5
6
7
8
9
10
11
12
13

Uso comum no Vue:

// getAll retorna um promise do axios
getAll().then(r => {
          this.table = r.data
        })
1
2
3
4

Uso comum em um objeto do Quasar

captura de tela de 2018-02-04 11-50-45

Uso duplo em um objeto do Quasar, o this continua o escopo do Vue

image

ES 6 e programação funcional

Definição de programação funcional:

Em ciência da computação, programação funcional é um paradigma de programação que trata a computação como uma avaliação de funções matemáticas e que evita estados ou dados mutáveis. Ela enfatiza a aplicação de funções, em contraste da programação imperativa, que enfatiza mudanças no estado do programa.

Dica: Estude programação funcional no youtube!

Map

O método map() invoca a função callback passada por argumento para cada elemento do Array e devolve um novo Array como resultado.

const students = [{name: 'anna', grade: 6},
            {name: 'John', grade: 4},
            {name: 'bob', grade: 9}]

const studentsByName = students.map(s => s.name)
// (3) ["anna", "John", "bob"]

1
2
3
4
5
6
7

Um pouco mais complexo, ver se os estudantes foram aprovados:

const studentsApproved = students.map(s => ({ name: s.name, approved: (s.grade >= 6) }) )
// (3) [{…}, {…}, {…}]
// 0: {name: "anna", approved: true}
// 1: {name: "John", approved: false}
// 2: {name: "bob", approved: true}
1
2
3
4
5