سرور مجازی NVMe

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

JavaScript (JS)برنامه نویسی

توسط مهران در دی ۲۲, ۱۴۰۲

دریافت نام از آدرس ایمیل با جاوا اسکریپت

سرفصلهای مطلب

زمان لازم برای مطالعه: 8 دقیقه

معرفی

فیلتر کردن اطلاعات یکی از مهمترین کارهایی است که ما از اتوماسیون/کامپیوتر برای آن استفاده می کنیم! اگر بخواهیم همه چیز را به صورت دستی غربال کنیم، کامپیوترها و نرم افزارها تقریباً به این اندازه مفید نخواهند بود. با توسعه – فیلتر کردن داده ها برای کاربران نهایی یک کار رایج است که به کاربران امکان می دهد فضای جستجو را به سطح قابل مدیریت محدود کنند. جاوا اسکریپت پیشروترین زبان فرانت‌اند در جهان است و اولین زبانی است که کاربران نهایی می‌بینند. نیازی به گفتن نیست که اهمیت فیلتر کردن با استفاده از جاوا اسکریپت را نمی توان نادیده گرفت.

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

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

در این راهنما، روش کار با جاوا اسکریپت را بررسی می کنیم filter() روش. ابتدا با متد، نحو و آرگومان های آن آشنا می شویم. سپس، از چندین دست عبور می کنیم -روی نمونه کارهایی که به راحتی با روش حل می شوند. در نهایت – ما آن را با یک روش جایگزین مقایسه می کنیم – find() و عملکرد آنها را ارزیابی کنند.

نحو و مقادیر پارامتر

نحو ساده است:

const filteredArray = oldArray.filter(callbackFn(element, index, array), context)

این callbackFn می تواند واقعاً هر تابع/گزاره/معیار دلخواه باشد، تا زمانی که یک مقدار بولی را برمی گرداند. روی ارزش element. از نظر فنی، لازم نیست از آن استفاده کند element در محاسباتش اصلاً، اما به احتمال زیاد این تابع فیلترینگ چندان مفیدی نخواهد بود.

این index و array اختیاری هستند و به احتمال زیاد نیازی به استفاده از آن ندارید array در عمل index شاخص مورد فعلی است و array یک اشاره گر به آرایه اصلی است.

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

چگونه جاوا اسکریپت فیلتر() آثار

بیایید نگاهی به filter() روش در عمل در نسخه های قبلی JS، قبل از ES6 – یک تابع callback به صورت زیر استفاده می شود:

const numbers = (20, 40, 17, 99, 59, 77);
const filteredNumbers = numbers.filter(function (number) {
    return number > 20;
});
  
console.log(filteredNumbers); // (40,99,59,77)

از ES6، می توانیم این را به عنوان یک ساده سازی کنیم تابع فلش:

const numbers = (20, 40, 17, 99, 59, 77);
const filteredNumbers = numbers.filter((number) => {
    return number > 20;
});
  
console.log(filteredNumbers); // (40,99,59,77)

یا می‌توانید تابع را به شکل زیر جمع کنید:

const numbers = (20, 40, 17, 99, 59, 77);
const filteredNumbers = numbers.filter((number) => number > 20);
console.log(filteredNumbers); // (40,99,59,77)

روش استفاده از متن نوشته شیء با فیلتر()

این filter() روش می تواند اضافی، اختیاری، context هدف – شی:

filter(callbackfn, contextobj);

شی را می توان با استفاده از this کلمه کلیدی از درون پاسخ تماس، و context نشان دهنده هر چیزی است که ما به عنوان آن عبور می کنیم زمینه برای فیلتر بیایید به یک مثال نگاه کنیم!

