Estrutura de Dados com Classes JavaScript

FILA:

Image for post

class Fila {
    constructor(head = null, tail = null, count = 0){
        this.head = head;
        this.tail = tail;
        this.count = count;
    }
    GetContador(){
        return this.count;
    }
}

Enqueue:

Enqueue(data){
    let no = {
        data: data,
        next: this.head
    };
    if (this.head === null){
        this.tail = no;
    }
    this.head = no;
    this.count++;
}

Dequeue:

Dequeue(){
    if (this.count === 0){
        return;
    } else {
        let current = this.head;
        let previous = null;
        while (current.next){
            previous = current;
            current = current.next;
        }
        if (this.count > 1){
            previous.next = null;
            this.tail = previous;
        } else {
            this.head = null;
            this.tail = null;
        }
        this.count--;
    }
}

MostrarTudo:

MostrarTudo(){
    if (this.head === null){
        return null;
    } else {
        let arr = [];
        let current = this.head;
        for (let i = 0; i < this.count; i++) {
            arr[i] = current.data;
            current = current.next;
        }
        return arr;
    }
}

VisualizarEm:

VisualizarEm(index){
    if (index > -1 && index < this.count){
        let current = this.head;
        for (let i = 0; i < index; i++) {
            current = current.next;
        }
        return current.data;
    } else {
        return null;
    }
}

Agora, vamos testar:

let fila = new Fila();
fila.Enqueue(1);
fila.Enqueue(2);
fila.Enqueue(3);
fila.Enqueue(4);
fila.Enqueue(5);
fila.Enqueue(6);
fila.Dequeue();
fila.Dequeue();
console.log(fila.VisualizarEm(1));
console.log(fila.MostrarTudo());
console.log(fila);
Image for post

PILHA:

Image for post

Então, para começarmos a implementar a pilha, precisamos construir a nossa classe Pilha e seu construtor. Vamos implementar também um contador, que será útil para nos mostrar a quantidade de itens na pilha. No nosso construtor, precisamos setar nossos valores do contador e do topo da pilha. Como ainda não há nada na pilha, o topo é null e o contador é 0:

class Pilha {
    constructor(top = null, count = 0){
        this.top = top;
        this.count = count;
    }
    GetContador(){
        return this.count;
    }
}

Push:

Push(data){
    let no = {
       data: data,
       next: null
    };
    no.next = this.top;
    this.top = no;
    this.count++;
}

Visualizar:

Visualizar(){
    if (this.top === null){
        return null;
    } else {
        return this.top.data;
    }
}

Remover:

Remover(){
    if (this.top === null){
        return null;
    } else {
        let remover = this.top;
        this.top = this.top.next;
        if (this.count > 0){
            this.count--;
        }
        return remover.data;
    }
}

MostrarTodos:

MostrarTodos(){
    if (this.top === null){
        return null;
    } else {
        let arr = [];
        let current = this.top;
        for (let i = 0; i < this.count; i++){
            arr[i] = current.data;
            current = current.next;
        }
        return arr;
    }
}

E podemos testar a nossa estrutura de dados, instanciando uma nova pilha:

let pilha = new Pilha();
pilha.Push(1);
pilha.Push(2);
pilha.Push(3);
pilha.Push(4);
pilha.Push(5);
pilha.Push(6);
pilha.Push(7);
pilha.Remover();
console.log(pilha.Visualizar());
console.log(pilha.MostrarTodos());
console.log(pilha);

E a saída será:

Image for post

Continue lendo “Estrutura de Dados com Classes JavaScript”

Exercício – Letras repetidas

Neste exercício, temos um array composto de letras repetidas e uma letra isolada. Por exemplo, temos um array chamado vetor:

let vetor = ["a", "b", "a", "a", "c", "b"]

Aqui, temos:

vetor[0] = "a";
vetor[1] = "b";
vetor[2] = "a";
vetor[3] = "a";
vetor[4] = "c";
vetor[5] = "b";

Sabemos que a única letra que não possui repetição está na posição [4], elemento “c”. Então, precisamos retornar este elemento.

No nosso exercício, faremos:

  • Criaremos uma variável que terá o nosso vetor ordenado de forma crescente;
  • Criaremos uma variável chamada odd, que receberá futuramente o valor isolado;
  • Percorreremos o vetor ordenado;
  • Armazenaremos em variáveis o elemento atual e o próximo elemento;
  • Se o elemento atual for igual ao próximo, seguimos a iteração;
  • Senão, a variável odd recebe o valor isolado.

Você pode realizar o download da solução deste exercício aqui:

[download id=”4148″]

Exercício – Maior espaço entre letras

