Tag: For

Publicado em

Tornando o código mais rápido usando Sets JavaScript

Muitos desenvolvedores limitam-se a utilização de objetos globais básicos, como strings, objetos, números, arrays e booleanos. Na maioria das vezes, isso realmente é tudo que você precisa mas, para tornar o código mais eficiente, nem sempre isso é todo o necessário.

Para isso, existem os Sets JavaScript, que tornam o seu código mais rápido a medida que ele é escalonado. O uso de sets traz resultados que seriam impossíveis de obter somente com arrays.

E como os sets são diferentes?

Bom, os arrays são coleções de dados indexados, ou seja, cada valor dos dados em um array é ordenado por um índice. Por exemplo:

let mainArray = [a, b, c, d];
console.log(mainArray.indexOf(a));
// 0
console.log(mainArray.indexOf(c));
// 2

Já os Sets são coleções codificadas. Não usam índices, mas ordenam os seus dados utilizando chaves. Seus elementos são iteráveis na ordem de inserção e não podem conter dados duplicados, ou seja, cada conjunto de dados deve ser único.

E quais são os benefícios?

  • Utilizar métodos como indexOf() ou includes() para verificar a existência de um elemento em um array é muito lento;
  • Nos Sets, você pode excluir o elemento pelo seu valor. Em um array, você pode utilizar o splice com base no índice do elemento, tornando-o lento pela dependência de índices;
  • É mais rápido adicionar elementos aos Sets do que adicionar elementos em um array utilizando metodos como push() ou unshift();
  • Um Set pode armazenar NaN;
  • Sets armazenam apenas valores únicos. Se você não pode trabalhar com duplicatas, esta é uma vantagem.

O quão mais rápido são os Sets?

Os métodos que o array utiliza possuem uma complexidade de tempo linear de O (N), ou seja, o tempo de execução necessário aumenta conforme aumenta o tamanho dos dados. Mas métodos que utilizam Sets para manipulações como inserção, exclusão e pesquisa possuem uma complexidade de tempo  O (1), e isso significa que o tempo de execução não varia, pois o tamanho dos dados não influencia no tempo de execução dos métodos.

Teste:

Realizando um teste, vamos criar um array e um set com um milhão de entradas cada:

let newArray = [], newSet = new Set(), n = 1000000;

for (let i = 0; i < n; i++){
    newArray.push(i);
    newSet.add(i);
}

Agora, pesquisaremos o número 425123 no array e no set:

let result; 
console.time('Array');
result = newArray.indexOf(425123) !== -1;
console.timeEnd('Array');

console.time('Set');
result = newSet.has(425123);
console.timeEnd('Set');

E a saída foi:

// Array: 1.201ms
// Set: 0.029ms

Gostaram deste artigo? Comente abaixo!

Referência: https://medium.com/@bretcameron/how-to-make-your-code-faster-using-javascript-sets-b432457a4a77

Publicado em

Como quebrar um vetor grande em vários menores

Neste artigo veremos duas funções que leem um vetor e devolvem um outro dividido em pedaços menores. O exemplo será bem simples pois a aplicação é a mesma para 5 o para 5 bilhões de registros. 

A primeira função será genérica e você provavelmente poderá utilizá-la em outras linguagens com pouca ou nenhuma adaptação. Já a segunda é utilizando mais das funções do JavaScript para reduzir o código

Em resumo queremos que um vetor linear seja quebrado em vários pequenos vetores. No meu caso, eu precisava que uma lista de contatos fosse quebrada em diversas listas menores para facilitar o controle e atualização das mesmas.

Iremos de algo assim:

let vetor = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];

Para algo assim:

let vetor = [[0, 1, 2], 
             [3, 4, 5], 
             [6, 7, 8], 
             [9, 10, 11], 
             [12, 13, 14], 
             [15, 16]];

Como podemos fazer isso? Bom, a primeira forma é a seguinte:

