JS | آرایه غیر متمایز: فیلتر ، نقشه ، برش ، Concat توضیح داده شده!

سلام دوستان توسعه دهنده همکار من ، امروز در مورد روشهای آرایه در مورد استروئیدها بحث خواهم کرد. شما باید کمربند ایمنی خود را دست و پنجه نرم کنید زیرا این سفر کمی طولانی خواهد بود.
- من ابتدا قطعه های کد خود را بر روی scribbler.live ایجاد می کنم ، که یک بستر خارق العاده است که به شما امکان می دهد بدون نیاز به تنظیم دستی ، یک نوت بوک JavaScript ، کامپایلر آنلاین و ویرایشگر را اجرا کنید.
- علاوه بر این ، من پیوندی به قطعه های کد را شامل می شوم که شامل تمام نمونه های کد است تا بتوانید قطعه را باز کرده و خودتان آن را اجرا کنید تا نتایج را ببینید.
- من استفاده خواهم کرد
scrib.show
از scribbler.live ، معادل آن استconsole.log
بیایید شیرجه بزنیم.
فهرست مطالب
روشهای غیر جهش یافته
این روش ها آرایه اصلی را تغییر نمی دهد بلکه آرایه جدیدی را برای نتیجه ایجاد می کند ، این موارد شامل:
-
filter
– یک آرایه را بر اساس عملکرد پاسخ به تماس فیلتر می کند -
map
– بر اساس یک عملکرد پاسخ به تماس ، از آرایه استفاده کنید -
slice
– بخشی از آرایه را استخراج کنید -
concat
– ادغام 2 آرایه -
flat
– آرایه های چند بعدی یا تو در تو را صاف کنید -
flatMap
– آرایه های چند بعدی یا تو در تو را با 1 سطح صاف کنید و نقشه برداری را با عملکرد پاسخ به تماس با آن انجام دهید.
رمز نمونه
const technologies = [
{
name:"HTML",
type:"Frontend"
},
{
name:"CSS",
type:"Frontend"
},
{
name:"JS",
type:"Frontend"
},
{
name:"React",
type:"Frontend"
},
{
name:"Java",
type:"Backend"
},
{
name:"Node",
type:"Backend"
},
]
const otherTechnologies = [
{
name:"Python",
type:"Backend"
},
{
name:"Rust",
type:"Backend"
},
]
// filter method
const frontendTechs = technologies.filter(technology => {
if(technology.type === "Frontend"){
return technology
}
})
scrib.show("Frontend techs - ",frontendTechs) // will return an array with items with type Frontend
// map method
const frontendTechsNames = frontendTechs.map(technology => technology.name) // will return an array with technology names with type Frontend
scrib.show("Frontend tech names - ",frontendTechsNames) // will return an array with items with type Frontend
// slice method
const firstThreeItems = technologies.slice(0,3) // first three items in the array
scrib.show("First three items - ",firstThreeItems)
// concat method
const combinedTechnologies = technologies.concat(otherTechnologies)
scrib.show("Combined technologies - ",combinedTechnologies)
// flat method
const nestedArrays = ["HTML","CSS","JS",["REACT","NEXTJS", ["TAILWIND",["SCSS"]]]]
const oneLevelFlat = nestedArrays.flat()
const twoLevelFlat = nestedArrays.flat(2)
const infinityLevelFlat = nestedArrays.flat(Infinity)
scrib.show(oneLevelFlat)
scrib.show(twoLevelFlat)
scrib.show(infinityLevelFlat)
// flatMap method
const webTechnologies = ["HTML","CSS","JS"]
const flatAndLowercase = webTechnologies.flatMap(technology => technology.toLowerCase())
scrib.show(flatAndLowercase)
زنجیر کردن روشها
// Chaining of methods
const technologies = [
{
name:"HTML",
type:"Frontend"
},
{
name:"CSS",
type:"Frontend"
},
{
name:"JS",
type:"Frontend"
},
{
name:"React",
type:"Frontend"
},
{
name:"Java",
type:"Backend"
},
{
name:"Node",
type:"Backend"
},
]
// Filter and map
const frontendNamesByChaining = technologies.filter(technology => technology.type === "Frontend").map(technology => technology.name)
scrib.show(frontendNamesByChaining)
// flat and map
const nestedArrays = ["HTML","CSS","JS",["REACT","NEXTJS", ["TAILWIND",["SCSS"]]]]
const flatAndMapChaining = nestedArrays.flat(Infinity).map(technology => technology.toLowerCase())
scrib.show(flatAndMapChaining)
پرداخت این تعبیه شده برای اجرای مثال کد ذکر شده در بالا
این برای این پست است ، به من اطلاع دهید که آیا می توانم در این مقاله پیشرفت هایی انجام دهم. همچنین ، وب سایت scribbler.live را بررسی کنید.
شما می توانید با من تماس بگیرید –
اینستاگرام – https://www.instagram.com/supremacism__shubh/
LinkedIn-https://www.linkedin.com/in/shubham-tiwari-b7544b193/
ایمیل – shubhmtiwri00@gmail.com
شما می توانید با کمک مالی در لینک زیر به من کمک کنید متشکرم
https://www.buymeacoffee.com/waaduheck
همچنین این پست ها را نیز بررسی کنید