Programação para Web II

A atualização ES6 (ou ECMA Script 2015) foi uma das maiores e mais importantes atualizações para o javascript.

Após alguns anos de poucas mudanças, essa versão trouxe uma grande quantidade de novos recursos e sintaxes que dinamizaram ainda mais a implementação através da linguagem javascript

Nesta aula veremos alguns desses recursos e como podem ser aplicados na prática

Lista completa de novidades da ES6

Por padrão, o javascript disponibiliza diversas funções para iteração e tratamento de vetores. O uso dessas funções está, geralmente, associado à uma melhor organização do código. Entre as diversas funções disponibilizadas por arrays, temos:

• Array.map() utilizada para iterar sobre todos os elementos de um vetor
• Array.sort() utilizada para ordenar os elementos de um vetor
• Array.filter() utilizada para filtrar os elementos de um vetor
• Array.reduce() utilizada reduzir o vetor a um único valor
• Array.find() utilizada para buscar elementos em um vetor

O método map permite iterar um array chamando uma nova função para cada iteração. Esse métodosempre retorna um novo array como resultado.

let minhaCallback = function conta(texto){
    return texto.length
}

var lista = ["verde", "amarelo", "azul"]
console.log(lista.map(minhaCallback))

Mais na documentação de map

O método sort permite criar um comparador para vetores. Caso não seja passado um callback, o sort retorna uma conversão padrão para string e numbers. A função sort sempre altera o estado do vetor original.

let minhaCallback = function compara(a, b){
    if(a.length > b.length){
        return -1
    }

    if(a.length < b.length){
        return 1
    }

    return 0
}

var lista = ["verde", "amarelo", "azul"]
console.log(lista.sort(minhaCallback))

No exemplo, o método `sort` itera sobre os elementos do vetor, organizando-os de acordo com o retorno especificado no callback.

Mais na documentação de sort

O método filter cria um array com todos os elementos que passaram no teste do callback. O método filter sempre retorna um novo array.

let minhaCallback = function filtro(item){
    return item[0] === 'a'
}

var lista = ["verde", "amarelo", "azul"]
console.log(lista.filter(minhaCallback))

No exemplo, os itens da lista são filtrados de acordo com o critério retornado pelo callback.

Mais na documentação de filter

O método reduce permite executar uma função callback sobre um vetor de dados, resultado em um acumulador final. O método reduce sempre retorna um novo array.

let minhaCallback = function soma(resultado, texto){
    return resultado + texto.length
}

let lista = ["verde", "amarelo", "azul"]
console.log(lista.reduce(minhaCallback, 0))

No exemplo, os itens da lista são iterados e acumulados em um acumulador.

Mais na documentação de reduce

A declaração de classes pode ser realizada da seguinte maneira:

class Casa {
    constructor() {
        this.numero = 42
    }

    endereco() {
        console.log('Número' + this.numero)
    }
}

var minhaCasa = new Casa() //Instancia o objeto
minhaCasa.endereco() // Olá Mundo

As classes no JavaScript, ao contrário de funções e variáveis, não são hoisted, o que significa que devem ser declaradas antes de sua utilização.

Mais na documentação de classes

O conceito de herança no javascript segue o conceito clássico de orientação a objetos:

class Apartamento extends Casa {

}

Quando trabalhamos com classe, também podemos definir métodos estáticos:

class App {
    static log() {
        console.log('Olá mundo')
    }
}

App.log() // Olá Mundo

As constantes no javascript possuem escopo de bloco e são semelhantes às variáveis declaradas usando let. A referência de uma constante não pode ser alterada por atribuição e ela não pode ser redeclarada.

No entanto é importante observar que no caso de objetos ou vetores, por exemplo, ainda é possível alterar o valor dos atributos e posições.

const pi = 3.14
pi = 3 // ERRO

const jogo = {
    "nome": GTA 6
}
jogo.nome = "Fake" // OK

Há duas formas de declarar variáveis no javascript. A primeira é usando a palavra var, que é de escopo da função.

var minhaVariavel; // declara variável
minhaVariavel = 10; // atribui valor à variável
minhaVariavel = "teste"; // atribui um novo à variável
var nome = "chapolin"; // declara e atribui valor à variável

A palavra reservada let declara variáveis acessíveis apenas no escopo mais próximo onde foram declaradas.

function relatorio(){
    if(true){
        let nome = 'kratos'
        var poder = 40

        console.log(nome) // imprime normalmente
        console.log(poder) // imprime normalmente
    }

    console.log(nome) // erro de referencia
    console.log(poder) // imprime normalmente
}

relatorio()

console.log(nome) // erro de referencia
console.log(poder) // erro de referencia

A declaração usando a palavra let é geralmente recomendada pois evita desentendimento e reatrbuição de variáveis com escopo de função (var).

Arrow Functions são formas alternativas de declaração de funções:

// Function expression
function(){

}

// Arrow Function expression
() => {

}

A principal diferença entre as Arrow Functions para as funções normais (usando a palavra reservada function) é que arrow functions não possuem seu próprio escopo this, como é verificado nas funções normais. Isso garante que essas funções irão assumir o contexto this do local onde foram chamadas, facilitando principalmente o uso com classes e objetos.