Algoritmo Genérico

  1. Criar a função e inicializar as variáveis. Observe que novoVetor é um vetor com um vetor vazio dentro dele. 
    function converterVetor(vetor, tamanho) {
    let novoVetor = [[]];
    let novoIndice = 0;
    let novoIndiceSub = 0;
}
  2. Criar um laço FOR para adicionar os elementos no novoVetor. Observe que:
    1. Precisamos de um IF para testar a hora de avançar de um sub-vetor para outro.
    2. Dentro deste IF é necessário criar um vetor em branco para que o Javascript saiba o tipo do dado.
    3. No final, você está adicionando o valor dentro de um vetor que está dentro de outro vetor, então é preciso usar [x][y] para adicionar na posição correta.
    for(let indice = 0; indice < vetor.length; indice++){

    if(indice % tamanho == 0 && indice != 0){
        novoIndice++;
        novoVetor[novoIndice] = [];
        novoIndiceSub = 0;
    }

    novoVetor[novoIndice][novoIndiceSub] = vetor[indice];
    novoIndiceSub++;
}
  3. Por ultimo, basta retornar o resultado. Veja abaixo o código completo. 
    function converterVetor(vetor, tamanho) {
    let novoVetor = [[]];
    let novoIndice = 0;
    let novoIndiceSub = 0;


    for (let indice = 0; indice < vetor.length; indice++) {

        if (indice % tamanho == 0 && indice != 0) {
            novoIndice++;
            novoVetor[novoIndice] = [];
            novoIndiceSub = 0;
        }

        novoVetor[novoIndice][novoIndiceSub] = vetor[indice];
        novoIndiceSub++;
    }

    return novoVetor;
}

Usando mais recursos JavaScript

Agora vejamos a mesma função, mas usando mais recursos JavaScript para reduzir um pouco o trabalho.

  1. Iniciaremos de forma muito parecida, mas precisaremos de uma variável a menos 
    function converterVetor2(vetor, tamanho) {
    let index = 0;
    let novoVetor = [];
}
  2. Agora faremos o loop for, mas ao invés de percorremos o loop original de 1 em 1, percorreremos o tamanho que já queremos colocar no sub-vetor.
    1. Dentro do loop, usaremos a função slice() que nos retornará um pedaço do vetor. Sendo ele o tamanho exato do sub-vetor.
    2. Após, adicionamos o subVetor ao novo com o método push() que adiciona um elemento na ultima posição.
    for (index = 0; index < vetor.length; index += tamanho) {
    let subVetor = vetor.slice(index, index + tamanho);
    novoVetor.push(subVetor);
}
  3. Pronto!! Basta retornar o objeto com o resultado. Segue abaixo o código completo. 
    function converterVetor2(vetor, tamanho) {
    let index = 0;
    let novoVetor = [];

    for (index = 0; index < vetor.length; index += tamanho) {
        let subVetor = vetor.slice(index, index + tamanho);
        novoVetor.push(subVetor);
    }

    return novoVetor;
}

Conclusão

Como você pode ver, o segundo formato é um pouco menos detalhado, mas utilizando os recursos do JavaScript é possível escrever menos código que ainda é fácil de entender. Por isso que, quando você estuda uma linguagem, é importante conhecer as funções nativas e formas mais inteligentes de trabalhar com seus objetos.

Publicado em

Exercício fácil: DOM – Escrita

Neste exercício, iremos utilizar os conceitos de escrita no DOM para realizar a alteração de classes em elementos HTML. Será necessário conhecimento básico em leitura do DOM, HTML e CSS.

Exercício:

No arquivo HTML, temos itens com a classe azul e itens com a classe vermelho.

Faça o seguinte:

– inverta as classes (itens com azul terão a classe vermelho e vermelho terão a classe azul).

