DEV Community: Songs

Expandir, cópia, merge e rest em Javascript

Songs — Wed, 18 Dec 2024 01:39:38 +0000

Olá pessoal aqui vai alguns exemplos simples de operações como cópia, expandir, merge e rest com objetos e arrays

expandindo array:

const arr1 = [1, 2, 3];
console.log(arr1); // [1 2 3]
const arr2 = [...arr1, 4, 5, 6];
console.log(...arr2); // [1 2 3 4 5 6]

expandindo objeto:

const obj1 = { a: 1, b: 2, c: 3 };
console.log(obj1); // { a: 1, b: 2, c: 3 }
const obj2 = { ...obj1, d: 4, e: 5, f: 6 };
console.log(obj2); // { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }

fazendo cópia de array:

const obj1 = { a: 1, b: 2, c: 3 };
console.log(obj1); // { a: 1, b: 2, c: 3 }
const obj2 = { ...obj1, d: 4, e: 5, f: 6 };
console.log(obj2); // { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }

obs:Mesmo que arr1 e arr2 tenham o mesmo conteúdo ([1, 2, 3]), eles são arrays diferentes e, portanto, têm referências de memória diferentes. Ou seja, arr1 e arr2 não apontam para o mesmo local na memória. Por isso retorna false indicando que eles não são iguais

fazendo cópia de objeto:

const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { ...obj1 };
console.log("obj2", obj2); // { a: 1, b: 2, c: 3 }
console.log("obj1==obj2", obj1==obj2); // false

merge de arrays:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]

merge de objetos:

const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { d: 4, e: 5, f: 6 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); //{a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}

operador rest (resto):

let p = {
name: 'John',
age: 30,
city: 'New York',
country: 'USA'
};
let { name, age, ...restoDoObjeto } = p;
console.log(name, age);
console.log("restoDoObjeto: ", restoDoObjeto); //resposta: John 30
//restoDoObjeto:  { city: 'New York', country: 'USA' }

obs: quase o oposto do spread, é usado para extrair propriedades de um objeto e para coletar as propriedades restantes em um novo objeto

Desestruturação em Javascript

Songs — Wed, 18 Dec 2024 01:34:46 +0000

Olá pessoal, aqui vai alguns exemplos e exercícios simples de alguns tipos de desestruturação, espero que ajude

desestruturação aninhada:

const person = {
    name: 'John',  // Propriedade 'name' de valor 'John'
    address: {     // Propriedade 'address' que é um objeto com outras propriedades
        city: 'New York',    // Propriedade 'city' dentro de 'address'
        country: 'USA'      // Propriedade 'country' dentro de 'address'
    }
};
// Desestruturação aninhada: extraindo 'name' e, dentro de 'address', extraindo 'city' e 'country'
let {
    name,                  // Extrai o valor de 'name' diretamente do objeto 'person'
    address: { city, country }  // Dentro de 'address', extrai 'city' e 'country'
} = person;  // O objeto 'person' é a fonte da desestruturação


// Exibindo os valores extraídos no console
console.log(name, city, country);  // Isso vai imprimir 'John New York USA'

desestruturação de um array (extrair valores de arrays e armazenar em variáveis):

const number = [1,2,3];
let [a,b,c] = number;
console.log(a,b,c);

Exercício: Criar uma função que recebe uma data no formato dd/mm/yyyy e retorna um array comos valores separados. Utilize a função split para separar a string em um array:

let date = "11/05/2005";
let separar =  date.split("/");
console.log(separar);

Criar uma função que recebe uma data no formato dd/mm/yyyy e retorna um array comos valores separados:

let date = "11/05/2005";


function splitDate(date) {
return date.split('/');
}
console.log(splitDate(date));

outra maneira:

// Função que divide a string de data no formato 'dd/mm/yyyy' e retorna um array
function splitDate(dateString) {
    return dateString.split('/'); // Usa o método split para separar a data por '/'
}
// Usando a função splitDate para desestruturar os valores de dia, mês e ano
let [day, month, year] = splitDate('20/05/2024');
// Exibindo os valores no console
console.log(day, month, year);  // Isso vai imprimir: 20 05 2024

desestruturação de parâmetros de função:

// Definindo a função 'printPerson1' que usa desestruturação no parâmetro
function printPerson1({ name, age, city }) {
    // A função recebe um objeto e extrai as propriedades 'name', 'age' e 'city'
    // Usando console.log para exibir as variáveis 'name', 'age' e 'city'
    console.log(name, age, city); // Imprime os valores dessas propriedades
}