ما یک را مرتب می کنیم menu فهرست، حذف هر اقلام با قیمت‌هایی که بین 15 تا 25 نیست. محدوده قیمت یک شی جداگانه است که ما آن را به filter() به عنوان متن نوشته. به یک معنا – معمولاً برای تعریف یک شی “پیکربندی” استفاده می شود که حاوی مقادیری است که می توانیم به طور کلی به آنها دسترسی داشته باشیم، بدون اینکه آنها را سخت کدگذاری کنیم:

const menu = (
    {
        name: "buttermilk pancakes",
        price: 15.99
    },
    {
        name: "diner double",
        price: 13.99
    },
    {
        name: "godzilla milkshake",
        price: 6.99
    },
    {
        name: "country delight",
        price: 20.99
    },
    {
        name: "egg attack",
        price: 22.99
    }
);
  
let priceRange = {
    lower: 15,
    upper: 25
};

حالا وقته filter() را menu لیست، عبور در priceRange به عنوان context:

let filteredMenu = menu.filter(function (menu) {
    return menu.price >= this.lower && menu.price <= this.upper;
}, priceRange);
  
console.log(filteredMenu);

این منجر به:

(
    {
        name:"buttermilk pancakes",
        price:15.99
    },
    {
        name:"country delight",
        price:20.99
    },
    {
        name:"egg attack",
        price:22.99
    }
)

روش استفاده از فهرست مطالب پارامتر

این index می توان برای ارزیابی موقعیت یک عنصر در آرایه اصلی استفاده کرد. به عنوان مثال، می توانیم با موقعیت عناصر فیلتر کنیم:

const users = ("John", "Doe", "Stephen", "Matt", "Abigail", "Susu");
  
const topThree = users.filter((element, index) => {
    return index <= 2;
});

console.log(topThree); // ("John", "Doe", "Stephen")

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

پیشنهاد می‌کنیم بخوانید: توابع لامبدا در پایتون – روش استفاده از لامبدا با نقشه، فیلتر و کاهش

روش استفاده از آرایه پارامتر

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

const competitors = ("John", "Doe", "Stephen", "Matt", "Abigail", "Susu");
  
function selectWinners(name, index, array) {
   
    if (array.length > 3 && name.includes('a')) {
        return true;
    } else {
      return false;
    }
}
  
let lselectLoosers = competitors.filter((name, index, array) =>
    selectWinners(name, index, array)
);

console.log(lselectLoosers); // ("Matt", "Abigail", "Susu")

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

const halfArray = function (element, index, array) {
    const half = Math.floor(array.length / 2);
    return index < half;
};

اکنون می توانیم با استفاده از فیلتر کنیم halfArray:

const names = ("John", "Doe", "Stephen", "Matt", "Abigail", "Susu");
const halfNames = names.filter(halfArray);
console.log(halfNames); // ("John", "Doe", "Stephen")

به طور خلاصه – filter() متد یک تابع محمول را می پذیرد که در برابر هر عنصر آرایه اجرا می شود. مستقر روی مقدار بازگشتی بولی، the element یا در یک آرایه خروجی جدید قرار می گیرد یا قرار نمی گیرد.

در پایان تکرار – فقط آرایه جدید به دست آمده برگردانده می شود که با معیارهای تعریف شده در تابع محمول فیلتر می شود. آ context شیء را می توان وارد کرد، و اغلب برای تعریف یک شی “پیکربندی” استفاده می شود که مقادیر پویا مورد استفاده در طی فیلتر را ذخیره می کند. این index به موقعیت عنصر فعلی در آرایه اصلی اشاره دارد، و array ارجاع به آرایه اصلی است.

جاوا اسکریپت فیلتر() مثال ها

با مقدمه خارج از راه – اجازه دهید به چند نمونه عملی از آن شیرجه بزنیم filter() روش.

آرایه ای از اشیاء را بر اساس مقدار فیلتر کنید

فیلتر کردن آرایه ای از اشیا بر اساس مقداری که در آنها وجود دارد یکی از رایج ترین کاربردهای آن است filter() روش.