class App {
    static executar(){
        console.log(function(){
            return this // Retorna undefined
        }())

        console.log((() => {
            return this // Retorna a classe App
        })())
    }
}

var app = new App()
App.executar()

Também é possível definir um valor padrão para os argumentos de uma função usando o operador de atribuição.

function soma(a = 1, b = 2) {
    console.log(a + b)
}

soma(4) // 6

A desestruturação pode extrair dados de objetos e vetores diretamente de variáveis e constantes.

const time = {
nome: 'Criciúma',
    dados: {
        sigla: 'CEC',
        site: 'criciumaesporteclube.com.br'
    }
}

let { nome } = time
console.log(nome) // Criciúma
let { dados: { site } } = time
console.log(site) // criciumaesporteclube.com.br

function showName({ nome }) {
    console.log(nome)
}

const usuario = { nome: 'Ramon' }
showName(usuario) // Ramon

const numeros = [1, 2, 3]
let [a, b, c] = numeros

console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

Mais informações na documentação de desestruturação

O chamado operador rest é utilizado como um açucar sintático para representar um número indeterminado de valores de um vetor em diferentes variáveis:

const numeros = [1, 2, 3, 4, 5]

let [a, b, ...c] = numeros

console.log(a) // 1
console.log(b) // 2
console.log(c) // [3, 4, 5]

O chamado operador spread pode ser utilizado como um açucar sintático para representar as propriedades de objeto ou os valores de um vetor:

const usuario = {
    nome: 'ramon',
    empresa: 'unesc'
}

const novoUsuario = { ...usuario, nome: 'maradona' }

console.log(novoUsuario) // { nome: 'maradona', empresa: 'unesc' }

function soma(x, y, z){
    return x + y + z
}

let numeros = [1, 2 , 3]
console.log(soma(...numeros))

O literals utiliza o apóstrofo para concatenar strings à variáveis ou constantes. Além do apóstrofo, é preciso utilizar a sintaxe $ para compor a variável.

const a = 3
console.log(`O número é ${a}`. Boa sorte)

Ao definir as propriedades de um objeto usando variáveis, podemos substituir a declaração caso o identificador da variável seja o mesmo da propriedade como no exemplo abaixo:

const nome = 'Ronaldo'

const usuario = {
    nome // Mesma coisa que nome: nome
}

console.log(user.nome) // Ronaldo

Usando esta lista de dados como referência, crie uma função que realize cada um dos seguintes processamentos no conjunto de dados, usando as funções array:

• Usando map, crie uma lista com o alter_ego de todos os personagens
• Usando reduce, retorne o tamanho total de caracteres de todos os first_appearance cujo o publisher é igual a "Marvel Comics"
• Usando filter, imprima a lista apenas de personagens cujo o publisher é "DC Comics"
• Usando sort, organize o vetor pelo tamanho do nome dos personagens (superhero)

Você deverá criar uma página que simule partidas de futebol entre equipes acontecendo em tempo real, usando promises.

Para isso, crie um script que seja capaz de gerar novas promises e imprimir na tela uma lista com as promises iniciadas. Cada promise representa uma partida entre dois times de futebol digitados pelo usuário em um formulário com dois campos (para o nome de cada time).

Ao final do tempo de um tempo de 5 segundos, a promise deverá ser resolvida e o resultado da partida deverá ser mostrado na tela. Várias promises (partidas) podem rodar ao mesmo tempo.

O resultado da partida pode ser completamente aleatório

Implemente duas classes de acordo com o código abaixo. A primeira deve ser uma classe chamadaGerador, que possui um método chamado gerarHTML, que retorna apenas um elemento div em branco, e um método chamado addLista, que armazena na classe um array com a lista de compras. A segunda classe chama-se GeradorListae deve estender a primeira classe, alterando o método gerarHTML para gerar uma lista à partir de um array.

    class Gerador{
    //implementacao
}

class GeradorLista extends Gerador{
    //implementação
}

var gerador = new GeradorLista()
gerador.addItem("Shampoo")
gerador.addItem("Frutas")
gerador.addItem("Arroz")
var div = gerador.gerarHTML()
document.body.appendChild(div)
// gera uma lista com os itens de listaCompras

Reescreva a função abaixo usando o método map ou reduce e arrow functions:

function soma(numeros) {
    var resultado = 0
    for(var i = 0 i < numeros.length i++){
        resultado += numeros[i]
    }
    return resultado
}

Reescreva as operações da lista abaixo usando o operador rest/spread, usando no máximo duas linhas de código:

let admin = lista[2]
admin.nome = "root"
admin.status = true
let user_a = lista[0]
user_a.status = true
let user_b = lista[1]
user_b.status = true

Use esta lista como referência:

let lista = [
    {
        "nome": "ramon",
        "senha": "as54d6as5"
    },
    {
        "nome": "ronaldo",
        "senha": "1231ds"
    },
    {
        "nome": "adm",
        "senha": "DSF#@$"
    }
]