Aula 7

Objeto Math

O objeto Math fornece métodos e propriedades para realizar operações matemáticas.

Propriedades do Math

Math.PI: Representa o valor de π (3.14159...).

console.log(Math.PI); 

Math.E: Base do logaritmo natural (e ~ 2.718).

console.log(Math.E);

Arredondamentos

console.log(Math.round(4.5)); 
console.log(Math.ceil(4.2)); 
console.log(Math.floor(4.8)); 

Potência e Raiz Quadrada

console.log(Math.pow(2, 3)); 
console.log(Math.sqrt(16)); 

Máximo e Mínimo

console.log(Math.max(10, 20, 30)); 
console.log(Math.min(10, 20, 30)); 

Números Aleatórios

console.log(Math.random()); 
console.log(Math.random() * 10); 

Trigonometria

console.log(Math.sin(Math.PI / 2)); // 1
console.log(Math.cos(Math.PI)); 

Array

O Array armazena coleções de elementos, como números, strings e objetos.

Criação de Arrays

Com colchetes:

const numeros = [1, 2, 3];
console.log(numeros); 

        

Com o construtor:

const letras = new Array('a', 'b', 'c');
console.log(letras); 

Adicionar/Remover Elementos (push e pop)

const frutas = ["maçã", "banana"];
frutas.push("laranja"); 
frutas.pop(); 

Ordenação (sort e reverse)

const numeros = [3, 1, 2];
numeros.sort(); 
numeros.reverse(); 

Buscar Elemento (indexOf e includes)

const frutas = ["maçã", "banana"];
console.log(frutas.indexOf("banana")); 
console.log(frutas.includes("laranja")); 

Iteração (for, for...in, for...of e forEach)

O JavaScript oferece diversas formas de iterar sobre arrays, objetos ou outros iteráveis. Aqui estão as principais: for, for...in, for...of, e forEach. Cada uma delas tem usos específicos.

for

O laço for é a forma mais básica e flexível de iterar. Ele permite controle total sobre o início, fim e incremento do laço.

Útil para iteração em arrays ou listas e controlar totalmente o índice

for (let i = 0; i < 5; i++) {
  console.log(i); 
}

        

for...in

O laço for...in é usado para iterar sobre as chaves de um objeto ou os índices de um array.

Útil para iterar sobre as propriedades de um objeto.

Não recomendado para arrays, pois pode incluir propriedades herdadas.

