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.
Variables & types
10let x = 1;
Block-scoped, reassignable variable
const PI = 3.14;
Block-scoped constant binding
typeof value
Returns the type as a string
Number('42')
Convert a string to a number
String(42)
Convert a value to a string
parseInt('42px', 10)
Parse a leading integer (base 10)
Boolean(0)
Coerce a value to true/false
value ?? 'default'
Nullish coalescing (null/undefined only)
a?.b?.c
Optional chaining, short-circuits on null
Array.isArray(x)
Check whether a value is an array
Functions
9function add(a, b) { return a + b; }
Named function declaration
const add = (a, b) => a + b;
Arrow function with implicit return
const f = (a = 1) => a;
Default parameter value
function f(...args) {}
Rest parameters collect into an array
f(...arr)
Spread an array into arguments
const { a, b } = obj;
Object destructuring
const [x, y] = arr;
Array destructuring
(function(){})()
Immediately-invoked function (IIFE)
fn.bind(this)
Bind a fixed this context
Strings
10`Hello ${name}`
Template literal interpolation
str.length
Number of characters
str.includes('a')
Check if a substring exists
str.slice(0, 3)
Extract part of a string
str.replace(/a/g, 'b')
Replace matches (regex)
str.split(',')
Split into an array
str.trim()
Remove surrounding whitespace
str.toUpperCase()
Convert to upper case
str.padStart(3, '0')
Pad the start to a length
str.at(-1)
Character at index (supports negatives)
Arrays
11arr.map(x => x * 2)
Transform each element
arr.filter(x => x > 0)
Keep matching elements
arr.reduce((a, b) => a + b, 0)
Reduce to a single value
arr.find(x => x.id === 1)
First matching element
arr.some(x => x > 0)
True if any element matches
arr.every(x => x > 0)
True if all elements match
arr.includes(3)
Check for a value
arr.sort((a, b) => a - b)
Numeric ascending sort
[...new Set(arr)]
Remove duplicate values
arr.flat(Infinity)
Fully flatten nested arrays
arr.at(-1)
Last element (negative index)
Objects
9Object.keys(obj)
Array of own enumerable keys
Object.values(obj)
Array of own values
Object.entries(obj)
Array of [key, value] pairs
{ ...a, ...b }
Merge objects (spread)
Object.assign({}, a, b)
Copy/merge into a target
Object.freeze(obj)
Make an object immutable
{ [key]: value }
Computed property name
obj.hasOwnProperty('x')
Check for an own property
structuredClone(obj)
Deep clone an object
Async & promises
9async function f() {}
Declare an async function
await fetch(url)
Pause until a promise resolves
Promise.all([p1, p2])
Wait for all to resolve
Promise.allSettled([p1, p2])
Wait for all to settle
Promise.race([p1, p2])
Resolve with the first to settle
new Promise((res, rej) => {})
Create a promise manually
try { await f(); } catch (e) {}
Handle async errors
setTimeout(fn, 1000)
Run after a delay (ms)
queueMicrotask(fn)
Schedule a microtask
Control flow
9if (a) {} else if (b) {} else {}
Conditional branches
a ? b : c
Ternary expression
switch (x) { case 1: break; }
Multi-way branch
for (const x of arr) {}
Iterate values (iterables)
for (const k in obj) {}
Iterate object keys
while (cond) {}
Loop while a condition holds
arr.forEach((x, i) => {})
Run a callback per element
break / continue
Exit or skip a loop iteration
label: for (...) { break label; }
Break out of nested loops
DOM & events
10document.querySelector('.x')
First matching element
document.querySelectorAll('.x')
All matching elements (NodeList)
el.addEventListener('click', fn)
Attach an event listener
el.classList.toggle('active')
Toggle a CSS class
el.dataset.id
Read a data-id attribute
el.textContent = 'hi'
Set text safely (no HTML)
el.setAttribute('aria-hidden', true)
Set an attribute
e.preventDefault()
Cancel the default action
el.closest('.parent')
Nearest matching ancestor
document.createElement('div')
Create a new element
Classes & modules
9class A extends B {}
Class with inheritance
constructor() { super(); }
Initialize and call the parent
#private = 1;
Private class field
static create() {}
Static method on the class
get value() {}
Getter accessor
export default fn;
Default module export
export { a, b };
Named module exports
import x, { y } from './m.js'
Default + named imports
const m = await import('./m.js')
Dynamic import
Nenhuma entrada corresponde a “:q”.
Sobre Folha de consulta JavaScript
Esta folha de referência de JavaScript é uma referência pesquisável de página única para a linguagem moderna: variáveis e tipos, funções, strings, arrays, objetos, async e promises, controlo de fluxo, DOM e eventos, e classes e módulos. Cada entrada combina um excerto de código real com uma explicação de uma linha sobre o que faz.
É escrita para o JavaScript que as pessoas realmente utilizam hoje (let e const, funções de seta, destructuring, spread, optional chaining, template literals, async/await e módulos ES) pelo que também serve como um refresco rápido quando volta de outra linguagem.
A folha inteira carrega do lado do cliente e é gratuita. Filtre-a ao vivo com a caixa de pesquisa, salte entre secções a partir do índice fixo, clique em qualquer excerto para o copiar, e imprima a página para uma referência de JavaScript ao alcance da secretária.
Como usar Folha de consulta JavaScript
- Abra a folha e percorra a lista de secções: desde Variáveis e tipos até DOM e eventos, passando por Classes e módulos.
- Digite na caixa de pesquisa para filtrar todas as linhas ao vivo; o contador de correspondências mostra quantos excertos correspondem.
- Use o índice fixo para saltar diretamente para uma secção como Async e promises.
- Clique num excerto, ou no seu ícone de cópia, para copiar o código para a área de transferência.
- Clique em Imprimir para uma cópia limpa e adequada para papel de toda a referência.
Perguntas frequentes
Nove secções: variáveis e tipos, funções, strings, arrays, objetos, async e promises, controlo de fluxo, DOM e eventos, e classes e módulos: cada uma com excertos prontos a copiar com descrições curtas.
Sim. Os excertos usam sintaxe atual (let/const, funções de seta, destructuring, optional chaining, async/await, classes e módulos ES) refletindo o JavaScript ES2022+ em vez de padrões antigos.
Sim. Clicar em qualquer excerto de código, ou no ícone de cópia que aparece ao passar o rato sobre uma linha, coloca-o imediatamente na sua área de transferência com uma breve confirmação "Copiado!".
Sim. O botão Imprimir produz um esquema limpo com a barra de pesquisa, a navegação e os botões removidos, pelo que as páginas impressas contêm apenas os excertos e as suas descrições.
Sim. É gratuita, carrega inteiramente no seu navegador e não requer conta.
Pesquisas populares
cheat sheet javascript
cheat sheet js
métodos de array javascript
métodos de string javascript
promises e async await javascript
métodos de objeto javascript
métodos do dom js
referência de sintaxe javascript
Precisa de ajuda?
Encontrou um problema com esta ferramenta? Avise a nossa equipa.