Um binary gap é uma sequência de bits consecutivos do mesmo valor (1 ou 0) que são circundados por bits de valores opostos. Por exemplo, o número 14512 (11100010110000) tem duas lacunas binárias 0, uma de comprimento 3 e outra de comprimento 1.

Portanto, o comprimento máximo de um intervalo binário (binary gap) é o comprimento do intervalo mais longo dentro da representação binária do número.

O número 9, tem representação binária 1001, contendo uma binary gap de tamanho 2. O número 529 possui uma representação binária 1000010001 e possui duas gap’s: uma com comprimento 4 e outra com comprimento 3.

Exercício

Construa uma função que, dado uma string, retorna o tamanho do seu maior intervalo entre as letras. Caso não existam intervalos entre as letras A e B, retorne 0.

Para realizar este exercício, você vai precisar:

  • Construir uma função chamada lacuna, que receberá como parâmetro uma String.
  • Iterar a string;
  • Encontrar o primeiro valor A no binário adicionado;
  • Encontrar a quantidade de B entre A.

Você pode fazer o download da solução aqui:

[download id=”4132″]

O que são React Components & Props

Componentes são como funções que retornam elementos HTML.

Os componentes são partes independentes e reutilizáveis de código. Eles possuem o mesmo propósito que as funções JavaScript, mas trabalham de forma isolada e retornam elementos HTML por uma função render.

Eles possuem dois tipos, chamados Componentes de Classes e Componentes de Funções.

Function Components

Um Function Component nada mais é do que uma função JavaScript que retorna um elemento JSX (leia este artigo se você não conhece JSX).

Por exemplo:

import React from 'react';

function ThisComponent(){
    const component = 'Olá Mundo! Eu sou um Componente!';
    return <h1>{component}</h1>;
}

export default ThisComponent;

Se você quer renderizar um React Component dentro de uma Function Component, você pode definir outro componente e renderizá-lo com HTML utilizando JSX:

import React from 'react';

function App(){
    return <ThisComponent />;
}

function ThisComponent(){
    const component = 'Olá Mundo! Eu sou um Componente!';
    return <h1>{component}</h1>;
}

export default App;

Deste modo, você tem um Componente Filho. Você consegue decidir como e onde renderizar um componente.

Class Component

Quando criamos um componente React, o nome do componente deve iniciar com uma letra maiúscula. Ao criar um Class Component, precisamos incluir o extends React.Component, pois este componente cria uma herança para o React.Component, criando um acesso às funções do React Component.

Criando um Class Component, precisamos do método render() para retornar HTML. Por exemplo:

class Pessoa extends React.Component {
    render(){
        return <h1>Olá, eu sou uma Pessoa!</h1>;
    }
}

Agora você tem um componente chamado Pessoa que retorna um elemento H1. Para usar este componente na aplicação, é só utilizar a sintaxe:

ReactDOM.render(<Pessoa />, document.getElementById('root'));

E esse componente será renderizado na sua página, no elemento root!

Component Constructor:

Se existe uma função construtora (constructor()) no seu componente, a função será chamada quando o componente for iniciado. O construtor será onde você irá iniciar as propriedades dos seus componentes.

No React, utilizamos um objeto chamado state para criar nossas propriedades de componentes. Utilize também o super() para utilizar os métodos herdados pela função construtora pai e também para obter acesso à todas as funções do método React.Component. Por exemplo, criaremos um componente Pessoa, com um estado de humor:

class Pessoa extends React.Component {
    constructor(){
        super();
        this.state = {humor: 'Bem humorada!'};
    }
    render(){
        return <h1>Olá, eu sou uma Pessoa {this.state.humor}</h1>;
    }
}

ReactDOM.render(<Pessoa />, document.getElementById('root'));

E temos a saída:

Olá, eu sou uma Pessoa Bem humorada!

Props:

Podemos também utilizar props para adicionar propriedades de componentes.

As props são como argumentos de funções, e você pode enviá-las para os componentes como atributos:

class Pessoa extends React.Component {
    render(){
        return <h1>Olá, eu sou uma Pessoa {this.props.humor}</h1>;
    }
}

ReactDOM.render(<Pessoa humor="Bem humorada!"/>, document.getElementById('root'));

E com isso, obtemos o nosso resultado:

Olá, eu sou uma Pessoa Bem humorada!

Gostou deste artigo? Comente abaixo!

Referências:

Novidades Vue v3.0.0 “One Piece”

O Vue.js está lançando a versão 3.0.0 denominada One Piece. Esta versão fornece um desempenho aprimorado, menor tamanho de pacotes, uma melhor integração do TypeScript e novas APIs para lidar com casos de uso em uma grande escala, com base sólida para iterações futuras de longo prazo do framework.