// Criando o objeto 'person' com as propriedades 'name', 'age' e 'city'
const person = {
    name: 'John',    // Nome da pessoa
    age: 30,         // Idade da pessoa
    city: 'New York' // Cidade da pessoa
};


// Chamando a função 'printPerson1' e passando o objeto 'person' como argumento
// O objeto 'person' será desestruturado na função para acessar 'name', 'age' e 'city'
printPerson1(person); // Ao chamar, imprime 'John 30 New York' no console

mesma coisa só que uma maneira diferente de fazer:

function printPerson2({ name: n, age: a, city: c }) {
console.log(n, a, c);
}
const person = {
name: 'John',
age: 30,
city: 'New York'
};
printPerson2(person);

esse é desestruturação de array ao invés de objeto:

function printPerson3([ name, age, city ]) {
console.log(name, age, city);
}
const person = ['Jooaca',30,'New York'];
printPerson3(person);

Laços de repetição em Javascript

Songs — Wed, 18 Dec 2024 01:29:53 +0000

Olá pessoal, aqui são alguns exercícios e exemplos com laços de repetição que estão me ajudando a praticar:

laço de repetição (while):

/ Criação de um array com 10 elementos numéricos
let v = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];


// Inicialização da variável 'i' com valor 0, que será usada para acessar os índices do array
let i = 0;


// Imprime no console a mensagem indicando o começo da iteração usando o laço 'while'
console.log('while: ');


// Laço 'while' que irá continuar enquanto 'i' for menor que o comprimento do array 'v'
i = 0;  // Garante que a variável 'i' comece de 0 a cada vez que o código for executado


// A condição 'i < v.length' garante que o laço seja executado até que 'i' seja igual a 10
while (i < v.length) {
    // No corpo do laço, imprime o índice 'i' e o valor correspondente do array 'v[i]'
    console.log(`v[${i}]=`, v[i]);  // O valor de 'i' será interpolado dentro da string para exibir o índice


    // A linha abaixo incrementa 'i' em 1, movendo para o próximo índice do array
    i++;  // Isso é essencial para garantir que o laço termine após percorrer todos os índices do array
}

mesma coisa só que com o laço for:

// Criação de um array com 10 elementos numéricos
let v = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];


console.log('for: ');
for (i = 0; i < v.length; i++) {
console.log(`v[${i}]=`, v[i]); // 'v[' + i + ']'
}

mesma coisa só que com o laço do while:

// Criação de um array com 10 elementos numéricos
let v = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];


console.log('do while: ');
i = 0;
do {
console.log(`v[${i}]=`, v[i]); // 'v[' + i + ']'
} while (++i < v.length);

mesma coisa só que com o laço for let of:

// Criação de um array com 10 elementos numéricos
let v = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];


console.log('for let of: ');
for (let valor of v) {
console.log(`v[]=`, valor);
}

mesma coisa só que com o laço for let in:

// Criação de um array com 10 elementos numéricos
let v = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];


console.log('for let in: ');
for (let i in v) {
console.log(`v[${i}]=`, v[i]);
}

mesma coisa só que com o laço for let each:

// Criação de um array com 10 elementos numéricos
let v = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];


v.forEach((v, i) => {
    console.log(`v[${i}]=`, v);
    });

Functions em Javascript

Songs — Wed, 18 Dec 2024 01:25:10 +0000

Alguns exemplos de funções SIMPLES que me ajudaram a praticar:

funcão exemplo 1:

n1 = 6;
n2 = 5;

function somar (n1,n2){
    return n1+n2;
}


console.log(somar(n1,n2));

função exemplo 2:

var cliente = {
    nome: "Joao da Silva",
    telefone:"08 99999990",
    idade: 19,
    cidade: "São Paulo"
};


function imprimir(i){
    console.log("Nome: "+i.nome);
    console.log("Telefone: "+i.telefone);
    console.log("Idade: ",i.idade);
    console.log("Cidade"+i.cidade);
}


console.log(cliente);

exemplos aleatórios:

function modificarObjeto(o) {
    if (o != null && typeof o == "object") { // Verifica se 'o' não é nulo e se é um objeto
        o.email = "jose@miranda.com"; // Adiciona ou atualiza a propriedade 'email' do objeto
        if (o.hasOwnProperty('idade')) { // Verifica se o objeto tem a propriedade 'idade'
            o.idade = 52; // Se a propriedade 'idade' existir, atualiza o valor para 52
        }
    }
}

