لطفا صبر کنید ...

استفاده از توابع مرتبه بالاتر (Higher Order) در جاوا اسکریپت

مریم مهربان

توسط مریم مهربان

دیدگاه ها: 0
بازدید ها : 148
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

در این مقاله از لیداوب قصد داریم ساختارهای حلقه و مرور داده‌ها را که در جاوا اسکریپت، توابع مرتبه بالاتر (Higher Order Functions) نامیده می‌شود، بررسی کنیم.


استفاده از حلقه‌ها و مرور داده‌های موجود در مجموعه‌ها، آرایه‌ها، بردارها و غیره در برنامه نویسی بسیار رایج است. در این ساختارها، ضمن مرور داده‌ها، برنامه نویس می‌تواند منطق موردنظر خود را بر داده‌ها اعمال کند. در ادامه مقاله، برای نمایش نحوه استفاده از ساختارها از آرایه‌های numbers (آرایه‌ای از اعداد) و companies (آرایه‌ای از اشیا) که به صورت زیر مقداردهی شدند، استفاده می‌کنیم.

 Array of objects
const companies = [
  { id: 1, name: "Square", sector: "Finance", founded: 2009 },
  { id: 2, name: "Disney", sector: "Media", founded: 1923 },
  { id: 3, name: "Ford", sector: "Auto", founded: 1903 },
  { id: 4, name: "Netflix", sector: "Media", founded: 1997 },
  { id: 5, name: "Apple", sector: "Technology", founded: 1976 },
  { id: 6, name: "Visa", sector: "Finance", founded: 1958 },
  { id: 7, name: "Tesla", sector: "Auto", founded: 2003 },
  { id: 8, name: "Microsoft", sector: "Technology", founded: 1975 },
  { id: 9, name: "Roku", sector: "Media", founded: 2002 }
];

//  Array of numbers
const numbers = [32, 15, 20, 16, 52, 54, 11, 49, 31, 19, 75, 42, 45, 68, 30];

تابع مرتبه بالاتر for در جاوا اسکریپت

ساختار پایه‌ای for ، اولین ساختار مورد بحث است که عملکرد آن کمی متفاوتر از سایر توابع مرتبه بالاتر است. در زیر از این ساختار برای مرور شرکت‌های موجود در آرایه companies و چاپ کردن نام آن‌ها استفاده شده است.

for (let i = 0; i < companies.length; i++) {
  output(companies[i].name);
}

تابع مرتبه بالاتر forEach در جاوا اسکریپت

می‌توانید از ساختار ForEach برای چاپ کردن نام شرکت‌ها و تولید خروجی بالا استفاده کرد.

companies.forEach(function(company) {
  output(company.name);
});

تابع مرتبه بالاتر For of در جاوا اسکریپت

ساختار for of با کلید واژه let همراه است که هر یک از عناصر آرایه را در یک پارامتر (پارامتر company در کد زیر) بارگذاری می‌کند و پس از آن می‌توانید با استفاده از این پارامتر به مقدار آن عنصر از آرایه دسترسی داشت:

for (let company of companies) {
  output(company.name);
}

تابع مرتبه بالاتر for in در جاوا اسکریپت

ساختار for in ، می‌تواند تمام زوج‌های کلید و مقدار ذخیره شده در یک شئ را مرور می‌کند. در کد زیر با استفاده از این ساختار، ویژگی‌های چهارمین شئ در آرایه شرکت‌ها چاپ می‌شود.

for (let property in companies[3]) {
  output(property + ": " + companies[3][property]);
}

 تابع مرتبه بالاتر filter در جاوا اسکریپت

تابع filter ، براساس یک شرط به زیرمجموعه‌ای از یک آرایه دسترسی پیدا می‌کند. از این تابع مرتبه بالاتر به وفور در کدهای React استفاده می‌شود. کد زیر، اعداد موجود در آرایه numbers را که کمتر از 20 است، چاپ می‌کند. پیش از معرفی تابع filter، برای دستیابی به این نتیجه از حلقه for  شبیه به زیر استفاده می‌شد:

let twenty = [];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] <= 20) {
    twenty.push(numbers[i]);
  }
}

اما همانگونه که گفته شد، برای این منظور می‌توان از تابع filter نیز استفاده کرد:

const twenty = numbers.filter(data => {
  if (data <= 20) {
    return true;
  }
});

به سادگی می‌توان کد بالا را در یک خط بازنویسی کرد:

 const twenty = numbers.filter(num => num <= 20);

در مثال زیر از تابع مرتبه بالاتر filter برای فهرست کردن نام شرکت‌های که در بخش مالی فعال هستند، استفاده شده است:

const financeCompanies = companies.filter(function(company) {
  if (company.sector === "Finance") {
    return true;
  }
});

financeCompanies.forEach(data => output(data.name));

در کد زیر، از تابع filter برای پیدا کردن شرکت‌هایی استفاده شده است که در دهه 1970 تاسیس شده است:

const seventiesCompanies = companies.filter(
  company => company.founded >= 1970 && company.founded < 1980
);

seventiesCompanies.forEach(company => output(company.name));

لازم به ذکر است که می‌توان هر نام دلخواهی را برای پارامتر این ساختار (در کد بالا، company ) تعریف کرد. برای مثال، کد زیر نتایجی شبیه به بالا خواهد داشت:

const seventiesCompanies = companies.filter(
  tomato => tomato.founded >= 1970 && tomato.founded < 1980
);

seventiesCompanies.forEach(cucumber => output(cucumber.name));

کد زیر، شرکت‌هایی را انتخاب می‌کند که 40 سال یا بیشتر، سابقه فعالیت دارند. این شرکت‌ها در خط اول کد انتخاب می‌شوند و در آرایه fortyYears نگهداری می‌شوند و سپس در خط بعدی کد با استفاده از ساختار forEach ، نام آنها چاپ می‌شود.

const fortyYears = companies.filter(company => 2019 - company.founded >= 40);

fortyYears.forEach(company => output(company.name));

تابع مرتبه بالاتر map در جاوا اسکریپت

این ساختار، تابعی را که برنامه نویس مشخص می‌کند، روی همه عناصر آرایه فراخوانی می‌کند و مقدار خروجی این تابع برای همه عنصرهای آرایه را در یک آرایه جدید نگهداری می‌کند. برای مثال، در کد زیر، خروجی تابع company.name (نام شرکت) برای هر یک از عناصر آرایه companies در آرایه‌ای به نام newArray ذخیره می‌شود.

const newArray = companies.map(company => company.name);

newArray.forEach(company => output(company));

تابع فراخوانی شده، می‌تواند هر تابع دلخواهی باشد. برای مثال، در کد زیر، برای هر شرکت به صورت پویا، شرحی تولید شده و در آرایه description ذخیره می‌شود.

const description = companies.map(
  company =>
    `${company.name} was founded in ${company.founded} and is in the  ${
      company.sector
    } business`
);

description.forEach(d => output(d));

در کد زیر، هر یک از عناصر آرایه numbers به توان دو می‌رسد و در آرایه جدید powerTwo ذخیره می‌شود.

const powerTwo = numbers.map(num => Math.pow(num, 2));

powerTwo.forEach(num => output(num));

 تابع مرتبه بالاتر sort در جاوا اسکریپت

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

const sortedCompanies = companies.sort(function(c1, c2) {
  if (c1.founded > c2.founded) {
    return 1;
  } else {
    return -1;
  }
});

خروجی بالا را می‌توانید با عملگرهای سه گانه هم تولید کنید:

const sortedCompanies = companies.sort((c1, c2) =>
  c1.founded > c2.founded ? 1 : -1
);

کد زیر، اعداد را از کوچکترین به بزرگترین مرتب می‌کند.

const sortInts = numbers.sort((a, b) => a - b);

sortInts.forEach(n => output(n))

تابع مرتبه بالاتر reduce در جاوا اسکریپت

این تابع، یک آرایه با تعداد زیادی از مقادیر را دریافت می‌کند و آن را به یک مقدار خروجی کاهش می‌دهد. برای مثال، در کد زیر از این تابع برای جمع کردن همه اعداد موجود در آرایه numbers استفاده شده است. این کار را می‌توانید با ساختار for انجام دهید:

let numSum = 0;
for (let i = 0; i < numbers.length; i++) {
  numSum += numbers[i];
}

output(numSum);

اما به جای for ، می‌توانید از راه حل ارزشمند   reduce  استفاده کرد:

const numSum = numbers.reduce((total, num) => total + num, 0);

در کد زیر، مجموع سابقه کار شرکت‌ها محاسبه می‌شود. این محاسبه در یک تابع انجام می‌شود که به عنوان یک ورودی به تابع reduce ارسال شده است.

const totalYears = companies.reduce(function(total, company) {
  return total + (2019 - company.founded);
}, 0);

output(totalYears);

بدون تعریف یک تابع مجزا نیز می‌توان خروجی بالا را با تابع reduce به دست آورد:

const totalYears = companies.reduce(
  (total, company) => total + (2019 - company.founded),
  0
);

یکی از نکات جالب توابع مرتبه بالاتر این است که می‌توانید آن‌ها را به صورت یک زنجیره دربیاورید و چندین عملیات را با آن‌ها انجام داد. در مثال زیر، آرایه numbers دریافت می‌شود و هر عنصر آن در عدد 3 ضرب می‌شود و سپس مقادیر بزرگتر از 70 انتخاب می‌شود و از کوچکتر به بزرگتر مرتب می‌شوند.

const combined = numbers
  .map(num => num * 3)
  .filter(num => num >= 70)
  .sort((a, b) => a - b);

combined.forEach(c => output(c));

مطالعه مقالات بیشتر در لیداوب:

  در این مقاله، توابع مرتبه بالاتر جاوا اسکریپت را که برای مرور داده‌های موجود در آرایه‌ها، مجموعه‌ها و غیره استفاده می‌شوند، صحبت کردیم. در مقالات آتی، سایر ویژگی‎ها و امکانات دیگر جاوا اسکریپت را با هم بررسی خواهیم کرد. پس با ادامه مقالات و دوره‌های تخصصی طراحی سایت ما در لیداوب همراه باشید.

منبع :

5 از 1 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند



متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین مطالب

آموزش در لیداوب

از مقالات و ویدیو های آموزشی خودتان کسب درآمد کنید!

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