Συνοπτικός οδηγός JavaScript
Μια αναζητήσιμη, εκτυπώσιμη αναφορά για το σύγχρονο JavaScript — σύνταξη, arrays, strings, αντικείμενα, async/await, DOM και χαρακτηριστικά ES2022+. Δωρεάν.
Μεταβλητές & τύποι
10let x = 1;
Μεταβλητή block-scope, επανεκχωρήσιμη
const PI = 3.14;
Σταθερά block-scope
typeof value
Επιστρέφει τον τύπο ως string
Number('42')
Μετατροπή string σε αριθμό
String(42)
Μετατροπή τιμής σε string
parseInt('42px', 10)
Ανάλυση αρχικού ακεραίου (βάση 10)
Boolean(0)
Μετατροπή τιμής σε true/false
value ?? 'default'
Nullish coalescing (μόνο null/undefined)
a?.b?.c
Optional chaining, διακόπτεται σε null
Array.isArray(x)
Έλεγχος αν η τιμή είναι array
Συναρτήσεις
9function add(a, b) { return a + b; }
Δήλωση επώνυμης συνάρτησης
const add = (a, b) => a + b;
Arrow function με σιωπηρή επιστροφή
const f = (a = 1) => a;
Προεπιλεγμένη τιμή παραμέτρου
function f(...args) {}
Rest παράμετροι συγκεντρώνονται σε array
f(...arr)
Spread array σε ορίσματα
const { a, b } = obj;
Destructuring αντικειμένου
const [x, y] = arr;
Destructuring array
(function(){})()
Άμεσα εκτελούμενη συνάρτηση (IIFE)
fn.bind(this)
Δέσμευση σταθερού this context
Συμβολοσειρές (strings)
10`Hello ${name}`
Παρεμβολή με template literal
str.length
Πλήθος χαρακτήρων
str.includes('a')
Έλεγχος ύπαρξης substring
str.slice(0, 3)
Εξαγωγή τμήματος string
str.replace(/a/g, 'b')
Αντικατάσταση αντιστοιχιών (regex)
str.split(',')
Διαχωρισμός σε array
str.trim()
Αφαίρεση περιβάλλοντος κενού
str.toUpperCase()
Μετατροπή σε κεφαλαία
str.padStart(3, '0')
Γέμισμα αρχής σε μήκος
str.at(-1)
Χαρακτήρας σε index (δέχεται αρνητικά)
Πίνακες (arrays)
11arr.map(x => x * 2)
Μετασχηματισμός κάθε στοιχείου
arr.filter(x => x > 0)
Διατήρηση στοιχείων που ταιριάζουν
arr.reduce((a, b) => a + b, 0)
Συμπύκνωση σε μία τιμή
arr.find(x => x.id === 1)
Πρώτο στοιχείο που ταιριάζει
arr.some(x => x > 0)
True αν ταιριάζει κάποιο στοιχείο
arr.every(x => x > 0)
True αν ταιριάζουν όλα τα στοιχεία
arr.includes(3)
Έλεγχος για τιμή
arr.sort((a, b) => a - b)
Αριθμητική αύξουσα ταξινόμηση
[...new Set(arr)]
Αφαίρεση διπλότυπων τιμών
arr.flat(Infinity)
Πλήρες ισοπέδωμα ένθετων arrays
arr.at(-1)
Τελευταίο στοιχείο (αρνητικό index)
Αντικείμενα
9Object.keys(obj)
Array ιδίων enumerable κλειδιών
Object.values(obj)
Array ιδίων τιμών
Object.entries(obj)
Array ζευγών [key, value]
{ ...a, ...b }
Συγχώνευση αντικειμένων (spread)
Object.assign({}, a, b)
Αντιγραφή/συγχώνευση σε στόχο
Object.freeze(obj)
Κατάστηση αντικειμένου αμετάβλητου
{ [key]: value }
Υπολογισμένο όνομα ιδιότητας
obj.hasOwnProperty('x')
Έλεγχος ιδίας ιδιότητας
structuredClone(obj)
Βαθιά κλωνοποίηση αντικειμένου
Async & promises (ασύγχρονα)
9async function f() {}
Δήλωση async συνάρτησης
await fetch(url)
Παύση μέχρι να επιλυθεί promise
Promise.all([p1, p2])
Αναμονή να επιλυθούν όλα
Promise.allSettled([p1, p2])
Αναμονή να διευθετηθούν όλα
Promise.race([p1, p2])
Επίλυση με το πρώτο που διευθετείται
new Promise((res, rej) => {})
Χειροκίνητη δημιουργία promise
try { await f(); } catch (e) {}
Διαχείριση async σφαλμάτων
setTimeout(fn, 1000)
Εκτέλεση μετά από καθυστέρηση (ms)
queueMicrotask(fn)
Προγραμματισμός microtask
Ροή ελέγχου
9if (a) {} else if (b) {} else {}
Διακλαδώσεις συνθήκης
a ? b : c
Τριαδική έκφραση
switch (x) { case 1: break; }
Διακλάδωση πολλαπλών δρόμων
for (const x of arr) {}
Επανάληψη τιμών (iterables)
for (const k in obj) {}
Επανάληψη κλειδιών αντικειμένου
while (cond) {}
Βρόχος όσο ισχύει συνθήκη
arr.forEach((x, i) => {})
Εκτέλεση callback ανά στοιχείο
break / continue
Έξοδος ή παράλειψη επανάληψης
label: for (...) { break label; }
Έξοδος από ένθετους βρόχους
DOM & συμβάντα
10document.querySelector('.x')
Πρώτο στοιχείο που ταιριάζει
document.querySelectorAll('.x')
Όλα τα στοιχεία που ταιριάζουν (NodeList)
el.addEventListener('click', fn)
Προσάρτηση event listener
el.classList.toggle('active')
Εναλλαγή CSS class
el.dataset.id
Ανάγνωση attribute data-id
el.textContent = 'hi'
Ασφαλής ορισμός κειμένου (χωρίς HTML)
el.setAttribute('aria-hidden', true)
Ορισμός attribute
e.preventDefault()
Ακύρωση προεπιλεγμένης ενέργειας
el.closest('.parent')
Πλησιέστερος πρόγονος που ταιριάζει
document.createElement('div')
Δημιουργία νέου στοιχείου
Classes & modules (κλάσεις)
9class A extends B {}
Class με κληρονομικότητα
constructor() { super(); }
Αρχικοποίηση και κλήση γονέα
#private = 1;
Ιδιωτικό πεδίο class
static create() {}
Static μέθοδος στην class
get value() {}
Accessor getter
export default fn;
Προεπιλεγμένο export module
export { a, b };
Επώνυμα exports module
import x, { y } from './m.js'
Προεπιλεγμένα + επώνυμα imports
const m = await import('./m.js')
Δυναμικό import
Καμία καταχώριση δεν ταιριάζει με «:q».
Χρειάζεστε βοήθεια;
Βρήκατε πρόβλημα με αυτό το εργαλείο; Ενημερώστε μας.