Skip to content

Instantly share code, notes, and snippets.

@lavesan
Last active April 28, 2020 02:28
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lavesan/4521c4bbd1642a3f48a3128d4a38967f to your computer and use it in GitHub Desktop.
Save lavesan/4521c4bbd1642a3f48a3128d4a38967f to your computer and use it in GitHub Desktop.
Javascript

loop

const array = ['dado1', 34, true, 'dado4']

for(let i = 0; i < array.length; i++) {
  console.log(array[i])
}
for(const i in array) {
  console.log(array[i])
}
for(let i of array) {
  console.log(array[i])
}
// loop com elemento, índice e array completo
array.forEach((elem, i, array) => {
  console.log(elem)
})

Funções úteis

explicação dos parâmetros seguidos por ';'

Alterando array

let array = [1, 2, 3, 4]

// Copia elementos dentro de um array para ele mesmo sem alterar o índice
// indíce para onde os elementos vão ser copiados; índice de começo; índice de término (senão copiará tudo)
array.copyWithin(0, 2, 3) // [3, 4, 3, 4]

// Adicionar elemento em um array de um índice à outro
array.fill(5, 1, 3) // [3, 5, 5, 5]

// Reverte a ordem dos elementos
array.reverse() // [4, 3, 2, 1]

// Ordena os elementos de acordo com o UNICODE
// Se eu não achar legal posso passar uma função que faz o sort;
array.sort(funcaoCriada(elem1, elem2))

// Altera dados dentro de um array e retorna os elementos removidos
// índice de começo; quantidade de elementos removidos; elemento que entrará no meio 
array.splice(1, 0, 43) // [1, 43, 2, 3, 4]

// Adiciona um ou mais elementos no fim do array e retorna novo length
array.push(5, 6) // [1, 2, 3, 4, 5, 6]

// Adiciona um ou mais elementos no começo do array e retorna novo length
array.unshift(5, 6) // [5, 6, 1, 2, 3, 4]

// Remove e retorna o primeiro elemento
array.shift() // [2, 3, 4]

// Remove e retorna o último elemento
array.pop() // [1, 2, 3]

Consultas no array

let array = [1, 2, 3, 4]
let array2 = [4, 5]
let array3

// Concatena elementos dentro do array ou até arrays com arrays
array3 = array.concat(array2, 65) // [1, 2, 3, 4, 4, 5, 65]

// Verifica se existe alguma ocorrência dentro do array
let booleano = array.includes(3) // true

// Adiciona uma string no meio dos elementos de um array e retorna uma string disso
array3 = array.join() // '1,2,3,4'
array3 = array.join('A') // '1A2A3A4'

// Retorna uma cópia do array
// começo, fim(opcional)
array3 = array.slice(1, 2) // [2, 3]

// Converte algo para string
array3 = array.toString() // '1,2,3,4'
array3 = 43.toString() // '43'

// Converte algo para string (datas e pa) utilizando seus respectivos métodos
array3 = array.toLocaleString() // '1,2,3,4'

// Retorna primeiro índice da ocorrência e -1 em caso de erro
// Elemento procurado; Começo da procura(opcional)
array3 = [1, 2, 3, 4, 4, 5].indexOf(4, 0) // 3

// Retorna último índice da ocorrência e -1 em caso de erro. A procura começa de trás para frente
// Elemento procurado; Começo da procura(opcional)
array3 = [1, 2, 3, 4, 4, 5].lastIndexOf(2, 3) // 4

Procura com loops

let array = [1, 2, 3, 4, 5]
let teste

// Loop normal
// elemento(opcional); índice(opcional); array(opcional)
// ^ Praticamente todos seguem esse fluxo dai de cima ^
array.forEach((elem, i, arrayIn) => {})

// Retorna um novo array de acordo com como eu mudar os elementos
teste = array.map(elem => {return elem * 2}) // [2, 4, 6, 8, 10]

// Executa uma função feita por mim
// Elemento atual; Próximo elemento; index; array
teste = array.reduce((elem, proxElem) => elem + proxElem) // 15

// Executa uma função feita por mim de trás para frente
// Elemento atual; Elemento anterior; index; array
teste = array.reduceRight((elem, elemAnterior) => elem + elemAnterior) // 15

// Retorna um array de arrays com chave(index) e valor(valor dele)
teste = array.entries() // [[0, 1], [1, 2], [2, 3], [3, 4], [4, 5]]

// Testa todos elementos de um array e retorna um booleano
// Elemento atual; índice(opcional); array(pocional)
teste = array.every(elem => {return elem >= 2}) // false

// Testa para ver se existe um elemento de um array com a condicional e retorna um boolean
teste = array.some(elem => {return elem >= 2}) // true

// Retorna um novo array com todos elementos que passam na condiciona, em caso de erro retorna -1
teste = array.filter(elem => {return elem >= 2}) // [2, 3, 4, 5]

// Retorna valor do primeiro elemento que satisfizer a condicional, em caso de erro retorna -1
teste = array.find(elem => {return elem >= 2}) // 2

// Retorna o índice do primeiro elemento que satisfizer a condicional, em caso de erro retorna -1
teste = array.findIndex(elem => {return elem >= 2}) // 1

// Retorna array de objetos com chave(index)
teste = array.keys() // [0, 1, 2, 3, 4]

// Retorna array com valores
teste = array.values() // [1, 2, 3, 4, 5]

// Retorna um ArrayIterator
teste = array[Symbol.Iterator]()
teste.next().value // 1
teste.next().value // 2
...
let funcao = function(num1, let2, algo) {
}