mais exemplos:

function modificarArray(a) {
    if (Array.isArray(a)) // Verifica se 'a' é um array
        a.push(1000, 2000, 3000); // Adiciona os valores 1000, 2000 e 3000 ao final do array
}

mais exemplos:

let numeros = [1 ,2 ,3];


console.log("Antes de chamar a função: ", numeros);


function modificarArray(numeros) {
    if (Array.isArray(numeros)) // Verifica se 'a' é um array
        numeros.push(1000, 2000, 3000); // Adiciona os valores 1000, 2000 e 3000 ao final do array
}


modificarArray(numeros);


console.log("Depois de chamar a função: ",numeros);

funções anônimas (Funções anônimas são funções sem nome, usadas para tarefas rápidas, como atribuição a variáveis):

multiplicar = function (n1,n2){
    return n1*n2
};


console.log("Resultado da multiplicacao = ",multiplicar(100,2));

funções mais complexas:

// Função que calcula o quadrado de um número
function quadrado(n) {
    return n * n; // Retorna o quadrado de n
}
// Função que calcula o cubo de um número
function cubo(n) {
    return n * n * n; // Retorna o cubo de n
}
// Função para mapear (aplicar) uma operação em todos os elementos de um array
let mapearElementos = function(a, f) {
    if (Array.isArray(a)) { // Verifica se 'a' é um array
        for (let i = 0; i < a.length; i++) { // Itera sobre os elementos do array
            a[i] = f(a[i]); // Aplica a função 'f' em cada elemento de 'a'
        }
    }
    return a; // Retorna o array modificado
};


// Array de números de 1 a 5
let v = [1, 2, 3, 4, 5];


// Usando mapearElementos para aplicar o quadrado a cada elemento
console.log("Array ao quadrado:", mapearElementos(v, quadrado));


// Usando mapearElementos para aplicar o cubo a cada elemento
console.log("Array ao cubo:", mapearElementos(v, cubo));

arrow function ou função flecha:

let pessoa = {
    id: 1,
    nome: 'Joao',
    idade: 19
};


let imprimir = (o) => {
    console.log();
    console.log('ID: ' + o.id);    // Imprime o valor da propriedade 'id' do objeto
    console.log('Nome: ' + o.nome); // Imprime o valor da propriedade 'nome' do objeto
    console.log('Idade: ' + o.idade); // Imprime o valor da propriedade 'idade' do objeto
    console.log();
};


console.log(pessoa);

obs: (não muda nada dos outros exemplos só que é uma flecha)

Objetos literais no Javascript

Songs — Wed, 11 Dec 2024 13:20:37 +0000

Olá pessoal espero que estejam bem, aqui vai mais algumas coisas que aprendi:

objetos literais:

var cliente = {
    nome: "Joao da Silva",
    telefone:"69 999999990",
    idade: 29,
    cidade: "Sao Paulo"
};

console.log(cliente);

outra maneira:

var cliente = {
    nome: "Joao da Silva",
    telefone:"69 999999990",
    idade: 29,
    cidade: "Sao Paulo"
};


console.log("nome: "+cliente.nome);
console.log("telefone: "+cliente.telefone);
console.log("idade: "+cliente.idade);
console.log("cidade: "+cliente.cidade);

outra forma:

var cliente = {
    nome: "Joao da Silva",
    telefone:"69 999999990",
    idade: 29,
    cidade: "Sao Paulo"
};


console.log("Outra forma de acessar as propriedades");
console.log("nome: "+cliente["nome"]);
console.log("telefone: "+cliente["telefone"]);
console.log("idade: "+cliente["idade"]);
console.log("cidade: "+cliente["cidade"]);

outra forma:

// Definindo um array chamado 'clientes' contendo objetos, onde cada objeto possui 'nome' e 'cidade' como propriedades
var clientes = [
    {nome: "Joao", cidade:"São Paulo"}, // Cliente 1: João que mora em São Paulo
    {nome: "Eduardo", cidade:"Vitória"}, // Cliente 2: Eduardo que mora em Vitória
    {nome: "Antonio", cidade:"São José do Rio Preto"} // Cliente 3: Antonio que mora em São José do Rio Preto
];


// Exibindo as informações do primeiro cliente (João) no console: nome seguido da cidade
console.log(clientes[0].nome + "-"+clientes[0].cidade);


// Exibindo as informações do segundo cliente (Eduardo) no console: nome seguido da cidade
console.log(clientes[1].nome + "-"+clientes[1].cidade);


