یاد بگیرید که چگونه یک شی آرایه تو در تو را با استفاده از تابع نقشه جاوا اسکریپت حل کنید.
بیشتر برنامه‌های کاربردی مدرن، داده‌های خارجی سایر برنامه‌ها و ابزارها را از طریق APIها مصرف می‌کنند. این داده ها در انواع طرحواره ها وجود دارد و این شما هستید که باید آن را تجزیه کنید تا زمانی که به آنچه می خواهید استفاده کنید، برسید. در میان این طرحواره ها، اشیاء داده ای هستند که حاوی آرایه های تو در تو هستند. ارائه این نوع داده ها می تواند چالش برانگیز باشد. این مقاله به شما می آموزد که چگونه روی یک آرایه تودرتو در یک جزء React نقشه برداری کنید.
با استفاده از تابع نقشه
تابع نقشه روی آیتم های یک آرایه مشخص حلقه می زند و دستور یا کد مشخص شده را برای هر یک برمی گرداند.
برای یک آرایه مسطح، تابع نقشه به صورت زیر عمل می کند:
const arr = ['a', 'b', 'c'];
const result1 = arr.map(element => {
return element;
});
در React، باید تابع نقشه را با براکت های فرفری بپیچید و از یک تابع پیکان برای برگرداندن یک عنصر گره برای هر تکرار استفاده کنید. آیتم های موجود در آرایه مسطح بالا را می توان به عنوان عناصر JSX مانند زیر ارائه کرد:
const arr = ['a', 'b', 'c'];
function App () {
return (
<>
{arr.map((item, index) => {
<span key={index}>{a}</span>
})}
</>
)
}
توجه داشته باشید که به هر عنصری که تابع نقشه برمی گرداند یک کلید اختصاص می دهید. این به React کمک می کند مواردی را که تغییر یا حذف شده اند شناسایی کند. این در طول فرآیند آشتی مهم است.
نگاشت روی یک آرایه تودرتو در یک React Component
یک آرایه تو در تو شبیه آرایه ای است که حاوی آرایه دیگری است. به عنوان مثال، آرایه دستور زیر حاوی یک شی با یک آرایه است.
const recipes = [
{
id: 716429,
title: "Pasta with Garlic, Scallions, Cauliflower & Breadcrumbs",
image: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
dishTypes: [
"lunch",
"main course",
"main dish",
"dinner"
],
recipe: {
// recipe data
}
}
]
برای داده هایی مانند این با آرایه های تو در تو، باید از یک تابع نقشه برای هر آرایه استفاده کنید.
در این مثال، روی آرایه داده مانند شکل زیر نقشه می‌گیرید:
export default function Recipes() {
return (
<div>
{recipes.map((recipe) => {
return <div key={recipe.id}>
<h1>{recipe.title}</h1>
<img src={recipe.image} alt="recipe image" />
{recipe.dishTypes.map((type, index) => {
return <span key={index}>{type}</span>
})}
</div>
})}
</div>
)
}
مؤلفه Recipes عنصر div را که حاوی داده های دستور غذا برای هر دستور غذا در آرایه دستور العمل ها است، ارائه می کند.
کار با آرایه ها در جاوا اسکریپت
جاوا اسکریپت طیف گسترده ای از روش های آرایه را ارائه می دهد که کار با آرایه ها را ساده تر می کند. این مقاله نحوه ارائه داده ها از یک آرایه تودرتو با استفاده از روش آرایه نقشه را نشان می دهد. جدا از نقشه، روش هایی نیز وجود دارد که به شما کمک می کند داده ها را به یک آرایه منتقل کنید، دو آرایه را به هم متصل کنید یا حتی یک آرایه را مرتب کنید.