مرجع جاوااسکریپت ۱۰۴ مورد
مرجع کامل جاوااسکریپت (متدهای رشته، آرایه، آبجکت، DOM و رویدادها) با مثال واقعی و توضیح فارسی. روی هر مورد کلیک کنید تا صفحه کامل آن با مثال و توضیحات باز شود.
آرایه‌ها (۲۳)
arr.concat()
دو یا چند آرایه را ادغام و یک آرایه جدید برمی‌گرداند؛ آرایه‌های اصلی تغییر نمی‌کنند. امروز…
arr.every()
بررسی می‌کند آیا همه اعضای آرایه شرط را پاس می‌کنند. اگر حتی یک عضو شرط را رد کند نتیجه fa…
arr.fill()
همه یا بخشی از اعضای آرایه را با یک مقدار ثابت پر می‌کند. روش استاندارد ساخت آرایه مقدار ث…
arr.filter()
فقط اعضایی که شرط تابع برقرار باشد را نگه می‌دارد و آرایه جدید می‌سازد. برای جستجو و فیلتر…
arr.find()
اولین عضوی که شرط را پاس کند را برمی‌گرداند و اگر هیچ عضوی پیدا نشود undefined می‌دهد. برا…
arr.findIndex()
ایندکس اولین عضو مطابق شرط را برمی‌گرداند و در نبود آن -1 می‌دهد. برای پیدا کردن جایگاه ی…
arr.flat()
آرایه‌های تودرتو را تا عمق مشخص صاف می‌کند. با Infinity همه سطوح یکجا صاف می‌شوند؛ ترکیب m…
arr.forEach()
روی هر عضو آرایه یک بار تابع را اجرا می‌کند و مقداری برنمی‌گرداند. برای اعمال جانبی مثل لا…
Array.from()
از آبجکت‌های شبیه آرایه (NodeList، arguments) یا Iterables یک آرایه واقعی می‌سازد و امکان…
arr.includes()
بررسی می‌کند آیا مقدار مشخصی در آرایه وجود دارد. برخلاف indexOf مقدار NaN را هم درست تشخیص…
Array.isArray()
بررسی می‌کند آیا مقدار داده‌شده یک آرایه واقعی است. تنها روش مطمئن تشخیص آرایه است چون typ…
arr.join()
همه اعضای آرایه را با جداکننده مشخص به یک رشته تبدیل می‌کند. عکس متد split است و برای ساخت…
arr.map()
روی هر عضو آرایه تابع را اجرا می‌کند و آرایه جدیدی از خروجی‌ها می‌سازد؛ آرایه اصلی تغییر ن…
arr.pop()
آخرین عضو آرایه را حذف و همان را برمی‌گرداند. روی آرایه خالی undefined برمی‌گرداند. آرایه…
arr.push()
یک یا چند عضو را به انتهای آرایه اضافه می‌کند و طول جدید آرایه را برمی‌گرداند. آرایه اصلی…
arr.reduce()
آرایه را به یک مقدار واحد خلاصه می‌کند؛ مثل جمع اعداد، ساخت آبجکت از لیست یا شمارش تکرارها…
arr.reverse()
ترتیب اعضای آرایه را درجا معکوس می‌کند. برای نمایش جدیدترین آیتم‌ها در ابتدای لیست کاربرد…
arr.shift()
اولین عضو آرایه را حذف و برمی‌گرداند. بقیه اعضا یک خانه جلو می‌آیند و برای آرایه‌های بزرگ…
arr.slice()
کپی سطحی از بخشی از آرایه می‌سازد؛ آرایه اصلی تغییر نمی‌کند. برای گرفتن N آیتم اول (slice(…
arr.some()
بررسی می‌کند آیا حداقل یک عضو آرایه شرط را پاس می‌کند؛ به‌محض یافتن اولین تطابق متوقف می‌ش…
arr.sort()
اعضای آرایه را درجا مرتب می‌کند. پیش‌فرض مرتب‌سازی رشته‌ای است؛ برای اعداد حتماً تابع مقای…
arr.splice()
قدرتمندترین متد تغییر آرایه: حذف، جایگزینی و درج همزمان انجام می‌دهد. آرایه اصلی تغییر می…
arr.unshift()
یک یا چند عضو را به ابتدای آرایه اضافه می‌کند و طول جدید را برمی‌گرداند. اعضای قبلی به سمت…
توابع (۹)
تابع پیکانی (=>)
سینتکس کوتاه تعریف تابع که this را از محیط اطراف به ارث می‌برد. برای callbackهای یک‌خطی ما…
async/await
کد ناهمگام را شبیه کد همگام و خوانا می‌نویسد؛ await منتظر Promise می‌ماند و try/catch خطاه…
Closure (بستار)
تابع داخلی به متغیرهای تابع بیرونی حتی بعد از پایان اجرای آن دسترسی دارد. پایه الگوهای کپس…
پارامترهای پیش‌فرض
به پارامتر تابع مقدار پیش‌فرض می‌دهید تا وقتی آرگومان ارسال نشود یا undefined باشد، مقدار…
fetch()
درخواست HTTP به سرور می‌فرستد و Promise ای از Response می‌دهد. متد و بدنه در آبجکت دوم تنظ…
Promise
نماینده نتیجه آینده یک عملیات ناهمگام است: pending، fulfilled یا rejected. با then/catch/f…
پارامتر Rest (...)
آرگومان‌های باقی‌مانده تابع را در یک آرایه واقعی جمع می‌کند. برای توابع با تعداد نامشخص ور…
setInterval()
تابع را به‌صورت تکرارشونده در بازه زمانی مشخص اجرا می‌کند تا با clearInterval متوقف شود. ب…
setTimeout()
تابع را بعد از تأخیر مشخص (میلی‌ثانیه) یک بار اجرا می‌کند و یک شناسه برمی‌گرداند که با cle…
شرط و حلقه (۱۲)
break و continue
break حلقه را کامل قطع و continue فقط تکرار جاری را رد می‌کند. این دو جریان کنترل حلقه‌ها…
do...while
اول بلوک را یک بار اجرا می‌کند و بعد شرط را بررسی می‌کند. وقتی حداقل یک اجرای تضمین‌شده لا…
for...in
روی کلیدهای (property names) آبجکت پیمایش می‌کند. برای آرایه توصیه نمی‌شود چون کلیدهای اضا…
for
حلقه با شمارنده مشخص: مقدار اولیه، شرط ادامه و گام حرکت را در یک خط تعریف می‌کنید. برای پی…
for...of
روی مقادیر آرایه‌ها و هر Iterable مستقیم پیمایش می‌کند؛ بدون ایندکس و بدون ریسک شرط اشتباه…
if...else
ساختار تصمیم‌گیری پایه: با برقراری شرط بلوک if و در غیر این صورت بلوک else اجرا می‌شود. بر…
عملگر ?? (Nullish Coalescing)
مقدار پیش‌فرض فقط وقتی سمت چپ null یا undefined باشد را برمی‌گرداند. برخلاف || صفر و رشته…
عملگر ?. (Optional Chaining)
دسترسی امن به ویژگی‌های آبجکت تودرتو: اگر مسیر میانی null یا undefined باشد به‌جای خطا، un…
switch
برای مقایسه یک مقدار با چند حالت ثابت خواناتر از زنجیره if است. فراموش نکردن break در انته…
عملگر سه‌تایی (?:)
فشرده‌ترین شکل if/else برای انتخاب یک مقدار: شرط ? مقدار_درست : مقدار_غلط. برای مقداردهی ش…
try...catch...finally
خطاهای زمان اجرا را مهار می‌کند تا برنامه متوقف نشود. بلوک catch آبجکت خطا را می‌گیرد و fi…
while
تا زمانی که شرط برقرار است تکرار می‌کند. اگر شرط از ابتدا نادرست باشد بلوک هرگز اجرا نمی‌ش…
ذخیره‌سازی (۶)
Date.now()
زمان جاری به‌صورت میلی‌ثانیه از اول ژانویه ۱۹۷۰ برمی‌گرداند. برای ساخت شناسه‌های سریع، محا…
JSON.parse()
رشته JSON را به مقدار جاوااسکریپت (آبجکت/آرایه) تبدیل می‌کند. برای خواندن داده ذخیره‌شده د…
JSON.stringify()
مقدار جاوااسکریپت را به رشته JSON تبدیل می‌کند. برای ذخیره آبجکت در localStorage و ارسال ب…
localStorage
ذخیره‌سازی دائمی جفت کلید/مقدار در مرورگر کاربر (فقط رشته) که بعد از بستن مرورگر هم می‌مان…
new Date()
آبجکت تاریخ و زمان می‌سازد؛ از رشته، اجزای جدا یا بدون آرگومان (الان). متدهای getFullYear،…
sessionStorage
مشابه localStorage اما داده‌ها با بستن تب پاک می‌شوند. برای حالت موقت مثل فیلترهای فعلی جل…
DOM (۱۳)
parent.appendChild()
یک نود را به انتهای فرزندان عنصر اضافه می‌کند. برای افزودن کارت، ردیف جدول و هر محتوای ساخ…
element.classList
کلاس‌های CSS عنصر را مدیریت می‌کند: add، remove، toggle و contains. به‌جای دستکاری رشته cl…
element.closest()
نزدیک‌ترین والد (یا خود عنصر) که با سلکتور مطابقت دارد را برمی‌گرداند. ستون فقرات Event De…
document.createElement()
عنصر جدید می‌سازد که بعد از پر شدن با محتوا و کلاس، با appendChild به صفحه اضافه می‌شود. ر…
element.dataset
دسترسی به data-attributeهای عنصر (data-id → dataset.id). روش استاندارد ذخیره اطلاعات جانبی…
element.getAttribute()
مقدار یک attribute مشخص عنصر را برمی‌گرداند. برای خواندن href لینک‌ها، src تصاویر و data-a…
document.getElementById()
عنصر با id مشخص را برمی‌گرداند؛ سریع‌ترین روش انتخاب یک عنصر یکتا. اگر عنصری با این id نبا…
element.innerHTML
محتوای HTML داخلی عنصر را می‌خواند یا جایگزین می‌کند. قدرتمند اما خطرناک: ورودی کاربر را ه…
document.querySelector()
اولین عنصری که با سلکتور CSS مطابقت دارد را برمی‌گرداند. تمام قدرت سلکتورهای CSS (کلاس، تگ…
document.querySelectorAll()
همه عناصر منطبق با سلکتور را به‌صورت NodeList برمی‌گرداند که با forEach پیمایش می‌شود. برا…
element.remove()
خود عنصر را از DOM حذف می‌کند. روش مدرن و ساده‌تر نسبت به parent.removeChild(child) قدیمی.
element.style
استایل‌های درون‌خطی (inline) عنصر را می‌خواند و تنظیم می‌کند. نام پراپرتی‌ها به شکل camelC…
element.textContent
متن ساده عنصر را می‌خواند یا جایگزین می‌کند؛ بدون تفسیر HTML. انتخاب امن برای نمایش داده ک…
رویدادها (۷)
addEventListener()
تابع گوش‌دهنده را به یک رویداد عنصر وصل می‌کند؛ برخلاف onclick چندین شنونده روی یک رویداد…
رویداد click
وقتی کاربر روی عنصر کلیک می‌کند فعال می‌شود. رایج‌ترین رویداد وب است و با delegation روی و…
Event Delegation (تفویض رویداد)
به‌جای نصب listener روی تک‌تک عناصر، یک listener روی والد می‌گذارید و هدف واقعی را با clos…
رویداد DOMContentLoaded
وقتی ساخت DOM صفحه کامل شد (بدون انتظار برای تصاویر) فعال می‌شود. اجرای کد جاوااسکریپت داخ…
رویداد input
با هر تغییر مقدار فیلدهای فرم (تایپ، پیست، پاک کردن) فوری فعال می‌شود. برای جستجوی زنده، ا…
رویداد keydown
وقتی کلیدی فشرده می‌شود فعال می‌گردد و e.key نام کلید است. برای میان‌برهای صفحه‌کلید (Esc،…
رویداد submit
وقتی فرم ارسال می‌شود فعال می‌گردد. با preventDefault می‌توانید ارسال سنتی را متوقف و فرم…
آبجکت‌ها (۶)
obj.hasOwnProperty()
بررسی می‌کند آیا کلید مشخص مستقیماً روی خود آبجکت تعریف شده است (نه روی prototype). روش جا…
Object.assign()
ویژگی‌های چند آبجکت را در آبجکت هدف کپی می‌کند. برای ادغام تنظیمات پیش‌فرض با مقادیر کاربر…
Object.entries()
هر ویژگی آبجکت را به‌صورت جفت [کلید, مقدار] در یک آرایه برمی‌گرداند. با for...of و destruc…
Object.freeze()
آبجکت را قفل می‌کند تا هیچ ویژگی اضافه، حذف یا تغییر نکند. برای ثابت‌های پیکربندی و جلوگیر…
Object.keys()
آرایه کلیدهای (property names) آبجکت را برمی‌گرداند. پایه حلقه زدن روی آبجکت‌ها و بررسی خا…
Object.values()
آرایه مقادیر همه ویژگی‌های قابل‌شمارش آبجکت را برمی‌گرداند. برای گرفتن لیست مقادیر بدون نی…
اعداد و ریاضی (۱۱)
Math.abs()
قدرمطلق (مثبت) عدد را برمی‌گرداند. برای محاسبه اختلاف بین دو مقدار بدون نگرانی از منفی شدن…
Math.ceil()
عدد را به سمت بالا گرد می‌کند (بزرگ‌ترین عدد صحیح بیشتر یا مساوی). کاربرد نمونه: تعداد صفح…
Math.floor()
عدد را به سمت پایین گرد می‌کند (کوچک‌ترین عدد صحیح کمتر یا مساوی). برای محاسبه صفحه‌بندی،…
Math.max()
بزرگ‌ترین عدد بین پارامترها را برمی‌گرداند. با spread operator می‌توانید بیشینه یک آرایه ر…
Math.min()
کوچک‌ترین عدد بین پارامترها را برمی‌گرداند. برای محدود کردن مقدار (clamp) در کنار Math.max…
Math.random()
عددی تصادفی بین ۰ و ۱ (نه شامل ۱) تولید می‌کند. برای عدد صحیح تصادفی در بازه مشخص، آن را د…
Math.round()
عدد را به نزدیک‌ترین عدد صحیح گرد می‌کند؛ نیم‌ها به بالا گرد می‌شوند. برای نمایش امتیازها…
Number.isNaN()
بررسی می‌کند آیا مقدار دقیقاً NaN است. برخلاف isNaN سراسری، ابتدا چک می‌کند مقدار از نوع N…
Number.parseFloat()
رشته را به عدد اعشاری تبدیل می‌کند. برای خواندن مقادیر عددی از استایل‌ها و ورودی‌های متنی…
Number.parseInt()
رشته را به عدد صحیح تبدیل می‌کند و تا اولین نویسه غیرعددی می‌خواند. همیشه radix (پایه عدد،…
num.toFixed()
عدد را با تعداد اعشار مشخص رشته می‌کند (گرد می‌کند). برای نمایش قیمت و درصدها با دو رقم اع…
رشته‌ها (۱۷)
str.at()
نویسه ایندکس مشخص را برمی‌گرداند اما برخلاف charAt ایندکس منفی هم می‌پذیرد؛ یعنی at(-1) آخ…
str.charAt()
نویسه موجود در ایندکس مشخص را برمی‌گرداند. برای خواندن تک‌تک نویسه‌های رشته و اعتبارسنجی و…
str.endsWith()
بررسی می‌کند آیا رشته با عبارت مشخصی تمام می‌شود. کاربرد رایج آن اعتبارسنجی پسوند فایل‌ها…
str.includes()
بررسی می‌کند آیا رشته‌ای داخل رشته دیگر وجود دارد یا نه و مقدار بولی برمی‌گرداند. جایگزین…
str.indexOf()
ایندکس اولین رخداد رشته موردنظر را برمی‌گرداند و اگر پیدا نشود -1 می‌دهد. برای یافتن محل…
str.match()
رشته را با عبارت باقاعده تطبیق می‌دهد و نتایج را در قالب آرایه برمی‌گرداند. با فلگ g همه ت…
str.padStart()
رشته را با نویسه مشخص تا رسیدن به طول هدف از سمت چپ پر می‌کند. رایج‌ترین کاربرد آن صفر گذا…
str.repeat()
رشته را به تعداد مشخص تکرار و نتیجه را برمی‌گرداند. برای ساخت خطوط جداکننده، نویسه‌های تکر…
str.replace()
اولین تطبیق را با مقدار جدید جایگزین می‌کند. اگر به‌جای رشته از Regex با فلگ g استفاده کنی…
str.replaceAll()
تمام تطبیق‌های رشته را با مقدار جدید جایگزین می‌کند؛ خواناترین روش جایگزینی همه موارد بدون…
str.slice()
بخشی از رشته را بین دو ایندکس برمی‌گرداند. ایندکس منفی از انتهای رشته شمرده می‌شود و اگر پ…
str.split()
رشته را بر اساس جداکننده به آرایه تبدیل می‌کند. اگر جداکننده رشته خالی باشد هر نویسه یک عض…
str.startsWith()
بررسی می‌کند آیا رشته با عبارت مشخصی شروع می‌شود. برای تشخیص پروتکل لینک‌ها، پیشوند مسیرها…
str.substring()
مشابه slice بخشی از رشته را برمی‌گرداند اما ایندکس منفی را صفر درنظر می‌گیرد و اگر پارامتر…
str.toLowerCase()
تمام نویسه‌های رشته را به حروف کوچک تبدیل می‌کند. مهم‌ترین کاربرد آن یکسان‌سازی جستجو و مق…
str.toUpperCase()
تمام نویسه‌های رشته را به حروف بزرگ تبدیل می‌کند. برای نمایش عنوان‌ها، کدهای تخفیف و یکسان…
str.trim()
فاصله‌ها و نویسه‌های کنترلی ابتدا و انتهای رشته را حذف می‌کند. برای پاک‌سازی ورودی کاربر د…