דף עזר JavaScript

כל הכלים
חינם

מדריך עיון של JavaScript מודרני, ניתן לחיפוש ולהדפסה — תחביר, מערכים, מחרוזות, אובייקטים, async/await, DOM ותכונות ES2022+. חינם.

Variables & types

10
let 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

9
function 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

11
arr.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

9
Object.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

9
async 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

9
if (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

10
document.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

9
class 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 הוא הפניה חד-עמודית וניתנת לחיפוש לשפה המודרנית: משתנים וטיפוסים, פונקציות, מחרוזות, מערכים, אובייקטים, אסינכרוניות והבטחות (promises), זרימת בקרה, DOM ואירועים, ומחלקות ומודולים. כל רשומה מציגה קטע קוד אמיתי עם הסבר בשורה אחת על מה שהוא עושה.

הוא נכתב עבור ה-JavaScript שאנשים באמת משתמשים בו כיום — let ו-const, פונקציות חץ, פירוק (destructuring), פריסה (spread), שרשור אופציונלי, תבניות מחרוזת, async/await ומודולי ES — כך שהוא משמש גם כרענון מהיר כשאתם עוברים חזרה משפה אחרת.

כל הדף נטען בצד הלקוח והוא חינמי. סננו אותו בזמן אמת עם תיבת החיפוש, קפצו בין קטעים מתוכן העניינים הדביק, לחצו על כל קטע קוד כדי להעתיק אותו, והדפיסו את העמוד כהפניית JavaScript ליד השולחן.

כיצד להשתמש ב-דף עזר JavaScript

  1. פתחו את הדף וסקרו את רשימת הקטעים — ממשתנים וטיפוסים דרך DOM ואירועים ועד מחלקות ומודולים.
  2. הקלידו בתיבת החיפוש כדי לסנן כל שורה בזמן אמת; מונה ההתאמות מציג כמה קטעי קוד מתאימים.
  3. השתמשו בתוכן העניינים הדביק כדי לקפוץ ישירות לקטע כמו אסינכרוניות והבטחות.
  4. לחצו על קטע קוד, או על סמל ההעתקה שלו, כדי להעתיק את הקוד ללוח שלכם.
  5. לחצו על הדפס לעותק נקי וידידותי להדפסה של כל ההפניה.

שאלות נפוצות

תשעה קטעים: משתנים וטיפוסים, פונקציות, מחרוזות, מערכים, אובייקטים, אסינכרוניות והבטחות, זרימת בקרה, DOM ואירועים, ומחלקות ומודולים — כל אחד כקטעי קוד מוכנים להעתקה עם תיאורים קצרים.

כן. קטעי הקוד משתמשים בתחביר עדכני — let/const, פונקציות חץ, פירוק, שרשור אופציונלי, async/await, מחלקות ומודולי ES — המשקף JavaScript מדור ES2022 ואילך ולא דפוסים ישנים.

כן. לחיצה על כל קטע קוד, או על סמל ההעתקה שמופיע כשאתם מרחפים מעל שורה, מעתיקה אותו ללוח שלכם מיד עם אישור "הועתק!" קצר.

כן. כפתור ההדפסה מייצר פריסה נקייה כשסרגל החיפוש, הניווט והכפתורים מוסרים, כך שהעמודים המודפסים מכילים רק את קטעי הקוד ותיאוריהם.

כן. הוא חינמי, נטען כולו בדפדפן שלכם, ולא דורש חשבון.
שתף זאת
כלים קשורים
דף עזר CSS מדריך עיון של CSS ניתן לחיפוש ולהדפסה — בוררים, מודל הקופסה, flexbox, grid, טיפוגרפיה, מעברים ותכונות מודרניות. חינם. חינם
דף עזר PHP מדריך עיון של PHP 8.3+ ניתן לחיפוש ולהדפסה — תחביר, מחרוזות, מערכים, פונקציות, מחלקות, enums, מאפיינים ותכונות מודרניות. חינם. חינם
דף עזר Python מדריך עיון של Python 3 ניתן לחיפוש ולהדפסה — תחביר, מבני נתונים, comprehensions, פונקציות, מחלקות, קבצים והספרייה הסטנדרטית. חינם. חינם
דף עזר MySQL מדריך עיון של MySQL ניתן לחיפוש ולהדפסה — שאילתות, joins, אינדקסים, פונקציות, סוגי נתונים ופקודות ניהול. חינם. חינם
דף עזר Shell מדריך עיון של Bash / shell ניתן לחיפוש ולהדפסה — ניווט, קבצים, pipes, משתנים, לולאות, תנאים ו-one-liners שימושיים. חינם. חינם
דף עזר SSH מדריך עיון של SSH ניתן לחיפוש ולהדפסה — התחברות, מפתחות, תצורה, מנהור, SCP/SFTP והעברת agent. חינם. חינם
חיפושים פופולריים
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
צריך עזרה?
נתקלת בבעיה בכלי הזה? ספר לצוות שלנו.
דיווח על בעיה

הוסיפו כלי חינמי זה לאתר שלכם — העתיקו והדביקו את הקוד שלהלן.