متدهای آرایه و آبجکت پرکاربرد JavaScript

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

تمام متدها در این مقاله قابل زنجیر کردن هستند؛ یعنی این که می‌توانند در ترکیباتی با یکدیگر استفاده شوند، و همچنین داده‌ها را تغییر نمی‌دهند، که در کار با React بسیار مهم است. با داشتن این متدهای آرایه و آبجکت، دیگر نیازی به استفاده از حلقه‌های for یا while نخواهید داشت.

.filter()

یک آرایه جدید بر پایه این که آیتم‌های آرایه شرط خاصی را منتقل می‌کنند یا نه، می‌سازد.

مثال

ساخت آرایه‌ای از دانش‌آموزان، که سنی میان ۱۹ تا ۲۱ دارند:

const studentsAge = [17, 16, 18, 19, 21, 17];
const ableToDrink = studentsAge.filter( age => age > 18 );
// ableToDrink will be equal to [19, 21]

.map()

با دستکاری مقادیر در یک آرایه، یک آرایه جدید می‌سازد. این مورد برای دستکاری داده‌ها عالی است و معمولا در React استفاده می‌شود؛ زیرا یک متد تغییر ناپذیر است.

مثال

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

const numbers = [2, 3, 4, 5];
const dollars = numbers.map( number => '$' + number);

// ['$2', '$3', '$4', '$5']

.reduce()

این متد که معمولا نادیده گرفته می‌شود، از یک محفظه برای کاهش دادن تمام آیتم‌های موجود در یک آرایه، به یک مقدار تکی استفاده می‌کند. این مورد برای محاسبه جمع‌های کلی عالی است. مقدار برگردانده شده می‌تواند از هر نوعی باشد. (مثلا آبجکت، آرایه، رشته، مقدار integer)

مثال

جمع کردن مقادیر integer داخل یک آرایه:

const numbers = [5, 10, 15];
const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue);

// نتیجه جمع برابر با ۳۰ خواهد بود

.forEach()

به تمام آیتم‌های موجود در یک آرایه، تابعی را اعمال می‌کند.

مثال

لاگ کردن تمام آیتم‌های درون یک آرایه:

const emotions = ['happy', 'sad', 'angry'];
emotions.forEach( emotion => console.log(emotion) );

// این موارد لاگ خواهند شد:
// 'happy'
// 'sad'
// 'angry'

.some()

بررسی می‌کند تا ببیند که آیا آیتمی داخل یک آرایه از شرط مورد نظر پیروی می‌کند یا نه. یکی از موارد خوب استفاده از آن، بررسی مجوزهای کاربر است. همچنین می‌تواند مشابه به .forEach() استفاده شود که در آن یک action را به تمام آیتم‌های آرایه اعمال می‌کنید، و وقتی که مقدار truthy برگردانده می‌شود، حلقه را می‌شکنید.

مثال

بررسی کن که حداقل یک admin داخل آرایه وجود دارد، یا نه:

const userPrivileges = ['user', 'user', 'user', 'admin'];
const containsAdmin = userPrivileges.some( element => element === 'admin');

.every()

مشابه به .some()، اما بررسی می‌کند تا ببیند که آیا تمام آیتم‌ها از شرط مورد نظر پیروی می‌کنند یا نه.

مثال

بررسی کن که آیا تمام امتیازها از ۳ ستاره بیشتر هستند یا نه:

const ratings = [3, 5, 4, 3, 5];
const goodOverallRating = ratings.every( rating => rating >= 3 );

.includes()

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

مثال

بررسی کن که آیا یک آرایه، آیتمی دارد که شامل رشته «waldo» باشد یا خیر:

const names = ['sophie', 'george', 'waldo', 'stephen', 'henry'];
const includesWaldo = names.includes('waldo');

Array.from()

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

مثال

از یک رشته، یک آرایه بساز:

const newArray = Array.from('hello');

// ['h', 'e', 'l', 'l', 'o']

آرایه‌ای بساز که به اضای مقدار هر آیتم، در یک آرایه دیگر دو برابر آن مقدار را قرار می‌دهد:

const doubledValues = Array.from([2, 4, 6], number => number * 2);

// [4, 8, 12]

Object.values()

آرایه‌ای از مقادیر یک آبجکت را بر می‌گرداند.مثال

const icecreamColors = {
    chocolate: 'brown',
    vanilla: 'white',
    strawberry: 'red',
}

const colors = Object.values(icecreamColors);

// ["brown", "white", "red"]

Object.keys()

آرایه‌ای از کلیدهای یک آبجکت را بر می‌گرداند.

مثال

const icecreamColors = {
  chocolate: 'brown',
  vanilla: 'white',
  strawberry: 'red',
}

const types = Object.keys(icecreamColors);

