Folha de consulta JavaScript
Uma referência pesquisável e imprimível de JavaScript moderno — sintaxe, arrays, strings, objetos, async/await, DOM e funcionalidades ES2022+. Grátis.
Variáveis e tipos
10let x = 1;
Variável de bloco, reatribuível
const PI = 3.14;
Vínculo de constante de bloco
typeof value
Retorna o tipo como string
Number('42')
Converter string em número
String(42)
Converter valor em string
parseInt('42px', 10)
Analisar inteiro inicial (base 10)
Boolean(0)
Forçar valor para true/false
value ?? 'default'
Coalescência nula (só null/undefined)
a?.b?.c
Encadeamento opcional, para em null
Array.isArray(x)
Verificar se valor é array
Funções
9function add(a, b) { return a + b; }
Declaração de função nomeada
const add = (a, b) => a + b;
Arrow function com retorno implícito
const f = (a = 1) => a;
Valor padrão de parâmetro
function f(...args) {}
Parâmetros rest agrupam em array
f(...arr)
Espalhar array em argumentos
const { a, b } = obj;
Desestruturação de objeto
const [x, y] = arr;
Desestruturação de array
(function(){})()
Função autoinvocada (IIFE)
fn.bind(this)
Fixar um contexto this
Strings
10`Hello ${name}`
Interpolação de template literal
str.length
Número de caracteres
str.includes('a')
Verificar se existe substring
str.slice(0, 3)
Extrair parte de uma string
str.replace(/a/g, 'b')
Substituir correspondências (regex)
str.split(',')
Dividir em array
str.trim()
Remover espaços ao redor
str.toUpperCase()
Converter para maiúsculas
str.padStart(3, '0')
Preencher o início até um tamanho
str.at(-1)
Caractere no índice (aceita negativos)
Arrays
11arr.map(x => x * 2)
Transformar cada elemento
arr.filter(x => x > 0)
Manter elementos correspondentes
arr.reduce((a, b) => a + b, 0)
Reduzir a um único valor
arr.find(x => x.id === 1)
Primeiro elemento correspondente
arr.some(x => x > 0)
True se algum elemento corresponder
arr.every(x => x > 0)
True se todos os elementos corresponderem
arr.includes(3)
Verificar um valor
arr.sort((a, b) => a - b)
Ordenação numérica crescente
[...new Set(arr)]
Remover valores duplicados
arr.flat(Infinity)
Achatar arrays aninhados por completo
arr.at(-1)
Último elemento (índice negativo)
Objetos
9Object.keys(obj)
Array das chaves próprias enumeráveis
Object.values(obj)
Array dos valores próprios
Object.entries(obj)
Array de pares [chave, valor]
{ ...a, ...b }
Mesclar objetos (spread)
Object.assign({}, a, b)
Copiar/mesclar em um destino
Object.freeze(obj)
Tornar um objeto imutável
{ [key]: value }
Nome de propriedade computado
obj.hasOwnProperty('x')
Verificar propriedade própria
structuredClone(obj)
Clonar objeto em profundidade
Async e promises
9async function f() {}
Declarar função async
await fetch(url)
Pausar até a promise resolver
Promise.all([p1, p2])
Esperar todas resolverem
Promise.allSettled([p1, p2])
Esperar todas concluírem
Promise.race([p1, p2])
Resolver com a primeira a concluir
new Promise((res, rej) => {})
Criar uma promise manualmente
try { await f(); } catch (e) {}
Tratar erros async
setTimeout(fn, 1000)
Executar após atraso (ms)
queueMicrotask(fn)
Agendar uma microtask
Fluxo de controle
9if (a) {} else if (b) {} else {}
Ramos condicionais
a ? b : c
Expressão ternária
switch (x) { case 1: break; }
Ramificação múltipla
for (const x of arr) {}
Iterar valores (iteráveis)
for (const k in obj) {}
Iterar chaves de objeto
while (cond) {}
Repetir enquanto a condição for verdadeira
arr.forEach((x, i) => {})
Executar callback por elemento
break / continue
Sair ou pular uma iteração
label: for (...) { break label; }
Sair de loops aninhados
DOM e eventos
10document.querySelector('.x')
Primeiro elemento correspondente
document.querySelectorAll('.x')
Todos os elementos correspondentes (NodeList)
el.addEventListener('click', fn)
Anexar um listener de evento
el.classList.toggle('active')
Alternar uma classe CSS
el.dataset.id
Ler um atributo data-id
el.textContent = 'hi'
Definir texto com segurança (sem HTML)
el.setAttribute('aria-hidden', true)
Definir um atributo
e.preventDefault()
Cancelar a ação padrão
el.closest('.parent')
Ancestral correspondente mais próximo
document.createElement('div')
Criar um novo elemento
Classes e módulos
9class A extends B {}
Classe com herança
constructor() { super(); }
Inicializar e chamar o pai
#private = 1;
Campo de classe privado
static create() {}
Método estático na classe
get value() {}
Acessor getter
export default fn;
Exportação padrão de módulo
export { a, b };
Exportações nomeadas de módulo
import x, { y } from './m.js'
Imports padrão + nomeados
const m = await import('./m.js')
Import dinâmico
Nenhuma entrada corresponde a “:q”.
Precisa de ajuda?
Encontrou um problema com esta ferramenta? Avise a nossa equipa.