O 3.0 representa mais de 2 anos de desenvolvimento. o Vue é um projeto criado para a comunidade e sustentado pela mesma. Tem uma missão de ser simples, acessível para que qualquer pessoa possa aprendê-la rapidamente. Conforme o crescimento da base de usuários, a estrutura também cresceu em escopo, adaptando-se às demandas crescentes, evoluindo para o chamado “Framework Progressivo”.

Módulos internos em camadas

Na versão 3.0, a nova arquitetura oferece uma melhor capacidade de manutenção, permitindo que os usuários finais reduzam a metade do tamanho do tempo de execução.

  • O compilador suporta transformações AST personalizadas;
  • O runtime principal fornece uma API de primeira classe para a criação de renderizadores personalizados, visando diferentes destinos de renderização.
  • O módulo reactivity exporta funções que fornecem acesso direto ao sistema de reatividade do Vue. Este pode ser usado como um pacote independente, emparelhando com outras soluções de modelos.

Melhorias de desempenho

O Vue 3 mostra melhorias significativas de desempenho em relação à versão 2 em termos de tamanho de pacotes. No Vue 3, foi utilizado “DOM virtual informado pelo compilador”. O compilador realiza otimizações agressivas, gerando código de função de renderização, elevando o conteúdo estático, deixando dicas de tempo de execução para tipos de vinculação, nivelando nós dinâmicos dentro de um modelo para reduzir o custo de passagem em tempo de execução.

Integração aprimorada de TypeScript

O código base do Vue v3.0.0 é escrito em TypeScript, com as definições de tipo testadas e agrupadas automaticamente, para que deste forma, estejam sempre atualizadas. A API de composição funciona muito bem com inferências desse tipo.

Próximos passos:

As próximas implementações e mudanças serão:

  • Compilação de migração;
  • Suporte IE11;
  • Integração de roteador e Vuex em novos devtools;
  • Outras melhorias na inferência de tipo de modelo no Vetur.

Você pode ver todas as novidades no github do VueJS!

Gostou desta notícia? Comente abaixo!

Referências: https://github.com/vuejs/vue-next/releases/tag/v3.0.0

Exercício fácil: Recursão em Arrays

A recursão é uma metodologia de resolução de problemas que consiste em dividir o problema maior em subproblemas menores, até chegar em um problema pequeno o suficiente para que ele seja resolvido de forma trivial. Uma função recursiva chama a si mesma para resolver o problema proposto. As funções recursivas são soluções inteligentes e elegantes para problemas complexos. As funções recursivas devem ter um caso básico, devem mudar o seu estado e se aproximar do caso básico e devem chamar a si mesmas (recursivamente).

Fonte: https://panda.ime.usp.br/pensepy/static/pensepy/12-Recursao/recursionsimple-ptbr.html

Exercício:

No nosso exercício, teremos um caso base que deverá informar à nossa função que ela não precisará mais ser chamada. Isto significa que é um caso simples em que o valor de retorno já será conhecido. Também haverá uma chamada recursiva que executará a função com diferentes argumentos.

Você deverá criar uma função chamada contarDecrescente. Essa nossa função recursiva deverá receber um parâmetro (n). Caso esse parâmetro seja um número menor que 1, deverá retornar um array vazio. Caso atenda o requisito, crie uma constante chamada arrayDecrescente que recebe a função recursiva. Por exemplo, se o valor indicado no parâmetro for 5, o array retornado será: [5, 4, 3, 2, 1].

Não utilize laços de repetição para realizar este exercício.

Faça o download da solução aqui:

[download id=”4050″]

Versão React v17.0: Atualização sem novos recursos

Depois do silêncio, o React anunciou o primeiro candidato a lançamento do React v17. O que chama a atenção neste lançamento é a parte considerada como central de qualquer lançamento relacionado ao desenvolvimento: Os novos recursos! Na versão 17, não há novos recursos, mas sim uma ideia de facilitar o processo de migração de uma versão anterior para uma nova. Os desenvolvedores poderão atualizar os seus aplicativos gradualmente ou de uma vez, pois as novas alterações introduzidas nos mecanismos de delegação de eventos permitem a coexistência de diferentes versões de React na mesma aplicação. Ou seja, o foco principal é a atualização do próprio React!

Updates graduais:

Algumas mudanças de API, como descontinuar uma API legado, são impossíveis de fazer de forma automatizada. Mesmo sendo pouco utilizadas, ainda há suporte para elas no React. O React 17 vem com a permissão de atualizações graduais, embora seja possível usar duas versões do React, isso causava problemas com eventos. Mas no React 17 em diantes, você terá mais opções, como atualizar todo o aplicativo de uma vez, mas também tendo a opção de atualizar seu aplicativo por partes.

Isso não quer dizer que será necessário fazer atualizações graduais do sistema. Para a maioria, atualizar tudo de uma só vez é a melhor ideia. Carregar duas versões do React não e a melhor solução. Para que possam ocorrer essas atualizações graduais, terá mudanças no sistema de eventos do React,

Mudanças de Eventos:

Nos componentes React, você geralmente escrevia os manipuladores de eventos embutidos:

<button onClick={eventoClick}>

E o seu equivalente no JavaScript seria:

meuBotao.addEventListener("click", eventoClick);

Para a maioria dos eventos, o React não anexa aos Nodes do DOM em que você declara. Em vez disso, anexa um manipulador de evento direto no nó document. Isso é chamado de delegação de evento.

Quando um evento DOM é disparado no documento, o React descobre qual componente deve ser chamado e “borbulha” para cima através de seus componentes.

Se você tiver várias versões do React na página, elas registram manipuladores de eventos na parte superior. Isso gera uma quebra e.stopPropagation(). Mesmo sendo interrompida a propagação de evento, a árvore externa ainda o receberia. É por isso que será alterada no React 17: Não haverá anexo de manipuladores de eventos no nível document. Então, ele os anexará ao contêiner DOM no qual o React é renderizado:

const noRoot = document.getElementById('root');
ReactDOM.render(<App />, noRoot);

Você pode conferir mais detalhes da atualização diretamente no site do React.

Gostou desta notícia? Comente abaixo!

Referências:

Uma nova fase para o Angular

Com as constantes evoluções do framework, equipe e forte conexão com a comunidade angular, o projeto pretende compartilhar mais sobre o trabalho e futuros projetos considerados. Será adicionada uma página no angular.io com o roadmap, que será mantida em andamento pelo menos trimestralmente.

E o que é o roadmap?

O Angular recebe uma grande variedade de solicitações de recursos, tanto de dentro do Google quanto da comunidade. A lista de projetos contém tarefas de manutenção, refatoração de código, melhorias de desempenho e outras melhorias. Eles reúnem representantes de relações com desenvolvedores, gerenciamento de produtos e engenharia para priorizar a lista. Conforme novos projetos entram na fila, ocorre um posicionamento com base na prioridade relativa de outros projetos. Você pode verificar neste link quais são os projetos que serão lançados em atualizações futuras.

O Roadmap:

Você pode encontrar os projetos do backlog que já estão em andamento e também os que trabalharemos em breve.Os trabalhos serão executados conforme a lista de prioridades. Para maior transparência, foram inclusos trabalhos que afetam o próprio desenvolvimento do angular e projetos que se aplicam apenas ao desenvolvimento interno do Google.

O documento foi dividido em duas seções que representam todos os projetos em andamento em uma seção e, na outra, os projetos futuros. Você pode esperar que o trabalho chegue em versões futuras, dependendo de quando forem concluídos e de seu impacto na API pública do Angular. Como o projeto segue um controle de versão semântico, os novos recursos chegarão em versões menores ou maiores e com alterações que podem ser incompatíveis com versões anteriores na versão principal.

O que é controle de versão semântico?

Com a curva de crescimento de um software, novas dependências, novos pacotes irão ser integrados ao software. Se as especificações das dependências forem rígidas, pode ocorrer o bloqueio de versão. Se forem especificadas vagamente, você terá uma promiscuidade da versão. Como solução, cria-se um conjunto de regras e requisitos que ditam como os números de versões são atribuídos e incrementados. Para mais informações, acesse: https://semver.org/

Gostou desta notícia? Comente abaixo!

Referências:

O método Call

Neste artigo falaremos mais sobre o método call() que nos permite reaproveitar métodos em contextos (this) diferentes. No artigo tentarei explicar as coisas com a menor complexidade possível e resumirei alguns itens, então para aquele que sabem bem JavaScript por favor calma ai… rsrsrsr

Primeiro vamos entender mais sobre a chamada em si. É importante saber que ela:

  • É nativa, não precisa chamar biblioteca, framework, etc…
  • É um método das funções. Sim, se você ainda não sabia as funções são um tipo de dado que possui métodos/funções próprias;
    • Se ficou confuso, aguarde o exemplo.
  • Recebe um parâmetro que informa o seu contexto onde estarão os dados a executar;
    • Nesse caso contexto é uma função, objeto ou até o window se você estiver procurando pelo em ovo.
  • Pode receber mais parâmetros depois do this. Estes parâmetros se referem qualquer outro valor que você queira enviar para a função;