const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
  console.log(\`\${key}: \${obj[key]}\`);
}

        

for...of

O laço for...of é usado para iterar sobre elementos de objetos iteráveis (arrays, strings, sets, maps, etc.).

Útil para iterar diretamente sobre os valores de arrays ou strings.

const arr = ["a", "b", "c"];

for (const value of arr) {
  console.log(value); 
}

        

forEach

O método forEach é usado para iterar sobre arrays, executando uma função callback para cada elemento. É mais legível para funções simples.

const arr = [1, 2, 3];

arr.forEach((value, index) => {
  console.log(\`Index: \${index}, Value: \${value}\`);
});

        

Considerações de Uso (for, for...in, for...of e forEach)

• Use for quando precisar de controle total sobre o laço.
• Use for...in apenas para objetos. Não é recomendado para arrays.
• Use for...of para iterar sobre valores de iteráveis.
• Use forEach para operações simples em arrays, mas lembre-se de que ele não suporta break ou continue.

Transformar Arrays

O método map() cria um novo array aplicando uma função de transformação a cada elemento de um array existente, sem alterar o array original. Não altera o array original. Logo, retorna um novo array.

Estrutura: Recebe três argumentos:

• element: O elemento atual sendo processado.
• index: O índice do elemento atual.
• array: O array original.

Exemplo 1

const numbers = [1, 2, 3, 4, 5];

// Transformar cada número multiplicando por 2
const doubled = numbers.map(num => num * 2);
console.log(doubled); 

        

Exemplo 2

const names = ["Alice", "Bob", "Charlie"];

// Transformar cada nome em caixa alta
const upperCaseNames = names.map(name => name.toUpperCase());
console.log(upperCaseNames); 

        

Exemplo 3

const users = [
  { id: 1, name: "Alice", age: 25 },
  { id: 2, name: "Bob", age: 30 },
  { id: 3, name: "Charlie", age: 35 }
];

// Extraindo apenas os nomes
const userNames = users.map(user => user.name);
console.log(userNames); 

        

Exemplo 4 (Usando index)

const numbers = [10, 20, 30, 40, 50];

// Adicionar o índice ao valor de cada número
const indexedNumbers = numbers.map((num, index) => num + index);
console.log(indexedNumbers); 

        

Exemplo 5

const items = ["apple", "banana", "cherry"];

// Transformar cada item em um objeto
const itemObjects = items.map((item, index) => ({
  id: index + 1,
  name: item
}));
console.log(itemObjects);

        

Exemplo 6

const numeros = [1, 2, 3];
const dobrados = numeros.map((n) => n * 2); 
const pares = numeros.filter((n) => n % 2 === 0); 

Observação: O map() não retorna valores explicitamente.

Caso queira usar map() sem necessidade de transformar dados, prefira forEach() para casos sem retorno.

const result = [1, 2, 3].map(num => {
  num * 2; 
});
console.log(result); 

            

Reduzir o Array

O método reduce() em JavaScript é usado para iterar sobre um array e reduzir seus elementos a um único valor, aplicando uma função acumuladora. Ele processa cada elemento do array, acumulando um resultado ao longo do caminho.

array.reduce(callback, valorInicial);

            

• callback: A função que recebe quatro parâmetros principais:
• acumulador: O valor acumulado até o momento.
• atual: O elemento atual sendo processado.
• índice (opcional): O índice do elemento atual.
• array (opcional): O array original.
• valorInicial: (Opcional) O valor inicial do acumulador.

Exemplo 1

const numeros = [1, 2, 3];
const soma = numeros.reduce((acum, atual) => acum + atual, 0);
console.log(soma); 

Exemplo 2

const numeros = [10, 20, 30, 40];
const resumo = numeros.reduce((acumulador, atual, indice, array) => {
  console.log(`Índice: ${indice}, Atual: ${atual}, Acumulador: ${acumulador}, Array: ${array}`);

  // Atualiza o acumulador
  acumulador.soma += atual;
  acumulador.elementos.push(`Índice ${indice}: ${atual}`);
  acumulador.media = acumulador.soma / (indice + 1);

  return acumulador;
}, { soma: 0, elementos: [], media: 0 });

console.log('Resumo Final:', resumo);
          
        

Clonando Arrays

Clonar um array significa criar uma cópia exata do array original. Uma forma eficiente e moderna de fazer isso é utilizando o spread operator (...).

Exemplo

const original = [1, 2, 3];
const clone = [...original];
console.log(clone);

Esse método cria uma cópia superficial do array. Se o array contiver objetos, as referências desses objetos serão copiadas, e não os objetos em si.

Combinando Arrays

Para combinar arrays, podemos usar o spread operator para espalhar os elementos de vários arrays em um novo array.

Exemplo

const array1 = [1, 2];
const array2 = [3, 4];
const combined = [...array1, ...array2];
console.log(combined);

É possível adicionar elementos adicionais durante a combinação:

const combinedWithExtras = [...array1, 'extra', ...array2];
console.log(combinedWithExtras);

Spread Operator

O spread operator (...) é uma funcionalidade poderosa introduzida no ES6 que permite espalhar elementos de um array, objeto ou string em um novo contexto. Abaixo estão suas principais aplicações:

Clonar Arrays

Como mencionado anteriormente, é uma maneira simples e eficaz de criar uma cópia de um array.

Combinar Arrays

Permite mesclar múltiplos arrays em um único array.

Dividir Strings em Caracteres

const string = "Hello";
const characters = [...string];
console.log(characters); 

Passar Elementos de Arrays como Argumentos de Funções

const numbers = [1, 2, 3];
console.log(Math.max(...numbers)); 

Clonar Objetos

Também pode ser usado para clonar objetos:

const originalObj = { a: 1, b: 2 };
const cloneObj = { ...originalObj };
console.log(cloneObj); 

Combinar Objetos

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj); 

Resumo dos métodos do Array