از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
روش حذف موارد تکراری از یک آرایه در جاوا اسکریپت هنگام مصرف API یا بازیابی داده ها از یک آرایه، ممکن است با داده هایی روبرو شوید که تکرار می شوند، اما فقط می خواهید مقادیر منحصر به فرد را انتخاب کنید. برای مثال، فرض کنید که آرایه ای دارید که منوی رستوران را نشان می دهد، همانطور که در زیر نشان داده شده است. ممکن است لازم باشد دسته های موجود را از آن آرایه بازیابی کنید -…
سرفصلهای مطلب
معرفی
هنگام مصرف API یا بازیابی داده ها از یک آرایه، ممکن است با داده هایی روبرو شوید که تکرار می شوند، اما فقط می خواهید مقادیر منحصر به فرد را انتخاب کنید.
برای مثال، فرض کنید که آرایه ای دارید که منوی رستوران را نشان می دهد، همانطور که در زیر نشان داده شده است. ممکن است لازم باشد دستههای موجود را از آن آرایه بازیابی کنید – در این صورت، باید از طریق آرایه فیلتر کنید تا دستهها را فقط یک بار دریافت کنید و از تکراری شدن اجتناب کنید:
const menu = (
{
name: "buttermilk pancakes",
category: "breakfast"
},
{
name: "diner double",
category: "lunch"
},
{
name: "godzilla milkshake",
category: "dinner"
},
{
name: "country delight",
category: "breakfast"
},
{
name: "egg attack",
category: "lunch"
}
);
در این مقاله، روش حذف موارد تکراری از یک آرایه در جاوا اسکریپت را یاد می گیریم و اساساً آرایه ای از مقادیر منحصر به فرد ایجاد می کنیم. ما چندین روش مختلف را بررسی خواهیم کرد تا بتوانید بهترین روش را برای پروژه خود انتخاب کنید.
بهترین راه حل: استفاده از تنظیم() سازنده
آ تنظیم مجموعه ای از اقلام است که منحصر به فرد هستند، به این معنی که هیچ عنصری قابل تکرار نیست. فرض کنید یک آرایه از موضوعات مدرسه داریم و میخواهیم همه موارد تکراری را از آن حذف کنیم:
let subjects = ("mathematics", "french", "english", "french", "mathematics");
جاوا اسکریپت یک سازنده مفید برای ایجاد مجموعه ها در اختیار ما قرار می دهد – Set()
. می تواند یک آرایه را به عنوان آرگومان خود بپذیرد. در این صورت، مجموعه ای ایجاد می کند و آن را با مقادیر منحصر به فرد از آرایه ارسال شده پر می کند. مشکل این رویکرد این است که الف Set()
سازنده یک مجموعه را ایجاد می کند، نه یک آرایه (که ما به آن نیاز داریم).
ما با استفاده از رفتار نامطلوب را دور خواهیم زد اپراتور گسترش – همچنین به عنوان شناخته شده است عملگر سه نقطه (...
). هنگامی که با یک مجموعه (تولید شده با a Set()
سازنده)، عملگر spread می تواند مقادیر مجموعه را در یک آرایه پخش کند:
let uniqueSubjects = (...new Set(subjects));
console.log(uniqueSubjects); // ("mathematics", "french", "english")
ما همچنین می توانیم این کار را برای یک آرایه ای از اشیاء، بیایید آن را نشان دهیم روی مثال از menu
آرایه:
let categories = (...new Set( menu.map((menu) => menu.category)));
console.log(categories); // ("breakfast","lunch","dinner")
توجه داشته باشید: حذف موارد تکراری از یک آرایه با استفاده از Set()
سازنده زمان خطی می گیرد – O(n)
(n
تعداد عناصر موجود در آرایه اصلی است). تمام روش های دیگر برای حذف موارد تکراری انجام می شود O(n²)
زمان. بنابراین، ما به شما توصیه می کنیم که از آن استفاده کنید Set()
سازنده در هر صورت ممکن است.
با استفاده از فیلتر() و indexOf() مواد و روش ها
را filter()
روش برای حلقه زدن از طریق یک آرایه و برگرداندن یک آرایه جدید متشکل از عناصری که معیارهای داده شده را دارند استفاده می شود، در حالی که indexOf()
روش برای برگرداندن شاخص اولین رخداد عنصر در آرایه استفاده می شود.
به عنوان مثال، فرض کنید آرایه ای از موضوعات داریم و می خواهیم شاخص هر عنصر را بررسی کنیم:
let subjects = ("mathematics", "french", "english", "french", "mathematics");
let subjectsIndex = ();
subjects.map((subject) => {
subjectsIndex.push(subjects.indexOf(subject));
});
console.log(subjectsIndex); // (0,1,2,1,0)
زیرا می دانیم که روش فیلتر یک آرایه جدید بر اساس برمی گرداند روی معیارهای داده شده، اکنون میتوانیم از آن استفاده کنیم تا فقط عناصری را که نمایههایشان مطابقت دارند، در بر بگیرد indexOf()
ارزش های:
let subjects = ("mathematics", "french", "english", "french", "mathematics");
let uniqueSubjects = subjects.filter((subject, index) => {
return subjects.indexOf(subject) === index;
});
console.log(uniqueSubjects); // ("mathematics","french","english")
فرض کنید می خواهیم از آن استفاده کنیم menu
آرایه، ابتدا باید از طریق آرایه حلقه بزنیم تا دسته بندی ها را در یک آرایه جدید ذخیره کنیم، سپس از filter()
و indexOf()
روش:
let categoriesArray = menu.map((menu)=>menu.category)
let uniqueCategories = categoriesArray.filter((category, index) => {
return categoriesArray.indexOf(category) === index;
});
console.log(uniqueCategories); // ("breakfast","lunch","dinner")
اگر می خواهید در مورد آن بیشتر بخوانید
filter()
روش – راهنمای ما به روش filter() جاوا اسکریپت را بخوانید!
استفاده کردن کاهش دادن() و شامل می شود() مواد و روش ها
درک کاهش همیشه کمی دشوارتر است، اما یک عملیات کاهش بسیار قدرتمند را انجام میدهد که از برنامهنویسی کاربردی وام گرفته شده است. را reduce()
این روش برای کاهش عناصر آرایه و ترکیب آنها در یک آرایه نهایی استفاده می شود روی برخی از تابع کاهش است که شما در عبور، در حالی که includes()
متد اگر عنصری در آرایه باشد true و در غیر این صورت false را برمی گرداند.
مثال زیر روی عناصر یک آرایه تکرار می شود و بررسی می کند که آیا عنصر خاصی در نتیجه وجود دارد یا خیر، در غیر این صورت آن را اضافه می کنیم:
let subjects = ("mathematics", "french", "english", "french", "mathematics");
let uniqueSubjects = subjects.reduce((result, subject) => {
return result.includes(subject) ? result : (...result, subject);
}, ());
console.log(uniqueSubjects); // ("mathematics","french","english")
فرض کنید میخواهیم از آرایه منو استفاده کنیم، ابتدا باید در آرایه حلقه بزنیم تا دستهها را در یک آرایه ذخیره کنیم، سپس از آرایه استفاده کنیم. reduce()
و includes()
روش همانطور که قبلا توضیح داده شد:
let categoriesArray = menu.map((menu)=>menu.category)
let uniqueCategories = categoriesArray.reduce((result, category) => {
return result.includes(category) ? result : (...result, category);
}, ());
console.log(uniqueCategories); // ("breakfast","lunch","dinner")
توجه داشته باشید: توجه داشته باشید که چگونه در این بخش از عملگر spread نیز استفاده کرده ایم.
با استفاده از برای هر() و شامل می شود() مواد و روش ها
این کار تقریباً مانند استفاده از filter()
و includes()
مواد و روش ها. ما به سادگی از forEach()
روشی برای تکرار از طریق آرایه و سپس اضافه کردن عناصری که قبلاً وجود ندارند به یک آرایه جدید:
let subjects = ("mathematics", "french", "english", "french", "mathematics");
let uniqueSubjects = ();
subjects.forEach((subject) => {
if (!uniqueSubjects.includes(subject)) {
uniqueSubjects.push(subject);
}
});
console.log(uniqueSubjects); // ("mathematics","french","english")
فرض کنید می خواهیم از آن استفاده کنیم menu
آرایه، ابتدا باید از طریق آرایه حلقه بزنیم تا دسته بندی ها را در یک آرایه ذخیره کنیم، سپس از forEach()
و includes()
روش همانطور که قبلا توضیح داده شد:
let categoriesArray = menu.map((menu)=>menu.category)
let uniqueCategories = ();
categoriesArray.forEach((category) => {
if (!uniqueCategories.includes(category)) {
uniqueCategories.push(category);
}
});
console.log(uniqueCategories); // ("breakfast","lunch","dinner")
نتیجه
ما چهار روش مختلف برای حذف موارد تکراری از یک آرایه را در این مقاله دیدیم. معرفی Set()
در ES6 این کار را بسیار ساده تر و کارآمدتر کرد. حذف موارد تکراری از آرایه با استفاده از Set()
سازنده زمان خطی می گیرد – O(n)
(n
تعداد عناصر موجود در آرایه اصلی است). تمام روش های دیگر برای حذف موارد تکراری انجام می شود O(n²)
زمان. بنابراین، ما به شما توصیه می کنیم که از آن استفاده کنید Set()
سازنده در هر صورت ممکن است.
منتشر شده در 1403-01-09 21:53:04