Utilize o HTML disponível a seguir para realizar o seu exercício:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .azul{
            color: blue;
        }

        .vermelho{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="azul">Item</li>
        <li class="vermelho">Item</li>
        <li class="azul">Item</li>
        <li class="vermelho">Item</li>
        <li class="azul">Item</li>
        <li class="vermelho">Item</li>
    </ul>
</body>
</html>

Dica:

  • Use o document.querySelectorAll() para obter uma lista de elementos;
  • Você precisará percorrer os elementos utilizando um laço de repetição;
  • Utilizando uma estrutura de condicionais, verifique as classes;
  • O uso do classList será útil;
  • Realize o seu exercício em um arquivo separado scripts.js e chame-o no seu index.html.
Resolução:
let listaElementos = document.querySelectorAll("li");
        
for (let elemento of listaElementos){
    if(elemento.classList == "azul"){
        elemento.classList.remove("azul");
        elemento.classList.add("vermelho");
    }else {
        elemento.classList.remove("vermelho");
        elemento.classList.add("azul");
    }
}

Gostou deste exercício? Achou fácil ou difícil? Resolveu de outra maneira? Conte para a gente!

Publicado em

Exercício fácil: Multiplicando o Vetor

A função abaixo receberá 2 parâmetros, um vetor com apenas valores numéricos e um número.

Faça com que ela multiplique cada item do vetor pelo segundo parâmetro apenas se o item do vetor for maior que 5. Após isso, ela deve retornar o novo vetor.

Exemplo:

  • calcularVetor([1,5,10, 20], 2) retornará [2, 5, 20, 40] pois só 10 e 20 são maiores que 5.
  • calcularVetor([1,3,4, 5], 10) retornará [1, 3, 4, 5] pois nenhum é maior que 5.
  • calcularVetor([15, 20, 25, 30], 3) retornará [45, 60, 75, 90].

Utilize esta estrutura para realizar o exercício:

function calcularVetor(vetor, numero){
    //Seu código aqui
}

Continue lendo “Exercício fácil: Multiplicando o Vetor”

Publicado em

Exercício Intermediário: multiplicando em FOR aninhado.

Uma tarefa muito comum em JavaScript é percorrer o conteúdo de um vetor. Você pode utilizar o loop FOR para isso. Lembre-se de que os vetores começam com o índice em 0, o que significa que o último elemento do vetor é o comprimento -1.

Se você tem um vetor multidimensional, você pode utilizar a mesma lógica do laço for para percorrer os vetores e os sub-vetores. Este é um exemplo:

let arr = [[1,2], [3,4], [5,6]];
for (let i=0; i < arr.length; i++) {
  for (let j=0; j < arr[i].length; j++) {
    console.log(arr[i][j]);
  }
}

Este laço de repetição aninhado percorre cada sub-elemento do sub-vetor por vez. Observe que, para percorrer o loop interno, estamos verificando o comprimento de arr[i], visto que arr[i] é, em si, um vetor.

EXERCÍCIO:

Modifique a função multiplicarTudo de modo que multiplique a variável produto por cada número nos sub-vetores do array:

function multiplicarTudo(arr) {
  let produto = 1;
  // Altere o código a partir desta linha

  // Altere o código até esta linha.
  return produto;
}

// Modifique os valores para testar o seu código.
multiplicarTudo ([[1,2],[3,4],[5,6,7]]);

RESULTADOS:

  • A função multiplicarTudo([[1],[2],[3]]) deve retornar 6;
  • A função multiplicarTudo([[1,2],[3,4],[5,6,7]]) deve retornar 5040;
  • A função multiplicarTudo([[5,1],[0.2,4, 0.5],[3,9]]) deve retornar 54;
Publicado em

Exercício Fácil: Soma de itens do vetor

Neste exercício, você terá que somar os valores de um vetor até a metade de seu tamanho e colocar a soma em um índice de um novo vetor.

Faça a soma também dos valores dos itens do vetor após a metade de seu tamanho. Coloque a soma em um índice do novo vetor.

Exemplo:

let vetor = [10, 20, 30, 40, 50, 60, 70, 80, 90];

Neste exemplo, temos um vetor de tamanho 9. Sabemos que a metade de 9 é 4.5, logo, devemos pegar todos os valores contidos em cada elemento que seja menor que a metade do tamanho do vetor. Neste caso, teremos a soma dos valores 10 + 20 + 30 + 40, que resulta em: 100.

O valor obtido, 100, deverá ser inserido na primeira posição de um novo vetor, que deverá ser criado.

let novoVetor = [];

Partindo para a próxima etapa do nosso exercício, devemos realizar a soma dos valores nos elementos restantes. Para isso, você deve realizar a soma dos elementos e inserir o resultado no índice do novo vetor. A soma dos elementos deve ser 50 + 60 + 70 + 80 + 90, que resulta em: 35.

O valor obtido, 350, deverá ser inserido na segunda posição do nosso novo vetor, que foi criado anteriormente.

O seu resultado deverá ser algo parecido como:

novoVetor = [100, 350];

Utilize o console.log() para mostrar o seus resultados.

DICA:

Para chegar no resultado correto, utilize o vetor.length -1 na sua condicional.

Você pode realizar este exercício da maneira que lhe convém, mas aconselhamos a utilizar uma estrutura condicional dentro de seu loop de repetição. Mas nada impede de você utilizar suas próprias maneiras para resolução deste exercício.

Você pode realizar a nossa resolução do exercício abaixo:

let vetor = [10, 20, 30, 40, 50, 60, 70, 80, 90];

let novo = [0, 0];

for (let indice = 0; indice < vetor.length; indice++) {
           
    if (indice < ((vetor.length-1) / 2)){
        novo[0] += vetor[indice];
           
    } else {
        novo[1] += vetor[indice];
    }
            
}
console.log(novo);

Gostou deste exercício? Comente o seu resultado e tire suas dúvidas!

 

Publicado em

Exercício Fácil: Loop em Loop

Exercício 1:

Crie uma função chamada forAninhado() que receberá como parâmetro um vetor. Este vetor deve ter sub-vetores, com valores que variam entre ímpar e par. Com o laço de repetição FOR que irá percorrer este vetor com seus sub-vetores e irá buscar os valores pares. Os valores pares devem ser adicionados em um novo vetor, e você deverá retornar este novo vetor.

Com base neste vetor de exemplo:

let vetor = [[1, 2], [3,4,5,6], [7,8,9,10]]; //Vetor principal

Se colocarmos ele na função:

forAninhado(vetor);

Esperamos o retorno:

[2, 4, 6, 8, 10]; //Novo vetor com os números pares

Lembre-se:

Não use tipos diferentes de vetor, pois não conseguirá dar procedimento no seu exercício.

Com base neste outro vetor de exemplo:

let vetor = [{numero: 2}, [2,8], [1,1,6,2]];

Se colocarmos ele na função:

forAninhado(vetor);

O retorno será:

[2, 8, 6, 2]// O Objeto não será mostrado no vetor.

Também aconselhamos não utilizar somente números ímpares, pois terá em seu retorno algo como:

[]

Exercício 2:

Baseado no código do exercício anterior, some os valores dos sub-vetores e adicione somente os números pares a um novo vetor. Retorne este novo vetor apenas com os números pares.

Com base neste exemplo:

let vetor = [[4,4], [5,2], [7,3]]; //Vetor principal

Se colocarmos ele na função:

forAninhadoPares(vetor);

Esperamos o retorno:

[8, 10]; //Vetor somente com números pares

Faça download dos códigos com as respostas no link abaixo!

[download id=”2836″]

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

Publicado em

Exercício Fácil: Validando Triângulos.

Triângulos são polígonos que possuem três lados. Como qualquer outra figura geométrica, os triângulos possuem alguns elementos, que são:

  • Lados: São segmentos de reta que se encontram nas suas extremidades. Todo triângulo é uma figura geométrica que possui três lados. Os triângulos podem ser definidos de três formas diferentes.
  • Vértices: Os vértices são os pontos de encontro entre os lados.
  • Ângulos internos: Na união dos lados de um triângulo, se forma um ângulo. Os triângulos possuem três ângulos internos. Os vértices e os lados destes ângulos são, respectivamente, os vértices e os lados do triângulo.

Neste exercício, você deverá criar uma função para validar se os valores passados como parâmetro formam um triângulo equilátero, escaleno ou isósceles.

Requisitos:

Para realizar este exercício, você deverá ter conhecimento sobre:

  • Condicionais;
  • Comparadores.

Como realizar:

Crie uma função chamada validarForma(). Esta função deverá receber três parâmetros: a, b, c.

Dentro da função, utilizando condicionais e comparadores, verifique se:

  • Todos os lados são iguais, o triângulo será equilátero;
  • Se todos os lados forem diferentes, será escaleno;
  • Se nenhuma das duas condições anteriores for atendida, será isósceles.

Faça o download de uma das possíveis soluções para este exercício:

[download id=”2831″]

Gostou deste exercício? Resolveu de forma diferente? Mostre o seu resultado nos comentários!

Publicado em

Exercício Fácil: Switch

Você conhece a condicional Switch?

Ela serve para avaliar uma expressão. Combinando o valor desta expressão para a utilização de um case, as instruções associadas ao case serão executadas. O switch executa um código de acordo com diversos resultados possíveis. Ele é uma excelente alternativa para a execução de códigos com muitas comparações.

Por exemplo, podemos ter uma média escolar. Temos como dados de entrada a nota média de cada aluno. Dentro do switch, teremos vários cases (casos). Caso a nota for maior ou igual a sete, o aluno estará aprovado. Caso seja entre cinco e sete, o aluno estará em recuperação e se a nota for menor que cinco, o aluno está reprovado. Utilizando este exemplo conceitual, conseguimos aplicar na prática o uso do switch/case.

Sintaxe:

let variavel = valor;

switch (variavel) {
    case valor:
        instrução;
  break;
    default;
  instrução;
}

Onde:

  • variável: é a expressão que será avaliada;
  • valor: condição que deverá ser verificada para execução das instruções;
  • instrução: trecho de código que será executado quando a condição for especificada;
  • break: serve para encerrar a leitura do switch. Sem este comando, o código do case abaixo será executado na sequência.
  • default: executará quando nenhum case corresponder ao valor especificado.

Observação:

O switch compara valores utilizando ===. Portanto, os valores comparados devem ser do mesmo tipo de dado.

Exercício 1:

Crie uma variável chamada “fruta”. Esta variável deve receber uma string com o nome de uma fruta. Após, crie uma estrutura condicional switch que receba esta variável e que possua três casos: caso maçã, retorne no console: “Não vendemos esta fruta aqui”. Caso kiwi, retorne: “Estamos com escassez de kiwis” e caso melancia, retorne: “Aqui está, são 3 reais o quilo”. Teste com estas três opções e verifique o console do seu navegador. Crie também um default, que retornará uma mensagem de erro no console.

Exercício 2:

Um homem decidiu ir à uma revenda comprar um carro. Ele deseja comprar um carro hatch, e a revenda possui, além de carros hatch, sedans, motocicletas e caminhonetes. Utilizando uma estrutura switch/case, caso o comprador queira o hatch, retorne: “Compra efetuada com sucesso”. Nas outras opções, retorne: “Tem certeza que não prefere este modelo?”. Caso seja especificado um modelo que não está disponível, retorne no console: “Não trabalhamos com este tipo de automóvel aqui”.

Resolva estes exercícios para melhor aprendizado!

Gostou deste exercício? Mostre o seu resultado nos comentários!

Publicado em

JavaScript Básico: For

Você sabe utilizar o laço de repetição FOR em JavaScript?

O For é um dos laços de repetições que tem a função de executar uma instrução “x” determinada quantia de vezes. Com ele, podemos:

  • Percorrer listas inteiras
  • Acessar e alterar valores nestas listas
  • Descobrir o valor e índice de cada elemento contido nas listas
  • Entre outras funções.

Existem vários tipos de laços de repetição, mas eles realizam a mesma coisa: repetir uma determinada ação. Neste artigo veremos exclusivamente o laço FOR.

O laço FOR é repetido até que uma condição seja especificada. Por exemplo:

Iniciar a contagem de elementos de um vetor, começando no índice zero até o último índice (este vetor contém um total 5 índices):

let vetor = [0, 1, 2, 3, 4];
for (let indice = 0; indice <= 4; indice++){
    console.log(vetor[indice]);
}
// 1
// 2
// 3
// 4

Sintaxe:

for ([inicialização]; [condição]; [expressão final]){
    declaração;
}

Onde:

  • Inicialização: é uma expressão ou declaração de variáveis. É usada para iniciar o contador de variáveis.
  • Condição: é a expressão que será avaliada antes da iteração do loop. Se esta expressão for TRUE, a declaração será executada. É um teste de condição. Enquanto a condição for atendida, o seu código será executado.
  • Expressão final: é validada ao final de cada iteração que acontece no laço FOR. Utilizada para incrementar ou atualizar a variável. Um exemplo prático é a varredura de elementos que vimos no exemplo acima.
  • Declaração: é o trecho de código que será executado caso a condição seja verdadeira.

Exercício 1:

Crie um algoritmo usando o for que leia uma lista. Mostre no console apenas os números pares. Esta lista deve ser assim: [1, 2, 3, 4, 5, 6, 7, 8, 9];

Exercício 2:

Utilizando a lista do exercício anterior, crie um algoritmo que mostre de maneira decrescente os elementos desta lista.

Resolva estes exercícios para melhor aprendizado!

Gostou deste exercício? Mostre o seu resultado nos comentários!