דף עזר JavaScript
מדריך עיון של JavaScript מודרני, ניתן לחיפוש ולהדפסה — תחביר, מערכים, מחרוזות, אובייקטים, async/await, DOM ותכונות ES2022+. חינם.
משתנים וסוגים
10let x = 1;
משתנה בתחום בלוק, ניתן להקצאה מחדש
const PI = 3.14;
קבוע בתחום בלוק
typeof value
מחזיר את הסוג כמחרוזת
Number('42')
המרת מחרוזת למספר
String(42)
המרת ערך למחרוזת
parseInt('42px', 10)
ניתוח מספר שלם מוביל (בסיס 10)
Boolean(0)
המרת ערך ל-true/false
value ?? 'default'
איחוד nullish (רק null/undefined)
a?.b?.c
שרשור אופציונלי, עוצר ב-null
Array.isArray(x)
בדיקה אם ערך הוא מערך
פונקציות
9function add(a, b) { return a + b; }
הצהרת פונקציה עם שם
const add = (a, b) => a + b;
פונקציית חץ עם החזרה משתמעת
const f = (a = 1) => a;
ערך פרמטר ברירת מחדל
function f(...args) {}
פרמטרי rest נאספים למערך
f(...arr)
פיזור מערך לארגומנטים
const { a, b } = obj;
פירוק אובייקט
const [x, y] = arr;
פירוק מערך
(function(){})()
פונקציה מופעלת מיידית (IIFE)
fn.bind(this)
קיבוע הקשר this
מחרוזות
10`Hello ${name}`
אינטרפולציה בתבנית literal
str.length
מספר תווים
str.includes('a')
בדיקה אם תת-מחרוזת קיימת
str.slice(0, 3)
חילוץ חלק ממחרוזת
str.replace(/a/g, 'b')
החלפת התאמות (regex)
str.split(',')
פיצול למערך
str.trim()
הסרת רווחים מסביב
str.toUpperCase()
המרה לאותיות גדולות
str.padStart(3, '0')
ריפוד ההתחלה לאורך
str.at(-1)
תו במיקום (תומך בשליליים)
מערכים
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)
שיטוח מלא של מערכים מקוננים
arr.at(-1)
האיבר האחרון (אינדקס שלילי)
אובייקטים
9Object.keys(obj)
מערך מפתחות עצמיים
Object.values(obj)
מערך ערכים עצמיים
Object.entries(obj)
מערך זוגות [key, value]
{ ...a, ...b }
מיזוג אובייקטים (spread)
Object.assign({}, a, b)
העתקה/מיזוג ליעד
Object.freeze(obj)
הפיכת אובייקט לבלתי ניתן לשינוי
{ [key]: value }
שם מאפיין מחושב
obj.hasOwnProperty('x')
בדיקת מאפיין עצמי
structuredClone(obj)
שכפול עמוק של אובייקט
אסינכרוני ו-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) {}
טיפול בשגיאות אסינכרוניות
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)
צירוף מאזין אירועים
el.classList.toggle('active')
החלפת מחלקת CSS
el.dataset.id
קריאת מאפיין data-id
el.textContent = 'hi'
הגדרת טקסט בבטחה (ללא HTML)
el.setAttribute('aria-hidden', true)
הגדרת מאפיין
e.preventDefault()
ביטול פעולת ברירת המחדל
el.closest('.parent')
האב הקרוב התואם
document.createElement('div')
יצירת אלמנט חדש
מחלקות ומודולים
9class A extends B {}
מחלקה עם ירושה
constructor() { super(); }
אתחול וקריאה למחלקת האב
#private = 1;
שדה מחלקה פרטי
static create() {}
מתודה סטטית במחלקה
get value() {}
גישת getter
export default fn;
ייצוא מודול כברירת מחדל
export { a, b };
ייצוא מודול עם שם
import x, { y } from './m.js'
ייבוא ברירת מחדל + עם שם
const m = await import('./m.js')
ייבוא דינמי
אף רשומה אינה תואמת ל-„:q”.
צריך עזרה?
נתקלת בבעיה בכלי הזה? ספר לצוות שלנו.