5 روش ضروری جاوا اسکریپت که هر مبتدی باید بداند

Summarize this content to 400 words in Persian Lang
جاوا اسکریپت مانند چاقوی برنامه نویسی ارتش سوئیس است – همه کاره، ضروری و مملو از ابزارهایی است که نمی دانستید به آنها نیاز دارید. اما به عنوان یک مبتدی، به راحتی می توان در حلقه ها درگیر شد و توسط کدهای طولانی و تکراری غرق شد. تصور کنید بخواهید به صورت دستی موارد را در یک جعبه ابزار کثیف جستجو کنید – خسته کننده، درست است؟

اینجاست که روش‌های جاوا اسکریپت وارد می‌شوند. این ابزارهای داخلی به شما امکان می‌دهند آرایه‌ها را دستکاری کنید، داده‌ها را فیلتر کنید و کارهای پیچیده را به آسانی ساده کنید. آنها را به عنوان میانبرهایی در نظر بگیرید که در زمان و تلاش شما صرفه جویی می کنند و کدهای نامرتب را به چیزی تمیز و کارآمد تبدیل می کنند.

در این مقاله، پنج جاوا اسکریپت ضروری را بررسی خواهیم کرد methods—map()، filter()، reduce()، forEach()، و find(). تسلط بر اینها کد شما را واضح تر، سریع تر و سرگرم کننده تر می کند.

“برنامه نویسی درباره آنچه شما می دانید نیست. این در مورد چیزی است که شما می توانید بفهمید. – کریس پاین.

1. map() – تبدیل آرایه ها

چه کاری انجام می دهد:نقشه () را به عنوان یک دستیار شخصی در نظر بگیرید که لیستی از کارها را می گیرد، برای هر مورد یک کار را انجام می دهد و لیست جدیدی را با نتایج به شما تحویل می دهد. برای تبدیل داده ها بدون دست زدن به اصل عالی است.

تصور کنید یک دسته از تی شرت های خالی دارید و می خواهید طرح هایی را روی همه آنها چاپ کنید. به جای تغییر پشته اصلی، یک پشته تازه با طرح های اعمال شده ایجاد می کنید. نقشه () به این ترتیب کار می‌کند – برای هر آیتم یک تابع اعمال می‌کند و یک آرایه جدید به شما می‌دهد.

مثال:در اینجا نحوه ی دو برابر کردن هر عدد در یک آرایه با استفاده از map():

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تفکیک:

numbers: آرایه اصلی دست نخورده باقی می ماند.

num * 2: تابع اعمال شده برای هر عنصر.

doubled: آرایه جدید با مقادیر تبدیل شده.

مورد استفاده عملی:فرض کنید لیستی از قیمت محصولات به دلار دارید و می خواهید آنها را به ارز دیگری تبدیل کنید. با map() می توانید تبدیل را در یک مرحله انجام دهید.

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا مفید است:map() به شما کمک می کند از کارهای تکراری اجتناب کنید و کد خود را تمیز نگه می دارد. به جای استفاده از حلقه ها برای دستکاری آرایه ها، این روش کارهای سنگین را برای شما انجام می دهد.

همیشه به یاد داشته باشید که map() یک آرایه جدید ایجاد می کند. اگر به دنبال اصلاح داده ها در محل هستید، این ابزار برای این کار نیست.

2. filter() – انتخاب موارد خاص

چه کاری انجام می دهد:filter() یک آرایه جدید ایجاد می کند که فقط شامل عناصری است که شرایط خاصی را برآورده می کنند. به آن به عنوان یک جسارت در یک باشگاه فکر کنید که فقط به کسانی اجازه ورود به آن ها را می دهد که با معیارها مطابقت دارند.

تصور کنید کمد لباس خود را مرتب می کنید و فقط لباس هایی را نگه می دارید که کاملاً مناسب شما هستند. filter() به شما کمک می کند فقط آنچه را که نیاز دارید انتخاب کنید و بقیه را کنار بگذارید – ساده و کارآمد.

مثال:بیایید اعداد زوج را از یک آرایه فیلتر کنیم:

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تفکیک:

numbers: آرایه اصلی دست نخورده باقی می ماند.

وضعیت: num % 2 !== 0 بررسی می کند که آیا یک عدد فرد است یا خیر.

نتیجه: یک آرایه جدید، oddNumbers، با مقادیر فیلتر شده ایجاد می شود.

مورد استفاده عملی:فرض کنید فهرستی از محصولات را مدیریت می‌کنید و می‌خواهید اقلامی را که موجودی ندارند فیلتر کنید.

const products = [
{ name: ‘Laptop’, inStock: true },
{ name: ‘Phone’, inStock: false },
{ name: ‘Tablet’, inStock: true }
];

const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts);
// Output: [{ name: ‘Laptop’, inStock: true }, { name: ‘Tablet’, inStock: true }]

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

زمان استفاده از آن:

فقط داده های مرتبط را از یک مجموعه داده استخراج کنید.
فرآیندها را تنها با کار کردن با آنچه نیاز دارید ساده کنید.

چرا مبتدیان آن را دوست دارند:برخلاف حلقه ها، filter() سرراست است احتمال خطا را کاهش می دهد و با کد کمتر می توانید به چیزهای بیشتری دست پیدا کنید.

3. reduce() – جمع آوری داده ها

فرض کنید، شما در یک باجه فروشگاه مواد غذایی هستید و صندوقدار در حال جمع کردن قیمت تمام اقلام شما است تا کل آن را به شما بدهد. دقیقا همینطوره reduce() کار می کند – همه عناصر یک آرایه را در یک مقدار واحد ترکیب می کند، مانند یک جمع، محصول یا هر نتیجه سفارشی.

چه کاری انجام می دهد:reduce() یک عنصر آرایه را به عنصر پردازش می کند و بر اساس تابعی که شما تعریف می کنید، آن را به یک مقدار خروجی کاهش می دهد.

مثال:بیایید مجموع یک آرایه را محاسبه کنیم:

const numbers = [5, 10, 15, 20];
const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(total); // Output: 50

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تفکیک:

accumulator: مجموع در حال انجام را پیگیری می کند (شروع در 0).

currentValue: به آیتم فعلی در آرایه در حال پردازش اشاره دارد.
نتیجه: همه اعداد را در یک جمع ترکیب می کند.

مورد استفاده عملی:فرض کنید در حال ساخت یک سبد خرید آنلاین هستید. شما باید هزینه کل تمام مواردی را که یک کاربر انتخاب کرده است محاسبه کنید.

const cart = [
{ item: ‘Laptop’, price: 800 },
{ item: ‘Headphones’, price: 50 },
{ item: ‘Mouse’, price: 30 }
];

const totalCost = cart.reduce((acc, product) => acc + product.price, 0);
console.log(totalCost); // Output: 880

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا خاص است:reduce() فقط برای اعداد نیست – می توانید از آن برای موارد زیر استفاده کنید:

رشته ها را با هم ترکیب کنید.
مسطح کردن آرایه ها
ساخت اشیا به صورت پویا

یک پیچ و تاب سرگرم کننده:بیایید خلاق باشیم! می توانید استفاده کنید reduce() برای شمارش اینکه هر حرف چند بار در یک کلمه ظاهر می شود:

const word = ‘reduce’;
const letterCount = word.split(”).reduce((acc, letter) => {
acc[letter] = (acc[letter] || 0) + 1;
return acc;
}, {});

console.log(letterCount);
// Output: { r: 1, e: 2, d: 1, u: 1, c: 1 }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا مبتدیان باید آن را یاد بگیرند:هر چند reduce() ممکن است در ابتدا کمی پیشرفته احساس شود، تسلط بر آن، امکانات بی پایانی را برای ساده کردن عملیات پیچیده باز می کند. این مانند چاقوی ارتش سوئیس از روش‌های آرایه‌ای است – همه کاره و قدرتمند.

«ابتدا مشکل را حل کنید. سپس، کد را بنویسید.» – جان جانسونبا ()reduce، شما با کد ظریف و کمینه به طور موثر مشکلات را حل می کنید.

4. forEach() – یک Workhorse دوستانه برای آرایه ها

بیایید صحنه را تنظیم کنیم:خودتان را به عنوان یک سرآشپز در آشپزخانه در نظر بگیرید که چندین غذا را آماده می کند. هر یک از مواد موجود در لیست خود را بررسی می کنید، در صورت نیاز خرد می کنید، برش می زنید یا چاشنی می کنید. شما خود لیست مواد تشکیل دهنده را تغییر نمی دهید – شما فقط یک عمل را برای هر مورد انجام می دهید. این دقیقاً همان چیزی است forEach() انجام می دهد.

چه کاری انجام می دهد:forEach() به شما اجازه می دهد تا از طریق یک آرایه حلقه بزنید و برای هر عنصر یک تابع اجرا کنید. بر خلاف map() یا filter()، آرایه جدیدی را بر نمی گرداند – فقط اقداماتی را انجام می دهد.

مثال:بیایید هر میوه را در یک لیست چاپ کنیم:

const fruits = [‘apple’, ‘banana’, ‘cherry’];

fruits.forEach(fruit => {
console.log(`I love ${fruit}!`);
});
// Output:
// I love apple!
// I love banana!
// I love cherry!

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اینجا چه اتفاقی می افتد:

ورودی: مجموعه میوه ها

اقدام: این تابع یک پیام شخصی برای هر میوه ثبت می کند.

نتیجه: هیچ آرایه جدیدی ایجاد نمی شود – فقط عمل را انجام می دهد.

مورد استفاده عملی:فرض کنید فهرستی از وظایف را مدیریت می‌کنید و می‌خواهید آنها را به‌عنوان «تکمیل‌شده» ثبت کنید:

const tasks = [‘Clean the house’, ‘Do the laundry’, ‘Write code’];

tasks.forEach(task => {
console.log(`✅ Completed: ${task}`);
});
// Output:
// ✅ Completed: Clean the house
// ✅ Completed: Do the laundry
// ✅ Completed: Write code

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا با روش های دیگر متفاوت است:بر خلاف map()، که یک آرایه جدید ایجاد می کند، forEach() فقط بر روی عوارض جانبی تمرکز می کند – اقداماتی که نتیجه مستقیمی ایجاد نمی کنند اما چیزی خارج از آرایه را تغییر می دهند یا با آن تعامل دارند.

به عنوان مثال:

ارسال درخواست های API برای هر مورد در یک لیست.
به روز رسانی DOM برای لیستی از عناصر.
ثبت مقادیر در کنسول

زمان استفاده از آن:

استفاده کنید forEach() وقتی:
شما فقط می خواهید روی یک آرایه تکرار کنید.
شما باید عملیات را بدون نیاز به آرایه جدید انجام دهید.

آنچه افراد مبتدی باید به آن توجه کنند:از آنجایی که forEach() چیزی را پس نمی دهد، برای عملیات زنجیره ای مناسب نیست. اگر به یک آرایه تبدیل شده نیاز دارید، به آن بچسبید map() یا filter().

مثال خلاقانه:بیایید یک ایمیل تشکر برای هر مشتری در یک لیست بفرستیم (فقط شبیه سازی شده):

const customers = [‘Alice’, ‘Bob’, ‘Charlie’];

customers.forEach(customer => {
console.log(`Sending email to ${customer}…`);
});
// Output:
// Sending email to Alice…
// Sending email to Bob…
// Sending email to Charlie…

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا مبتدیان آن را دوست دارند:forEach() ساده و شهودی است این اولین قدم در یادگیری نحوه کار با آرایه ها است.

این را به خاطر بسپار: “سادگی کد فقدان پیچیدگی نیست، بلکه هنر تسلط بر آن است.”forEach() اولین ابزار شما برای مدیریت پیچیدگی به روشی ساده است.

5. find() – کشف اولین مسابقه

شما در حال جستجوی گنج با نقشه هستید و سرنخ می گوید: “اولین سکه طلا را در جنگل پیدا کنید.” شما شروع به جستجو می کنید، اما به محض اینکه اولین سکه را زیر یک درخت می درخشید، متوقف می شوید. شما آنچه را که نیاز دارید پیدا کرده اید و بقیه سکه ها اهمیتی ندارند. دقیقا همینطوره find() کار می کند – به شما کمک می کند اولین مورد را در آرایه ای که با شرایط شما مطابقت دارد پیدا کنید و دیگر از آن مراقبت نمی کنید.

چه کاری انجام می دهد:find() از طریق یک آرایه اسکن می کند و اولین عنصری را که شرایط موجود در تابع شما را برآورده می کند، برمی گرداند. اگر مطابقت پیدا نشد، برمی گردد undefined.

مثال کد:بیایید عدد اول را بزرگتر از 20 پیدا کنیم:

const numbers = [10, 15, 25, 30, 5];
const result = numbers.find(num => num > 20);
console.log(result); // Output: 25

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چه اتفاقی می افتد:

شرط num > 20 برای هر عنصر بررسی می شود.
یک بار 25 شرایط را برآورده می کند، جستجو متوقف می شود و 25 برگردانده می شود.
هیچ عنصر دیگری پس از اولین مسابقه بررسی نمی شود.

فکر کن find() همانطور که در یک شکار لاشخور هستید که به شما گفته می شود: “اولین گل قرمز را پیدا کنید.” هر گل سرخی را جمع نمی کنی (همین filter() انجام خواهد داد). در عوض، به محض اینکه یکی را دیدید متوقف می‌شوید و فریاد می‌زنید: «می‌فهمم!»

مورد استفاده عملی:فرض کنید در حال مدیریت یک لیست مخاطبین هستید و می خواهید اولین نفر را با یک آدرس ایمیل خاص پیدا کنید.

const contacts = [
{ name: ‘Alice’, email: ‘alice@example.com’ },
{ name: ‘Bob’, email: ‘bob@example.com’ },
{ name: ‘Charlie’, email: ‘charlie@example.com’ }
];

const foundContact = contacts.find(contact => contact.email === ‘bob@example.com’);
console.log(foundContact);
// Output: { name: ‘Bob’, email: ‘bob@example.com’ }

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا مبتدیان آن را دوست دارند:find() استفاده از آن ساده است و زمانی که فقط به یک نتیجه نیاز دارید در زمان صرفه جویی می کند. مانند استفاده از چراغ قوه برای جستجوی یک شی در یک اتاق تاریک است – سعی نمی کند کل اتاق را روشن کند.

مثال خلاقانه:بیایید این را به دنیای تجارت الکترونیک ببریم. فرض کنید لیستی از محصولات دارید و می خواهید اولین محصولی را که در فروش است پیدا کنید.

const products = [
{ name: ‘Laptop’, price: 1000, onSale: false },
{ name: ‘Headphones’, price: 200, onSale: true },
{ name: ‘Keyboard’, price: 150, onSale: true }
];

const firstSaleItem = products.find(product => product.onSale);
console.log(`First product on sale: ${firstSaleItem.name}`);
// Output: First product on sale: Headphones

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

دسته های لبه ای:اگر هیچ موردی با شرایط شما مطابقت نداشته باشد چه؟ نگران نباش -find() بازگشت خواهد کرد undefined. شما می توانید با یک بک گراند این را به خوبی مدیریت کنید:

const result = numbers.find(num => num > 100) || ‘No match found’;
console.log(result); // Output: No match found

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چرا find() قدرتمند است:

کارایی: به محض اینکه اولین مسابقه را پیدا کرد متوقف می شود.
وضوح: هدف شما را در کد مشخص می کند—جستجوی یک مورد.
استفاده در دنیای واقعی: ایده آل برای مکان یابی یک کاربر، محصول یا نقطه داده در مجموعه داده های بزرگ.

نتیجه گیری

جاوا اسکریپت یک ابزار قدرتمند است و این پنج مورد methods—map()، filter()، reduce()، forEach()، و find()- کلیدهای باز کردن پتانسیل واقعی آن هستند. آنها به شما کمک می کنند تا کدهای تمیزتر و کارآمدتر بنویسید و در عین حال شما را از حلقه های بی پایان و کارهای اضافی نجات می دهند. آنها را به عنوان چاقوی ارتش سوئیس در جعبه ابزار توسعه دهنده خود در نظر بگیرید: همه کاره، قابل اعتماد، و ساخته شده برای آسان تر کردن زندگی شما.

تسلط بر این روش ها فقط در مورد یادگیری نحو نیست – بلکه در مورد فکر کردن مانند یک برنامه نویس است. این که آیا شما در حال تبدیل داده ها با map()، فیلتر کردن نویز با filter()، همه چیز را با reduce()، تکرار یکپارچه با forEach()، یا پیدا کردن آن گوهر پنهان با find()، شما در حال ایجاد مهارت هایی هستید که کد شما را حرفه ای تر و تاثیرگذارتر می کند.

به یاد داشته باشید، جادوی کدنویسی در نوشتن برنامه های طولانی و پیچیده نیست، بلکه در یافتن راه حل های ظریف برای مسائل روزمره است. از کوچک شروع کنید: یک روش را انتخاب کنید، آن را آزمایش کنید و آن را در پروژه بعدی خود امتحان کنید. هرچه بیشتر تمرین کنید، این روش ها بیشتر شبیه طبیعت دوم خواهند بود.

“بهترین کد کدی است که نیازی به توضیح آن نیست.” – مارتین فاولراز این روش ها برای نوشتن کدی استفاده کنید که خودش صحبت کند.

نظرات خود را در نظرات به من بگویید! آیا از این روش ها در پروژه های خود استفاده کرده اید؟ من دوست دارم تجربه شما را بشنوم.

این مقاله در اصل در هشنود منتشر شده است

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

const products = [
  { name: 'Laptop', inStock: true },
  { name: 'Phone', inStock: false },
  { name: 'Tablet', inStock: true }
];

const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts);
// Output: [{ name: 'Laptop', inStock: true }, { name: 'Tablet', inStock: true }]

const numbers = [5, 10, 15, 20];
const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(total); // Output: 50

const cart = [
  { item: 'Laptop', price: 800 },
  { item: 'Headphones', price: 50 },
  { item: 'Mouse', price: 30 }
];

const totalCost = cart.reduce((acc, product) => acc + product.price, 0);
console.log(totalCost); // Output: 880

const word = 'reduce';
const letterCount = word.split('').reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});

console.log(letterCount);
// Output: { r: 1, e: 2, d: 1, u: 1, c: 1 }

const fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(fruit => {
  console.log(`I love ${fruit}!`);
});
// Output:
// I love apple!
// I love banana!
// I love cherry!

const tasks = ['Clean the house', 'Do the laundry', 'Write code'];

tasks.forEach(task => {
  console.log(`✅ Completed: ${task}`);
});
// Output:
// ✅ Completed: Clean the house
// ✅ Completed: Do the laundry
// ✅ Completed: Write code

const customers = ['Alice', 'Bob', 'Charlie'];

customers.forEach(customer => {
  console.log(`Sending email to ${customer}...`);
});
// Output:
// Sending email to Alice...
// Sending email to Bob...
// Sending email to Charlie...

const numbers = [10, 15, 25, 30, 5];
const result = numbers.find(num => num > 20);
console.log(result); // Output: 25

const contacts = [
  { name: 'Alice', email: 'alice@example.com' },
  { name: 'Bob', email: 'bob@example.com' },
  { name: 'Charlie', email: 'charlie@example.com' }
];

const foundContact = contacts.find(contact => contact.email === 'bob@example.com');
console.log(foundContact);
// Output: { name: 'Bob', email: 'bob@example.com' }

const products = [
  { name: 'Laptop', price: 1000, onSale: false },
  { name: 'Headphones', price: 200, onSale: true },
  { name: 'Keyboard', price: 150, onSale: true }
];

const firstSaleItem = products.find(product => product.onSale);
console.log(`First product on sale: ${firstSaleItem.name}`);
// Output: First product on sale: Headphones

const result = numbers.find(num => num > 100) || 'No match found';
console.log(result); // Output: No match found