geovannaotoni/functions-js.md

## functions-js.md

      
    Raw
  

              functions-js.md
            
          
    Métodos Mais Utilizados


Método .push(): adiciona um novo item no final do array;
Método .pop(): permite remover o último item do array;
Método .shift(): remover o primeiro item da lista;
Método .unshift(): adiciona um novo item ao início do array;
Método .indexOf(): procura o índice de um item no Array, caso não encontre, retorna -1
Método .includes(): determina se um array contém um determinado elemento ou não (retorna true ou false)
Método array1.concat(array2): cria um novo array mesclando arrays existentes, na ordem dada.
Método .join(''): junta todos os elementos de um array em uma string e retorna esta string (pode ter um separador ou não dentro das aspas '')
Método .sort(): coloca o array em ordem alfabética ou númerica;
Método .reverse(): inverte os itens de um array. O primeiro elemento do array se torna o último e o último torna-se o primeiro
Método .fill(valor, indexInicial): preenche os valores de um array do indice inicial ao índice final com um valor estático.
Método .slice(indexInicial, indexFinal): retorna a cópia de uma parte do array, selecionada pelo índice inicial e o índice final (sem incluir o elemento final).
Método .splice(index, número de elementos removidos, valor): remove ou substitui elementos existentes de um array, ou adiciona novos.
Método .split(''): divide uma string em um array de strings de acordo com algum separador
Método .replace(''): retorna uma nova string com as correspondências substituídas por um determinado caractere (ou caracteres).
ParseInt(): analisa a string e retornar um número inteiro (pega os primeiros algarismos até aparecer uma letra) Ex: parseInt(‘300px12’) = 300
ParseFloat() analisa a string e retorna um número decimal
Math.random(): cria numeros aleatorios entre 0 e 1.
Math.floor(): retorna o maior inteiro menor ou igual a um determinado número (arredonda para baixo)
Math.ceil(): retorna o menor inteiro maior ou igual a um determinado número (arredonda para cima)

Higher Order Functions


Array.forEach: executa uma ação para cada item do array;
Array.find: retorna o primeiro elemento de um array que satisfaça a uma condição (caso não encontrado, retorna undefined)
Array.some: retorna true se algum elemento satisfizer alguma condição, caso contrário retorna false;
Array.every: retorna true se todos os elementos corresponderem a uma condição, caso contrário retorna false;
Array.map: Mesma estrutura que o forEach. Retorna um novo array (sem modificar o original) com o mesmo tamanho do array original. Função cujo retorno produz o elemento do novo Array.
Array.filter: filtra o array de acordo com alguma condição e retorna um novo array apenas com os valores que satisfizerem a essa condição

Estrutura

array.hofASerExecutada((elementoAtual, index, arrayOriginal) => {});

Array.sort::  ordenar arrays de acordo com algum critério:
Formatos:


Array.sort(): sort sem parâmetros ordena de forma alfabética;

Quando há elementos como números, o sort converte para string e realiza a comparação de acordo com a tabela de caracteres unicode.

Array.sort((a, b) => a - b): ordena em ordem crescente;

Se a operação a - b der resultado negativo, o a vem antes (vai para trás, pois A é menor). Caso contrário, se a - b der positivo, vai para frente (depois, pois A é maior). O a é o elemento da frente e o b é o anterior

Array.sort((a, b) => b - a): ordena em ordem decrescente;


Array.reduce: Reduz o array a um único elemento, retorna um único valor: o resultado acumulado da função.

Estrutura

array.reduce(callback, valorInicial);
array.reduce((acumulador, valorAtual, indexAtual, array) => { "código" }, valorInicial);

O valorInicial é o valor da primeira iteração e, em geral, ao realizar somas, esse valor é 0 (valor do acumulador).
A callback é a função que vai passar por cada um dos itens do array, e ela pode receber até 4 parâmetros, sendo eles:
Acumulador (acc): valor que vai ser acumulado a cada iteração (obrigatório).
Sua função é guardar o retorno da callback a cada iteração, tendo como ponto de partida o valorInicial.
Se um valorInicial não for fornecido, o valor de início é o do index 0 e, em seguida, o previousvalue.
Valor atual (curr): valor atual do item, a ser adicionado no acumulador (obrigatório);
Começa a partir do index 0 se um valorInicial for fornecido. Do contrário, começa do index 1.
Index atual: que é o index do item que está sendo iterado naquele momento;
Array: que é o array original.

Métodos com Objetos


Object.keys(): é utilizado para listar as chaves de um objeto, retornando-as em um array de strings.
Object.values(): lista os valores de cada chave em um array.
Object.entries(): retorna um array de arrays, no qual cada conjunto de elementos possui dois dados: a chave e valor do objeto.

// Exemplo:
const objeto = {propriedade1: valor1, propriedade2: valor 2}
Object.entries(objeto) = [ [propriedade1, valor1] , [propriedade2, valor2] ]

Object.assign(): Utilizado para copiar os valores de todas as propriedades de um ou mais objetos para um objeto destino.
A função Object.assign recebe pelo menos dois parâmetros, de forma que o primeiro sempre será o objeto destino, e os parâmetros restantes serão os valores que serão adicionados a esse objeto destino.

// Exemplo:
const variavel2 = Object.assign({}, variavel1);
// assim você pode alterar a variável2 sem afetar a variavel1
Local Storage

export const setOnStorage = (name, value) => {
  localStorage.setItem(name, JSON.stringify(value));
};

export const getFromStorage = (name) => {
  return JSON.parse(localStorage.getItem(name));
};
Funções assíncronas

Função com Fetch.then

export const fetchAPI = (url) => {
  fetch(url)
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.log(error.message))
};
Função com Async / Await

export const fetchAPI = async (url) => {
  const response = await fetch(url);
  const data = await response.json();
  return data;
};
Funções genéricas de inputs (event handlers genéricos)

Componente de Classe

  handleChange = ({ target }) => {
  const { name } = target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  
    this.setState({
      [name]: value,
    });
  };
Componente Funcional

const [state, setState] = useState({});
const handleChange = ({ target: { name, value } }) => {
// 1º modo
    setState((prevNumberFilter) => ({
      ...prevNumberFilter,
      [name]: value,
    }));
 // 2º modo
    setState({
      ...state,
      [name]: value,
    })
  };