// ["chocolate", "vanilla", "strawberry"]

Object.entries()

آرایه‌ای می‌سازد که شامل آرایه‌ای از جفت‌های کلید / مقدار از یک آبجکت است.

مثال

const weather = {
  rain: 0,
  temperature: 24,
  humidity: 33,
}

const entries = Object.entries(weather);

// ورودی‌ها برابر با این موارد خواهند بود:
// [['rain', 0], ['temperature', 24], ['humidity', 33]]

Array spread

پخش کردن آرایه‌ها با استفاده از عملگر spread (...) شما را قادر می‌سازد تا عناصر را در یک آرایه گسترش دهید. این مورد در هنگام پیوند دادن مجموعه‌ای از آرایه‌ها، پر کاربرد است. همچنین راه خوبی برای جلوگیری از استفاده از متد splice()، هنگامی که می‌خواهید یک عنصر خاص را از یک آرایه حذف کنید است؛ زیرا می‌تواند با متد slice() ترکیب شود، تا از تغییر مستقیم یک آرایه جلوگیری کند.

مثال

ترکیب دو آرایه:

const spreadableOne = [1, 2, 3, 4];
const spreadableTwo = [5, 6, 7, 8];

const combined = [...spreadableOne, ...spreadableTwo];

// [1, 2, 3, 4, 5, 6, 7, 8]

حذف یک عنصر آرایه بدون تغییر دادن آرایه اصلی:

const animals = ['squirrel', 'bear', 'deer', 'salmon', 'rat'];
const mammals = [...animals.slice(0,3), ...animals.slice(4)];

// ['squirrel', 'bear', 'deer', 'rat']

Object spread

پخش کردن یک آبجکت، اضافه کردن ویژگی‌ها و مقادیر جدید به یک آبجکت را بدون تغییر آن ممکن می‌سازد، (یا به عبارتی یک آبجکت جدید می‌سازد) و می‌تواند برای ترکیب چندین آبجکت با هم استفاده شود. دقت کنید که پخش کردن آبجکت‌ها، هیچ کپی تو در تویی انجام نمی‌دهد.

مثال

بدون تغییر دادن آبجکت اصلی، یک ویژگی و مقدار آبجکت جدید اضافه کن:

const spreadableObject = {
  name: 'Robert',
  phone: 'iPhone'
};

const newObject = {
  ...spreadableObject,
  carModel: 'Volkswagen'
}

// آبجکت بعدی، برابر با مورد زیر خواهد بود:
// { carModel: 'Volkswagen', name: 'Robert', phone: 'iPhone' }

Function Rest

توابع می‌توانند از سینتکس پارامترهای nest برای تقبل تعدادی آرگومان به عنوان یک آرایه استفاده کنند.

مثال

نمایش آرایه آرگومان‌های منتقل شده:

function displayArgumentsArray(...theArguments) {
  console.log(theArguments);
}

displayArgumentsArray('hi', 'there', 'bud');

// این عبارات چاپ خواهند شد ['hi', 'there', 'bud']

Object.freeze()

از تغییر ویژگی آبجکت‌های موجود یا اضافه کردن ویژگی‌ها و مقادیر جدید به یک آبجکت، جلوگیری می‌کند.

مثال

یک آبجکت را قفل کن، تا ویژگی name تغییر نکند:

const frozenObject = {
  name: 'Robert'
}

Object.freeze(frozenObject);

frozenObject.name = 'Henry';

// { name: 'Robert' }

Object.seal()

از اضافه شدن هر ویژگی جدیدی به یک آبجکت جلوگیری می‌کند، اما همچنان اجازه تغییر کردن به ویژگی‌های موجود را می‌دهد.

مثال

یک آبجکت را قفل کن تا ویژگی‌ wearsWatch به آن اضافه نشود:

const sealedObject = {
  name: 'Robert'
}

Object.seal(sealedObject);

sealedObject.name = 'Bob';
sealedObject.wearsWatch = true;

// { name: 'Bob' }

Object.assign()

آبجکت‌ها را قادر می‌سازد تا با یکدیگر ترکیب شوند. این متد آنچنان ضروری نیست؛ زیرا در عوض می‌توانید از سینتکس object spread استفاده کنید. به مانند عملگر object spread، Object.assign() هیچ کپی‌ای انجام نمی‌دهد. اگر به کپی کردن آبجکت‌ها برسید، کتابخانه Lodash دوست شما خواهد بود.

مثال

دو آبجکت را با هم ترکیب کن:

const firstObject = {
  firstName: 'Robert'
}

const secondObject = {
  lastName: 'Cooper'
}

const combinedObject = Object.assign(firstObject, secondObject);
// { firstName: 'Robert', lastName: 'Cooper' }

منبع