برخورد با آبجکت ها تفاوت چندانی با کار با انواع دیگر داده ها ندارد!

مثلاً بگوییم آرایه ای از داریم دانشجو اشیاء، با چند فیلد. بگویید همچنین می‌خواهید دانشجویانی را که در سال جاری فارغ‌التحصیل شده‌اند فیلتر کنید new Date().getFullYear().

شما به راحتی می توانید مقایسه کنید graduationYear از هر element به سال جاری:

const students = (
    { firstName: "John", lastName: "Doe", graduationYear : 2022 },
    { firstName: "Stephen", lastName: "Matt", graduationYear : 1402 },
    { firstName: "Abigail", lastName: "Susu", graduationYear : 2022 }
);

const currentYear = new Date().getFullYear();

let graduatingStudents = students.filter((element) => {
    if (element.graduationYear === currentYear) {
        return element;
    }
});
  
console.log(graduatingStudents);

این منجر به:

(
    {
        firstName:"John",
        lastName:"Doe",
        graduationYear:2022
    },
    {
        firstName:"Abigail",
        lastName:"Susu",
        graduationYear:2022
    }
)

فیلتر کردن اعداد اصلی با استفاده از فیلتر آرایه در جاوا اسکریپت

بیایید با یک تمرین ساده ادامه دهیم – فیلتر کردن اعداد اول! بیایید یک لیست با تعداد مجموعه ای از اعداد صحیح تعریف کنیم و سپس filter() آی تی:

const myArray = (-7, -5, -2, 2, 1, 3, 12, 14, 13, 15, 70, 17, 33, 25, 27, 30, 97);
      
const primeNumbers = myArray.filter((element) => {
    for (let i = 2; element > i; i++) {
        if (element % i === 0) {
          return false;
        }
    }
    return element > 1;
});
  
console.log(primeNumbers); // (2, 3, 13, 17, 97)

البته می توانید a را نیز تعریف کنید primeNumbers() تابع، که یک عنصر را می پذیرد و برمی گرداند true یا false مستقر روی آیا عنصر اول است یا خیر، و سپس از آن روش در filter() اگر چندین بار با آن تماس می گیرید تماس بگیرید:

const numbers = (-7, -5, -2, 2, 1, 3, 12, 14, 13, 15, 70, 17, 33, 25, 27, 30, 97);

function findPrimeNumbers(element) {
    for (let i = 2; element > i; i++) {
        if (element % i === 0) {
          return false;
        }
    }
    return element > 1;
}

console.log(numbers.filter(findPrimeNumbers)); // (2, 3, 13, 17, 97)

روش فیلتر کردن اعداد از یک آرایه

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

const isNumber = function (element) {
    return Number.isFinite(element);
};

اکنون می توانیم روش فیلتر خود را با تابع قابل استفاده مجدد فراخوانی کنیم:

const random = ('1', 'blue', 2, '-4', 0, true, -3.4 );
const numbers = random.filter(isNumber);
console.log(numbers); // (2, 0, -3.4)

روش بالا برای اعدادی که رشته های نمایش داده می شوند مفید نیست، بنابراین روش دیگر می تواند ابتدا تبدیل عنصر به عدد در صورت وجود باشد (parseFloat()) و مقدار تبدیل شده را با بررسی کنید Number.isFinite():

const isNumber = function (element) {
    return Number.isFinite(parseFloat(element));
};

const random = ('1', 'blue', 2, '-4', 0, true, -3.4 );
const numbers = random.filter(isNumber);        
console.log(numbers); // ("1", 2, "-4", 0, -3.4)

فیلتر() در مقابل پیدا کردن() روش های آرایه

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

filter() فهرستی از تمام عناصری که گزاره را “گذرانده اند” برمی گرداند
find() اولین مفعولی را که گزاره را “گذرانده” برمی گرداند