Note que eu estou usando as palavras função e método de forma alternada. Isso é porque eles são a mesma e tem mais diferença entre function e arrow function do que eles. 🙂

Exemplo básico

// Se chamar essa função do jeito que está aqui, vai exibir undefined pois this.umLocal não tem um valor atribuido a ele.
function ola(){
    console.log(`Olá ${this.umLocal}`);
}

// Agora vamos criar um objeto mais simples possível com a variavel umLocal
const teste = {
    umLocal : "MundoJS"
}

//Lembra quando eu disse que o call é um método das funções? Olhá só…
ola.call(teste);

Se você executar o código acima verá que ele exibirá Olá MundoJS no console. Vejamos o que aconteceu então:

  1. Criamos uma função chamada ola().
  2. Essa função exibe algo no console e chama o this.umLocal
  3. Sem fazer a chamada call() a função olha dentro de seu contexto (o this dela), não acha nada e exibe a mesma coisa
  4. Criamos um objeto com uma variável.
    1. Note que não precisamos dizer que é no contexto do objeto, mas está lá
  5. Invocamos o método call() da função ola passando o “teste” como novo contexto.
  6. Ao tentar executar a função, desta vez ela olha no teste e encontra a variável para usá-la no console.log()

Vejamos então mais alguns exemplos

1 – Passando os parâmetros da função:

// Desta vez ola recebe um parâmetro chamado saudacao
function ola(saudacao){
// aviso: se colocar this.saudacao ele não vai achar no call()…
// a explicação do porque sai bastante do artigo, mas se você entender bem de “this” e functions já deve ter se ligado. Caso queira saber mais, prende um comentário pedindo um tutorial sobre this
    console.log(`${saudacao} ${this.umLocal}`);
}

const teste = {
    umLocal : "Universo"
}
// O primeirpo parâmetro do call sempre é o “this”, depois disso você pode chamar todos os parâmetros da própria função.
ola.call(teste, "Olá");

2 – Usando métodos de Arrays em objetos que são listas mas não vetores.

Com o ES6 vieram diversos métodos muito uteis como o filter, forEach,reduce, etc… dai você tenta usar ele em uma lista que não é um vetor/array [] e não da certo pois eles não possuem isso.

// Erro pois é um HTMLCollection
document.getElementsByTagName("p").forEach(x => console.log(x));

// Vamos criar um objeto parecido com um vetor
let arrayLike = {
  0: "Olá",
  1: "MundoJS",
  length: 2
};

// e uma função para ser chamada no reduce()
function juntar(acc, cur){
    acc = `${acc} ${cur}`;
}

// Erro
// Motivo: O seu objeto parece um array (possui indices e length) mas não é um vetor e por isso não tem o método reduce nele
arrayLike.reduce(juntar);

// Agora se chamarmos o reduce e passarmos forçarmos ele a aceitar nosso objeto como o contextosArray.prototype.reduce.call(arrayLike, juntar);

Isso ai então pessoal, espero que o artigo ajude a matar algumas duvidas sobre o call e qualquer coisa perguntem aqui nos cometários. Até mais.

Exercício fácil: Parâmetros em Arrow Function

Explicação:

Uma Arrow Function é uma expressão de função. Foi introduzida no ES6 (que trouxe novas features, incluindo essa nova forma de criar funções, utilizando o =>)

Uma Arrow Function possui uma sintaxe curta e possuem alguns benefícios, por exemplo:

  • O this é definido à partir das funções onde foram definidas, tornando desnecessário o bind();
  • São menos verbosas que as maneiras anteriores de expressar funções.

As Arrow Functions não podem ser usadas como funções construtoras, pois não se pode aplicar o operador new a elas.

Vamos ao Exercício:

Exercício 1:

Declare uma função comum, utilizando uma declaração ou expressão de função. Essa nossa função deverá possuir dois parâmetros (name, lastName). A nossa função deve mostrar no console a seguinte frase: “Olá name lastName, eu sou uma função!”.

Realizada esta parte do exercício, você deverá:

Replicar o exercício anterior, utilizando Arrow Function. Utilize os mesmos parâmetros e retorne no console a mesma frase.

Exercício 2:

Agora, no exercício dois, criaremos uma função chamada descobreDiametro, onde receberemos um parâmetro chamado raio e um parâmetro chamado diametro. Dentro da função, retornaremos o resultado do seu diâmetro.

Realizada a primeira parte do exercício, replique o exercício 2 utilizando Arrow Function.

Não esqueça de mostrar o resultado no console!

Gostou deste exercício? Comente os seus resultados abaixo!