// Retorna numero de parâmetros na função
funcao.length // 3

// Retorno o nome da função
funcao.name // 'funcao'

// Colocando o this de uma função em um contexto que eu quiser
funcao.bind(this) // Assim não importa onde ela for chamada, o 'this' vai ser o mesmo daonde isso foi colocado
funcao.bind([1, 2, 3]) // Assim o 'this' vai ser este array sempre que for chamado (só um exemplo)

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype

Função auto-invocada

Uma função que se autoinvoca

// Ao invés de
const a = function() {}
a();

// Faço
(function(parametro) {
  // Corpo da função
})('contexto')

// Deixando o '$' com o jQuery
(function($) {})(jQuery)

// Ou só chamo ela
(() => { })()
// ou
(function(){}.bind(this))()

Variáveis

Math.PI       // Valor de pi 3,141592653589793...
Math.E        // Número de euler
Math.SQRT2    // raiz de 2
Math.SQRT1_2  // raiz de 1/2
Math.LN2      // logaritmo natural de 2
Math.LN10     // logaritmo natural de 10
Math.LOG2E    // logaritmo de 2 na base E
Math.LOG10E   // logaritmo de 10 na base E

Float -> inteiro

Math.ceil(4.3)          // 5  -> Inteiro maior mais perto
Math.floor(4.7)         // 4 -> Inteiro menor mais perto 
Math.round(4.4)         // 4 -> Inteiro mais perto 
Math.round(4.6)         // 5 -> Inteiro mais perto

Operações

Math.pow(8, 2)         // 64 -> Primeiro elevado ao segundo
Math.sqrt(64)          // 8 -> Raiz quadrada do número
Math.exp(1)            // E -> valor de E^1
Math.log(1)            // 0 -> Logaritmo de 1 na base E(número de euler)
Math.min(4, 5, 9, -10) // -10 -> Valor mínimo
Math.max(4, 5, 9, -10) // 9 -> Valor máximo
Math.sin(90)           // 1 -> Seno
Math.cos(180)          // -1 -> Cosseno
Math.acos(x)	         // Arcocoseno de x em radianos
Math.asin(x)	         // Arcoseno de x em radianos
Math.atan(x)	         // Arcotangente de x de -PI/2 à PI/2
Math.atan2(y, x)       // Arcotangete do quociente dos parâmetros
Math.tanh(x)	         // tangente hiperbólica de um número
Math.trunc(4.6)        // 4 -> Parte inteiro de um número float
4.6 - Math.trunc(4.6)  // 0.6 -> Parte decimal do número
Number((4.6 - 
  Math.trunc(4.6))
  .replace('.', ''))   // 6 -> Parte decimal do número como um inteiro

Convertendo número

Math.abs(-4.5) // 4.5 -> De negativo para positivo

Valor random

Math.random()                        // Valor random de 0 a 1
Matn.random() * 10                   // Valor random de 0 a 10
Math.floor(Math.random() * 10)       // Valor inteiro random e 1 a 9
Math.floor(Math.random() * 10) + 1   // Valor inteiro random de 1 a 10

Modularizando algo

arquivo.js

const modulo = require('./modulo.js')

console.log('variavel: ', modulo.variavel)
modulo.funcao('te chamei mizera')

modulo.js

const variavel = 'não sei'
const funcao = function(parametro) {
  console.log('parametro: ', parametro)
}

module.exports = { variavel, funcao }

Chamando função, objeto ou sei lá do arquivo que importou o módulo

arquivo.js

const variavel = 'sei lá'

require('/modulo.js)()

modulo.js

module.exports = () => {
  console.log(variavel)
}

Desconstruct

const res = data {
  situacao: 'alguma',
  status: 1,
  nome: 'valdery'
}
const {
  data: {
    situacao,
    status,
    nome,
  },
} = res;
console.log('chamando alguma das variáveis: ', situacao)

loop

const obj = { name: 'algum nome', idade: 23 }

Object.keys(obj) // ['name', 'idade']
Object.values(obj) // ['algum nome', 23]
Object.entries(obj) // [['name', 'algum nome'], ['idade', 23]]

// Já que é um array, só usar algum método 'for' agora

utilidades

// Assim adiciono uma função ou o que quer que seja à todo filho dele
Object.prototype.algumaCoisaCompartilhada

Object.keys(obj) // ['name', 'idade']
Object.values(obj) // ['algum nome', 23]

// Criação de um objeto
Object.create(AlgumaClasse))

// Vê se um objeto é protótipo de outro
Object.isPrototypeOf(OutroObjeto) // true ou false

// Vê se um objeto tem tal propriedade
Object.hasOwnProperty(propriedade) // true ou false

// Transforma um objeto em string (JSON)
Object.toString()

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

Uso básico mas eficiente:

const func1 = function() {
   return new Promise((resolve, rejected) => {
      if (true) {
         rejected() // retorna um erro no catch
      }
      resolve() // Retorna acerto
   })
}

const func2 = function() {
   func1()
      // No acerto, vem para o then
      .then(() => {
        console.log('não deu pau!');
      })
      // No erro, vem para o catch
      .catch(() => {
        console.log('deu pau :(');
      })
}

Replace

Altero uma substring dentro da substring por outro valor, podendo até retirar e não colocar nada no lugar

// tira a primeira ocorrência apenas
str = str.replace('sample', '');
// tira todas as ocorrências
str = str.replace(/sample/g, '');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment