4 روش آرایه JS که هر توسعه دهنده Backend باید بداند (نمونه های واقعی موجود است)

آرایه ها قدرتمند هستند.

برخلاف سایر انواع داده ها – می توانید هر چیزی را در آنها ذخیره کنید: رشته ها، اعداد صحیح، بولی، بافرها و حتی آرایه های دیگر. آنها را می توان به عنوان ذخیره سازی ساده داده، برای نشان دادن ماتریس ها و حتی برای ساختارها و الگوریتم های پیچیده داده استفاده کرد – این انعطاف پذیری برای طیف گسترده ای از سناریوها آنها را بسیار ارزشمند می کند.

اما علیرغم سودمندی آنها، پتانسیل واقعی آنها تنها زمانی قابل تحقق است که بدانید چگونه از آنها به طور موثر استفاده کنید. متأسفانه فقط تعداد کمی از مردم این کار را انجام می دهند. این از تعاملات اخیر من با دیگران است.

فراتر از متدهای اصلی forEach()، map() و filter()، اکثریت قریب به اتفاق توسعه دهندگان Js در مورد سایر روش های آرایه که می توانند کد آنها را تا حد زیادی ساده کرده و آن را خوانا، قابل نگهداری و کارآمدتر کنند، نمی دانند.

این مقاله امیدوار است که آن را تغییر دهد.

برخلاف یک کتاب درسی یا اکثر ویدیوهای یوتیوب، من هزار و یک روش آرایه موجود را در جاوا اسکریپت قرار نمی دهم، در عوض، شما را از طریق 4 روش آرایه غیر معمول اما قدرتمندی که معمولاً در روزگارم استفاده می کنم، راهنمایی می کنم. کار به عنوان یک توسعه دهنده باطن

بدون مقدمه، بیایید داخل شیرجه بزنیم.

1. روش Reduce() Array

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

من می دانم که این یک لقمه است، بنابراین من شما را از طریق یک مثال رایج در زندگی واقعی راهنمایی می کنم تا درک آن آسان تر شود. نگران نباشید، زیرا وقتی آن را دریافت کردید، طیف وسیعی از فرصت ها را باز می کند.

فرض کنید آرایه ای از 5 شی دارید و هر شی شامل نام محصول، قیمت و مقداری است که مشتری به سبد خرید اضافه می کند (مانند شکل زیر)…

const products = [
  { name: 'iPhone 12', quantity: 2, price: 999 },
  { name: 'Samsung Galaxy S21', quantity: 1, price: 799 },
  { name: 'AirPods Pro', quantity: 3, price: 249 },
  { name: 'Nintendo Switch', quantity: 4, price: 299 },
  { name: 'Fitbit Charge 4', quantity: 2, price: 149 }
];

چگونه قیمت کل را محاسبه می کنید؟

این دو روش زیر به خوبی کار می کنند.

// Method 1

let totalPrice = 0;

for (let i = 0; i < products.length; i++) {
  totalPrice += products[i].quantity * products[i].price;
}

console.log('Total Price:', totalPrice);

// Method 2
let totalPrice = 0;

products.forEach(product => {
  totalPrice += product.quantity * product.price;
});

console.log('Total Price:', totalPrice);

اما هیچ یک از آنها مقداری را بر نمی گرداند، آنها فقط تکرار کننده هستند… بنابراین شما با نام متغیرها و همه اینها بازی می کنید. کد پرمخاطب، کمتر قابل خواندن است و اشکال زدایی آن سخت است.

از طرف دیگر، می‌توانید از Reduce() استفاده کنید و نیاز به حلقه‌های For و تکرارکننده‌های ناهموار را جایگزین کنید.

const products = [
  { name: 'iPhone 12', quantity: 2, price: 999 },
  { name: 'Samsung Galaxy S21', quantity: 1, price: 799 },
  { name: 'AirPods Pro', quantity: 3, price: 249 },
  { name: 'Nintendo Switch', quantity: 4, price: 299 },
  { name: 'Fitbit Charge 4', quantity: 2, price: 149 }
];

const totalPrice = products.reduce((accumulator, product) => {
  return accumulator + (product.quantity * product.price);
}, 0);

console.log(`Total Price: $${totalPrice}`);

و بهترین بخش؟ یک مقدار برمی گرداند، بنابراین می توانید آن را مستقیماً در هر جایی که می خواهید وصل کنید. برای هر نوع مشکلی، کد کمتر همیشه بهتر است.

پس اجازه دهید توضیح دهم که در آنجا چه اتفاقی افتاده است

متد Reduce() دارای دو پارامتر است:

• یک تابع تماس و
• یک مقدار اولیه

تابع callback یک انباشتگر و عنصر فعلی را می گیرد، سپس مقدار به روز شده انباشته را بر اساس عملیات تعبیه شده در آن برمی گرداند.

در حالی که مقدار اولیه (مقدار اولیه) نقطه شروع است.

• متد ()reduce روی هر عنصر در آرایه producta تکرار می شود.
• برای هر تکرار، عملیاتی را انجام می دهد که توسط تابع callback تعریف شده است.
• در هر تکرار، تابع callback قیمت و مقدار محصول را چند برابر می کند، سپس آن را به انباشته اضافه می کند.
• نتیجه جدید برگردانده می شود و به مقدار انباشت کننده برای تکرار بعدی تبدیل می شود.
• در نهایت، زمانی که متد ()reduce تکرار روی همه عناصر در آرایه محصولات به پایان می رسد، شی حاصل به متغیر totalPrice اختصاص داده می شود.

با تشکر فراوان از Web Dev Simplified که من را با این روش آشنا کرد. این حتی چگونه من داده ها را تجزیه کردم تا در پایگاه داده به عنوان Ngrams برای یک الگوریتم جستجوی فازی ذخیره شوند.

2. روش آرایه Includes().

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

به همین دلیل است که هنگام نوشتن Error Handler از آن برای رد کردن پیام های خطای Mongoose و Express استفاده می کنم. آنچه در زیر مشاهده می کنید یک خطای Mongoose پس از بررسی ناموفق اعتبار گذرواژه است.

در اینجا این است که چگونه آن را از انبوهی از پیام های خطا بیرون می آورم تا بتوان به درستی و مناسب با آن برخورد کرد.

//...preceding body of code removed for clarity

if (error.message.includes('Member validation failed')) {
        const pinPoint = Object.values(error.errors);
        console.log(pinPoint);
        pinPoint.forEach(({ properties }) => {
            errorObject[properties.path] = properties.message;
        })
    }

بلوک کد بالا بخشی از یک Error Handler است، بررسی می کند که آیا پیام خطا حاوی رشته “Member validation failed” است و کد موجود در دستور if را بر اساس نتیجه ارزیابی می کند.

3. روش آرایه Some() و Every().

هر دو دست به دست هم می دهند.

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

هر دو یک مقدار بولی (درست یا نادرست) برمی‌گردانند که نشان می‌دهد آیا شرط برقرار است یا خیر. اما متد some() به محض اینکه اولین عنصری را که شرط را برآورده می‌کند پیدا کند، تکرار را در آرایه متوقف می‌کند.

از طرف دیگر، متد Every() به محض اینکه اولین عنصری را که شرط را برآورده نمی‌کند پیدا کند، تکرار در آرایه را متوقف می‌کند. متد آرایه SOME را به عنوان یک عملگر OR و روش آرایه ()EVERY را به عنوان عملگر AND در نظر بگیرید و کلیک خواهد کرد.

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

const numbers = [1, 2, 3, 4, 5];

const allPositive = numbers.every(number => number > 0);

const isOneElementEven = numbers.some(number => number % 2 == 0);
const areAllElementsEven = numbers.every(number => number % 2 == 0);

console.log(allPositive); // Output: true
console.log(isOneElementEven); //Output: true
console.log(areAllElementsEven); //Output: false

4. متد آرایه Find().

متد Find() مشابه متد Includes() عمل می کند. اما بر خلاف متد Includes که یک Boolean برمی‌گرداند، متد Find() اولین عنصری را که شرایط جستجو را تأیید می‌کند و زمانی که هیچکدام را پیدا نکرد، «Undefined» را برمی‌گرداند.

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

const foundFruit = fruits.find(fruit => fruit === 'banana');
const containsFruit = fruits.includes('banana')

console.log(foundFruit); // Output: 'banana'
console.log(containsFruit); // Output: 'true'

دو، Find() تابع callback می گیرد در حالی که متد Include () هیچ کدام را نمی گیرد. به همین دلیل است که گفتم متد Include() برای جستجوهای ساده به خوبی کار می کند اما در پرس و جوهای پیچیده شکست خواهد خورد.

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const foundUser = users.find(user => user.id === 2);

console.log(foundUser);

از سوی دیگر، متد include() برای این کار مناسب نیست زیرا یک بررسی تساوی ساده را انجام می دهد و راهی برای بازیابی شی منطبق ارائه نمی دهد. فقط می تواند تعیین کند که آیا یک مقدار خاص در یک آرایه وجود دارد یا خیر، اما دسترسی به خود عنصر تطبیق را فراهم نمی کند.

بنابراین، اگر نیاز به یافتن و بازیابی یک شی خاص از یک آرایه بر اساس یک شرط دارید، متد find() انتخاب مناسبی نسبت به include() است.

چند نکته پایانی

1. اکثر روش های آرایه غیر مخرب هستند.

این بدان معناست که تمام روش‌های برجسته شده در بالا، آرایه زیرینی را که روی آن کار می‌کنید تغییر نمی‌دهند. به عبارت دیگر غیر قابل تخریب هستند.

2. اکثر روش های آرایه کاملاً مشابه هستند، اما هر کدام اهداف متمایزی دارند.

عملگر forEach و عملگر Map مشابه هستند. در حالی که Map یک مقدار برمی گرداند، forEach این کار را نمی کند.

3. اکثر روش های آرایه یک تابع پاسخ به تماس را می گیرند.

forEach()، map() و filter()، همگی برای انجام عملیات خود به یک تابع callback نیاز دارند. این ویژگی باعث می شود که آنها به عنوان روش های آرایه مرتبه بالاتر شناخته شوند.

این باباتونده کوکی بود که به من اشاره کرد.

تابع callback ارسال شده به این متدها به ما امکان می دهد منطق یا عملیات خاصی را که می خواهیم روی هر عنصر آرایه انجام دهیم، تعریف کنیم.

این مقاله درباره freecodecamp مقدمه خوبی برای توابع مرتبه بالاتر است.

جاوا اسکریپت روش های آرایه ای متعددی دارد.

ما شیفت، unshift، پاپ و غیره را داریم اما نمی توانم در مورد آنها صحبت کنم زیرا به سختی از آنها استفاده کرده ام. در عوض، من شما را به کسی هدایت می کنم که دارد.

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