پیشنهاد می‌کنیم بخوانید: روش نصب Tomcat 9 در CentOS 8

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

  const menu = (
    {
      name: "buttermilk pancakes",
      category: "breakfast",
      price: 15.99,
      status: "available"
    },
    {
      name: "diner double",
      category: "lunch",
      price: 13.99,
      status: "available"
    },
    {
      name: "godzilla milkshake",
      category: "shakes",
      price: 6.99,
      status: "available"
    },
    {
      name: "country delight",
      category: "breakfast",
      price: 20.99,
      status: "86"
    },
    {
      name: "egg attack",
      category: "lunch",
      price: 22.99,
      status: "available"
    }
  );

ساعت 8 صبح است و رستوران فقط تا ساعت 10 صبحانه سرو می کند. می‌خواهید موارد غیر صبحانه را فیلتر کنید:

let breakfastMenu = menu.filter((menu) => menu.category === "breakfast");  
console.log(breakfastMenu);

این منجر به:

(
    {
        name:"buttermilk pancakes",
        category:"breakfast",
        price:15.99,
        status:"available"
    },
    {
        name:"country delight",
        category:"breakfast",
        price:20.99,
        status:"86"
    }
)

حالا بگویید کسی به دنبال سفارش است “شادی کشور”. فهرست فرعی آنقدر کوتاه است که بتوانیم متوجه شویم که 86 است، اما با لیست‌های طولانی‌تر – ممکن است بخواهیم بررسی کنیم که آیا این مورد، زمانی که یافت شد، موجود است یا خیر:

const delight = menu.find((menu) => menu.name === "country delight");

if (delight.status !== "86") {
    console.log('Available!');
} else {
    console.log('Sorry, the item is not available :(');
}

این منجر به:

Sorry, the item is not available :(

استفاده کردن فیلتر() با نقشه ()

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

const students = (
    { firstName: "John", lastName: "Doe", graduationYear: 2022 },
    { firstName: "Stephen", lastName: "Matt", graduationYear: 1402 },
    { firstName: "Abigail", lastName: "Susu", graduationYear: 2022 }
);
  
let graduatingStudents = students
    .filter((element) => element.grduationYear === new Date().getFullYear())
    .map((item) => {
      return `${item.firstName} ${item.lastName}`;
});
  
console.log(graduatingStudents); // ("John Doe", "Abigail Susu")

استفاده کردن فیلتر() با indexOf()

این indexOf() روش را می توان برای بررسی اینکه آیا یک رشته با یک رشته فرعی شروع می شود یا نه و به طور مشروط عناصر را بر اساس برگرداند روی چه انجام دهند چه نکنند. برای مثال، می‌توانیم فهرستی از دوره‌های علوم را بر اساس فیلتر کنیم روی آیا آنها با شروع “mth”، به این معنی است که آن ها هستند دروس ریاضی:

let sciCourses = ("Mth101", "Chm201", "Bio301", "Mth203", "Mth205");
function checkCourses(courseArray, searchText) {
    return courseArray.filter(function (item) {
        return item.toLowerCase().indexOf(searchText.toLowerCase()) !== -1;
    });
}
console.log(checkCourses(sciCourses, "mth")); // ("Mth101", "Mth203", "Mth205")

توجه داشته باشید: باز هم از زمانی که filter() متد آرایه اصلی را تغییر نمی دهد، باید آرایه فیلتر شده را ذخیره کنیم تا بعداً با آن کار کنیم.

نتیجه

در این راهنما، نگاهی به روش جاوا اسکریپت انداخته ایم filter() روش کار می کند، و چگونه می توانیم از آن برای فیلتر کردن عناصر یک آرایه، با توجه به یک محمول/معیارهای فیلتر خاص استفاده کنیم. ما نگاهی به استدلال های همراه انداخته ایم، مانند context، index و array که به شما امکان می دهد منطق محمول را تغییر دهید.

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

منتشر شده در 1403-01-12 04:20:18

امتیاز شما به این مطلب