// Exibindo as informações do terceiro cliente (Antonio) no console: nome seguido da cidade
console.log(clientes[2].nome + "-"+clientes[2].cidade);

isso retorna: Joao-São Paulo
Eduardo-Vitória
Antonio-são Jose do Rio Preto

Operações simples com números e arrays em Javascript

Songs — Wed, 11 Dec 2024 13:14:20 +0000

Olá pessoal, aqui vai algumas coisas que aprendi com números e arrays:
obs: para começar no vscode crie uma pasta no computador, abra o vscode vá em "Open folder" abra sua pasta crie um novo arquivo com "New file" e nomeie com .js no final "Exemplo.js" e para executar seu código abra um New terminal e digite Exemplo.js

soma:

let x = 6;
let y = 5;
x+=y;
console.log(x);

subtração:

let x = 6;
let y = 5;
x-=y;
console.log(x);

multiplicação:

let x = 6;
let y = 5;
x*=y;
console.log(x);

divisão:

let x = 6;
let y = 5;
x/=y;
console.log(x);

incrementar:

let x = 10;
x++;
console.log(x);

decrementar:

let x = 10;
x--;
console.log(x);

verificando:

let x = 11;
let y = 5;


console.log(x<y);
console.log(x>y);
console.log(x==y); //verifica se o valor de x é igual o de y
console.log(x===y); //verifica se o valor E O TIPO de x é igual ao y
console.log(x!=y); //verifica se o valor de x é diferente o de y
console.log(x!==y); //verifica se o valor E O TIPO de x é diferente ao y
//nesse último caso Como os valores já são diferentes (11 ≠ 5),
//a comparação retorna true imediatamente, sem necessidade de verificar o tipo.

condicionais:

let x = 11;

if (x>5) {
    console.log("X é maior que 5");
} else{
    console.log("X é menor que 5");
}

retornar cada elemento do array:

var computador = ["memoria", "disco", "placa mae", "processador"];
console.log(computador);
console.log(computador[0]);
console.log(computador[1]);
console.log(computador[2]);
console.log(computador[3]);

mostrar o tamanho do array:

var computador = ["memoria", "disco", "placa mae", "processador"];
console.log("Quantidade de elementos: ",computador.length);

usando o push:

var v = [];
v.push(10);
v.push(20);
v.push(30);
v.push(40);
v.push(50);
console.log(v);
//adiciona esses números ao array com push

usando o pop:

var v = [];
v.push(10);
v.push(20);
v.push(30);
v.push(40);
v.push(50);
console.log(v);

console.log('pop', v.pop(), v); //elimina o elemento 50
console.log('pop', v.pop(), v); //elimina o elemento 40
console.log('pop', v.pop(), v); //elimina o elemento 30
console.log('pop', v.pop(), v); //elimina o elemento 20
console.log('pop', v.pop(), v); //elimina o elemento 10

//pop sempre eliminará primeiro o último e seguindo a partir dele

Javascript básico usando VSCode

Songs — Wed, 11 Dec 2024 13:04:07 +0000

Olá pessoal, comecei estudar javascript e separei algumas coisas que consegui fazer:

let school = "Javascript School";
let fullPackage = "JS Pro";
let projects = 4;
let awesome = false;


console.log(school, fullPackage, projects, awesome);

esse abaixo serve para mostrar os tipos:

let nome;
nome = "Eva"
console.log(typeof(nome)); // 'string'
nome = 123
console.log(typeof(nome)); // 'number'
nome = {}
console.log(typeof(nome)); // 'object'

tamanho da string:

let s1 = "Melancia";
console.log("Length de s1 = " + s1.length);

acessando cada caractere:

let s1 = "Abacaxi";
console.log(s1[0], s1[1], s1[2], s1[3], s1[4], s1[5], s1[6]);

colocar tudo em letra maiúscula:

let s1 = "Melancia";
console.log(s1.toUpperCase());

remover espaços no início da string:

let s1 = "      Melancia";
console.log(s1.trimStart());

substituir a palavra:

let s1 = "Melancia";
console.log(s1.replace("Melancia", "Melão"));

dividir strings em substrings:

let s1 = "Melancia é incrível";
console.log(s1.split(" "));

colocar traços nos espaços:

let s1 = "Melancia é incrível";
console.log(s1.split(" ").join("-"));

Verificar se a frase contém algo:

let s1 = "Melancia é incrível";
console.log(s1.includes("Mel"));

É isso gente, eu sei que é simples mas achei legal essa manipulação de strings :)