Συνοπτικός οδηγός JavaScript
Μια αναζητήσιμη, εκτυπώσιμη αναφορά για το σύγχρονο JavaScript — σύνταξη, arrays, strings, αντικείμενα, async/await, DOM και χαρακτηριστικά ES2022+. Δωρεάν.
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
Καμία καταχώριση δεν ταιριάζει με «:q».
Σχετικά με το Συνοπτικός οδηγός JavaScript
Αυτό το cheat sheet JavaScript είναι μια αναζητήσιμη, μονοσέλιδη αναφορά στη σύγχρονη γλώσσα: μεταβλητές και τύπους, συναρτήσεις, συμβολοσειρές, πίνακες, αντικείμενα, async και promises, ροή ελέγχου, DOM και events, και κλάσεις και modules. Κάθε καταχώριση συνδυάζει ένα πραγματικό απόσπασμα κώδικα με μια εξήγηση μιας γραμμής για το τι κάνει.
Είναι γραμμένο για τη JavaScript που ο κόσμος πραγματικά χρησιμοποιεί σήμερα — let και const, arrow functions, destructuring, spread, optional chaining, template literals, async/await και ES modules — οπότε λειτουργεί επίσης ως γρήγορη υπενθύμιση όταν επιστρέφετε από άλλη γλώσσα.
Ολόκληρο το φύλλο φορτώνει πλευράς-πελάτη και είναι δωρεάν. Φιλτράρετέ το ζωντανά με το πλαίσιο αναζήτησης, μεταπηδήστε μεταξύ ενοτήτων από τον κολλημένο πίνακα περιεχομένων, κάντε κλικ σε οποιοδήποτε απόσπασμα για να το αντιγράψετε, και εκτυπώστε τη σελίδα για μια αναφορά JavaScript δίπλα στο γραφείο σας.
Πώς να χρησιμοποιήσετε το Συνοπτικός οδηγός JavaScript
- Ανοίξτε το φύλλο και ρίξτε μια ματιά στη λίστα ενοτήτων — από Μεταβλητές & τύποι έως DOM & events μέχρι Κλάσεις & modules.
- Πληκτρολογήστε στο πλαίσιο αναζήτησης για να φιλτράρετε κάθε γραμμή ζωντανά· ο μετρητής αντιστοιχιών δείχνει πόσα αποσπάσματα ταιριάζουν.
- Χρησιμοποιήστε τον κολλημένο πίνακα περιεχομένων για να μεταβείτε απευθείας σε μια ενότητα όπως Async & promises.
- Κάντε κλικ σε ένα απόσπασμα, ή στο εικονίδιο αντιγραφής του, για να αντιγράψετε τον κώδικα στο πρόχειρό σας.
- Κάντε κλικ στο Εκτύπωση για ένα καθαρό, φιλικό προς εκτύπωση αντίγραφο ολόκληρης της αναφοράς.
Συχνές ερωτήσεις
Εννέα ενότητες: μεταβλητές και τύπους, συναρτήσεις, συμβολοσειρές, πίνακες, αντικείμενα, async και promises, ροή ελέγχου, DOM και events, και κλάσεις και modules — καθεμία ως έτοιμα προς αντιγραφή αποσπάσματα με σύντομες περιγραφές.
Ναι. Τα αποσπάσματα χρησιμοποιούν τρέχουσα σύνταξη — let/const, arrow functions, destructuring, optional chaining, async/await, κλάσεις και ES modules — αντανακλώντας JavaScript ES2022+ αντί για παλαιότερα πρότυπα.
Ναι. Κάνοντας κλικ σε οποιοδήποτε απόσπασμα κώδικα, ή στο εικονίδιο αντιγραφής που εμφανίζεται όταν περνάτε το ποντίκι πάνω από μια γραμμή, το τοποθετεί άμεσα στο πρόχειρό σας με μια σύντομη επιβεβαίωση «Αντιγράφηκε!».
Ναι. Το κουμπί Εκτύπωση παράγει μια καθαρή διάταξη με τη γραμμή αναζήτησης, την πλοήγηση και τα κουμπιά αφαιρεμένα, ώστε οι εκτυπωμένες σελίδες να περιέχουν μόνο τα αποσπάσματα και τις περιγραφές τους.
Ναι. Είναι δωρεάν, φορτώνει εξ ολοκλήρου στο πρόγραμμα περιήγησής σας, και δεν απαιτεί λογαριασμό.
Δημοφιλείς αναζητήσεις
javascript cheat sheet
js cheat sheet
javascript array methods
javascript string methods
javascript promises and async await
javascript object methods
js dom methods
javascript syntax reference
Χρειάζεστε βοήθεια;
Βρήκατε πρόβλημα με αυτό το εργαλείο; Ενημερώστε μας.